Small program access mode

Applets access essentially uses the RTMP protocol to fetch streams and play them through the live-player control in the applets. This play supports preview and playback.

Access process (Prerequisites for obtaining a token are omitted… It’s usually served from the back)

  • https://open.ys7.com/api/lapp/v2/live/address/getPass the parameters as required to obtain the RTMP address.

– Put the RTMP address in<live-player>The plugin is ready to play.

  • All switching operations need to re-request the interface to get the new RTMP address, updated tolive-playerCan complete the video switching operation.
  • https://open.ys7.com/api/lapp/video/by/timeThis interface allows you to view the playback time segment of the device.
  • Switch the playback time with the progress bar.

Q&A

  • The wechat control does not have a progress bar when watching playback video content, so you have to write your own progress bar. However, fluorite’s official small program DEMO has written a progress bar control, can be directly used. Of course, the progress bar is relatively simple, he writes 144 divs, then calculates their offsets, and the style is ugly. If you have more time, you can use Canvas to write it again (the basic library version of wechat should be considered before writing). For specific API, you can refer to DEMO.
  • Can I completely customize the video style? Yes, according to wechatlive-playerRelevant documents to operate on it.
  • Some phones have black video screens. A: Mobile phone set microphone permission to open, open the normal playback. The reason is that we use RTC mode, which requires the microphone to be turned on.

conclusion

Small program access is mainly the use of RTMP stream, and then a video playback, this scheme for small program is a very good scheme, to meet the advantages of low delay, convenient expansion.

Live broadcast access mode

The essence of this access method is to use the HLS stream, fluorite provides a ready-made H5 page, fill in the corresponding parameters can be generated, you can also obtain the HLS stream address for development. This mode does not support playback, but only live broadcast.

access

A. way
  • Access mode and small program access mode similar, the only difference isprotocolWrite this parameter as 2(for HLS). When we pass the parameter, we can get the corresponding data:
{ "msg": "Operation succeeded", "code": "200", "data": { "id": "261665061356453888", "url": "https://open.ys7.com/v3/openlive/C95326291_1_1.m3u8?expire=1608657842&id=261665061356453888&t=1622b5d4f8ba11f85dec28920 61c034140e69167d58f9bc3265578bad482f340&ev=100", "expireTime": "2020-12-23 01:24:02" } }Copy the code
  • Once we have the address, we can use the open source libraryvideo.jsTo play a video.(I tried this one, because the device is offline, there are some problems, I will fill the DEMO)..
B. way

Through the management background configuration page can generate fluorite related live page.

Download the plug-in access mode.

This method is different from the above two methods. Its advantage is that it has powerful functions and can realize split screen. The disadvantage is that users need to download the plug-in and it is not used on the mobile terminal.

access

  • First you have to download the plug-inHikOpenServicePlugin.exe..
  • The introduction ofJsWebControl - 1.0.0. Min. JsThe library also creates the instance object oWebControl
OWebControl = new WebControl({szPluginContainer: 'playWnd', // dom node id iServicePortStart: 14550, // Corresponding to ServicePortStart value iServicePortEnd in localServiceconfig. XML: 14559, // Corresponding to LocalServiceConfig. XML ServicePortEnd value cbConnectSuccess, // successful callback cbConnectterror, // failed callback cbConnectClose, // Unexpected disconnect callback});Copy the code
  • Call some methods in this example to play and switch the video.

Uikit video control

The control is divided into three modes, including live mode, monitoring mode, multi-window mode.

The difference between the three models

  • Live broadcast mode: The camera picture is transmitted to the user in real time and can be played without verification. This mode requires the generation of adaptive addresses, which can be turned on in developer Services – My Device – Live Addresses.

  • Monitoring mode: After verification, users can experience low-latency monitoring video playback.

  • Multi-window mode: On the basis of monitoring mode, multiple video images can be viewed at the same time, supporting 1,4 and 9 Windows.

Note: The standard protocol used in the live broadcast mode has obvious advantages, which can be played without verification, is simple to use, easy to spread, but relatively high cost. It is recommended to use it with the monitoring mode. You can refer to the practical experience of the product page of the Light Application – Video Development Kit.

access

A. Live mode
  • Get Adaptive Addresses -> Adaptive addresses can be turned on in Developer Services – My Device – Live Addresses.

Conclusion: you can use Uikit or live address access

B. Monitoring mode

The biggest difference between surveillance mode and live mode is that it can watch playback. The monitoring mode is divided into the following templates: Simple: Minimalist; The standard edition. Security: Security version (preview playback); Vioce: voice version, the difference between the following versions is whether to help you package, their access methods are consistent, but the parameters are different.

  • Download by CDN/NPMezuikit-jsSDK.
  • Initialize the player

  • We’re done playing Uikit

Q&A

1. How to select an appropriate version in monitoring mode? A: We use the Simple version for mobile projects that require highly customizable messages such as progress bars, play buttons, full screen, etc. Because other versions of H5 compatibility is very poor, and the style is ugly. As for THE PC side, you can choose the appropriate version for use according to business needs. Because Uikit is a component with strong encapsulation, it is necessary to communicate with the product and design to use a version other than the simple version.

2. How do I customize the progress bar for simple? A: You can use canvas to render the progress bar, and then calculate the time according to the scrolling position. When scrolling, the words of canvas will change randomly. Then the time of the video can be obtained according to the getOSDtimeCallBack method to achieve synchronization between the video and the progress bar

3. Are there any holes in this component? A:

  • 1. This component essentially creates oneiframeTag, which is like having another page embedded in your page. The so-calledsimpleVersion actually is to hide some video controls. So for secondary development will be more difficult.
  • 2. The callback method of video initialization must be started before it is executed. For example, to obtain the real-time time of video playback, callgetOSDtimeMethods the trigger

GetOSDtimeCallBack callback. You can also use getOSDtime().then(res=>res) to get a single callback time. To get a continuous callback time, write your own setInterval.

  • 3. The initialization information is onlyurlIt can be dynamically modified, and other attributes cannot be switched during playback. If you want to modify the player, you have to reinitialize the playerstopMethods.

Uikit source code parsing

Have time to write ~