foreword
Because the project needs to display real-time video streaming information on the Web and App, I tried many methods in the previous project. It is played with the vlc plug-in (due to the use of the plug-in, neither the Android App nor the WeChat applet can display the video, and finally gave up), and some are developed using the Hikvision Web Development Kit. But the easiest way is to directly access the video stream of EZVIZ cloud platform on the web or App (you can’t view historical data, you can only watch real-time video, and you need to pay for the cloud storage function of EZVIZ cloud platform). The prerequisite for using the services provided by the platform is to purchase EZVIZ Cloud or Hikvision equipment. The following is a summary of the official documents of EZVIZ cloud platform and the problems encountered in my own practice. Official document address: https://open.ys7.com/doc/zh/book/index/live_proto.html
1. Live access guide
The live address is the simplest video access method provided by EZVIZ open platform for users. It does not require complicated streaming media knowledge or advanced development technology. It only needs a camera and a developer account. Remote viewing of live video can be realized.
1.1. Live address acquisition
(1) After registering as a developer, log in to the official website of the open platform (you can also log in to the "EZVIZ Cloud Video" app with this account), and enter Developer Services - My Resources - Add Devices in My Devices (you need to connect the device to the Internet to do so) Add), if you refresh the page successfully, you can see the device information, as shown in the figure below:
(2) You can download a "EZVIZ Cloud Video" App, and after registering an account, you can add devices by logging in. Generally, the base of the EZVIZ Cloud camera you buy has a QR code, which can be added by scanning it with the App. There is another way is to click "Add Device" in the previous picture and fill in the corresponding data. App adding is more convenient, and you can directly view the video stream after adding the device on the App.
(3) After the device is added, the platform will not provide services. You need to obtain the test AccessToken in "My App" and fill in the corresponding information before using the service.
(4) After completing the previous step, you can use the live broadcast service. App adding is more convenient, and you can directly view the video stream after adding the device on the App. At this time, you must turn off "Video Encryption" in the App, otherwise the video cannot use the live broadcast service. After the device is added, it can be set in the "EZVIZ Cloud Video" App.
(5) Select a device and click on the live broadcast address to enter the live broadcast address setting page. Don’t worry about possible dangers caused by turning off encryption. The security of the live broadcast address can be controlled by setting the validity period. The security and anti-theft aspects will be introduced later. After turning off the encryption, you can see that your device has generated the corresponding live address, as shown below:
(6) After entering the live address, you can get the following link:
1.2. Simple distinction
HLS is suitable for mobile use, and can be opened directly by WeChat, or integrated with H5 pages and embedded in WeChat applets or WeChat official accounts.
RTMP is suitable for use on PC web pages, and can be played by embedding players such as flash or ckplayer into web pages. Compared with HLS, the delay is smaller and more stable.
Note: Perform an HLS playback test before use, and use it after confirming that the video can be played normally. An error message will be displayed for the address that cannot be played. Adjust according to the error message. If the adjustment cannot be restored, you can ask questions in the work order system.
1.3. How to use H5——HLS
EZVIZ cloud platform provides a H5 page that can be used directly, which can quickly generate the H5 live page of the HLS address of the device, and enable the H5 playback page to be used with simple configuration, as shown in the figure below:
This H5 page is only used for display on the mobile terminal, and cannot be used for PC-side web pages, but you can see the source code in F12 of the PC web page, and you can refer to the source code to implement your own H5 page if necessary.
Note: Please test and verify on the real machine (mobile phone) during the process of integrating the H5 page, emulator debugging is not supported.
1.4. Web usage method - RTMP
Web page integration requires the user to prepare a server first, and after building the web page, connect the video according to the method described below to play it.
Download UIKit JavaScript and upload it to the server, decompress it, and then configure the page as follows
Simple video access has been realized, and you can experience it by running the Web server. See UIKit JavaScript for a complete example.
For more operations on the player, you can learn more about ckplayer configuration (http://www.ckplayer.com/manualx/13.html)
If you need to integrate multiple videos and create multiple players, it can be achieved, but it should be noted that the minimum aspect ratio limit of a single player is {width: 400px; height: 300px;} (chrome browser device limit), autoplay will fail if it is smaller than this size.
1.5. How to use WeChat official account——HLS
Embed the H5 page in the WeChat official account to play the video. After generating the H5 page by referring to the H5 usage method, copy the address to the jump page address of the WeChat official account. The specific operation is as follows:
You can follow the public account of EZVIZ Open Platform (WeChat ID ez_open) for experience.
1.6 How to Use WeChat Mini Programs——HLS
The video in the Mini Program can only be accessed by the native component of the Mini Program, so the code on the H5 page does not apply to the Mini Program, and the Mini Program can only be played by the video component.
For a complete example, see the introduction of the Video component (https://developers.weixin.qq.com/miniprogram/dev/component/video.html)
Note: Please test and verify on the real machine (mobile phone) during the process of integrating the applet, emulator debugging is not supported.
1.7. Security and anti-theft
The feature of the live broadcast address is that it is easy to share, but because it is a standard protocol, it cannot be used for encrypted devices. Therefore, the EZVIZ cloud platform provides an anti-theft method for the HLS live broadcast address (RTMP is not currently supported). This method requires the user to generate a live broadcast address with a validity period on the server, and refresh it regularly for use on the front-end page. Using this interface allows the user to only get the valid live broadcast address specified for 5 minutes, 10 minutes, 1 hour, etc. After the expiration, the address will not be able to open the video, and a new address needs to be obtained from the merchant. Interface call logic: activate the live broadcast function (new devices need to enable live broadcast) - obtain the live broadcast address with a specified validity period (https://open.ys7.com/doc/zh/book/index/address.html)
FAQ:
1. Is it possible to play back the live broadcast?
Answer: At present, it can only be used for live broadcast of the device screen, and the playback technology is under pre-research, so stay tuned.
2. Does the playback test report 451 not support the code stream type?
Answer: This error may be reported in the following two situations; 1) Some Hikvision cameras do not have a sub-stream, so they cannot play smooth video. For details, please check the introduction of the specified model on the Hikvision official website. 2) The channel association of Hikvision NVR fails, and the video data of the specified channel cannot be obtained through the NVR, which is generally caused by the disconnection between the IPC and the NVR.
3. The playback test reports 452, 454, 501, 503, 544 errors?
Answer: This type of error code is a network error. It is recommended to refresh and try again to check the network conditions of the device and the player.
4. The live report is not encoded in H264 or has video but no sound?
Answer: The video encoding type of the live broadcast only supports H264, and the audio encoding type only supports AAC. You can modify the device configuration to realize the live broadcast. The encoding format can be modified-saved in EZVIZ Studio-Device Management-Device Searched in LAN-Advanced Settings-Image-Video and Audio Coding Type. Note: The encoding type under the main stream/sub stream/corresponding channel needs to be modified.
Add the following code to the project:
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
<video id="myPlayer" poster=""controls playsInline webkit-playsinline autoplay>
<source src="RTMP的链接" type="" />
<source src="HLS的连接" type="application/x-mpegURL" />
</video>
//根据需求选择链接
<script>
var player = new EZUIPlayer( 'myPlayer') ;
player.on('error', function (){
console.log('error');
});
player.on('play', function(){
console.log('play');
});
player.on( 'pause', function(){
console.log('pause');
});
</script>
以上代码可以在web端使用，也可以在移动端使用。