Unity3d C# quickly opens EZVIZ cloud monitoring video stream (ezopen) supports WebGL platform, and replaces UMP to play video stream (including source code)

foreword

Universal Media Player is a commonly used plug-in for video streaming playback. I don’t know how many pitfalls I’ve had since I used it. Although this plug-in is for nothing, what Party A and leaders complain about is that the speed of playing video streams is extremely slow. It may take tens of seconds to open the monitoring screen, and the waiting time is long. Also, when exporting WebGL, the video cannot be played, and this problem has not been solved. However, our commonly used EZVIZ cloud monitoring video stream is opened much faster on the applet side or the web side, which inspires the use of this grafting method in Unity3d. This problem is solved by opening the webpage and playing the video stream in the webpage. The experimental result is that it can be opened 2-3 times faster than Universal Media Player. This article is the Unity3d 2020.3.28f1c1 Personal version, taking the ezopen protocol of EZVIZ Cloud as an example to realize this function.

If your video streaming protocol is other (such as rtmp, rtsp, etc.), you need to convert the protocol of the camera to a protocol that can be played in the browser. The specific method needs to be done by the relevant personnel of the webpage. This is the method I found on the Internet. I have not conducted a practical test. It is for reference only:

1. Nginx’s RTMP module configuration method, convert RTSP to RTMP protocol through Ffmpeg, then configure the mapping from RTMP to HLS protocol in Nginx, and finally request according to the specified rule path.

2. Ffmpeg directly converts the RTSP protocol into the HLS protocol, writes it to the specified directory of Nginx, and then Nginx proxies the directory as HTTP access, and the browser can directly request it. This method will generate many ts files, which need It is possible to try to clean it up, but it is not recommended to use it.

Effect

Windows effect one:

Windows effect two:

WebGL platform:

If there is a problem with the device, it will directly prompt on the playback interface:

The above dynamic picture does not show the successful screen, because the device is not owned by the individual, so the successful screen is not directly displayed.

work preparation

Plugins used by the author:

LitJson for generating/parsing json for network requests.
DOTweenPro is used to make simple window pop-up and close animations;
3D WebView for Windows and macOS (Web Browser) is used to open web pages (instructions for use (https://blog.csdn.net/qq_33789001/article/details/126180804)) Plug-ins (Embedded Browser can also be used depending on the requirements), and the 2D WebView for WebGL (Web Browser IFrame) plug-in is required for the WebGL platform.

Reference article:
The author has written about EZVIZ cloud monitoring related operations before and can carry out some reference reuse.
Get accessToken: https://blog.csdn.net/qq_33789001/article/details/117251545
Get video stream address: https://blog.csdn.net/qq_33789001/article/details/128223680
Unity WebGl publishing problem:
https:/ /blog.csdn.net/qq_33789001/article/details/128900799

function realization

Get accessToken

The administrator account obtains the accessToken interface according to the appKey and secret.
Request location: https://open.ys7.com/api/lapp/token/get Request method: POST
① AccessToken, namely the access token. One of the necessary public parameters for interface calls, which is used to verify whether the interface access/call is authorized. The validity period is 7 days. During the validity period, there is no need to apply repeatedly and can be used repeatedly; ② The 7-day validity period cannot be changed, please use it on the business
side In the AccessToken scenario, verify the validity of the old Token and re-acquire the Token when it becomes invalid;
③ Newly acquired Token will not invalidate the old Token, and each Token has an independent 7-day lifecycle interface list as follows:

Return field
Field name type description
accessToken String The obtained accessToken
expireTime long The specific expiration time, accurate to milliseconds
The implementation code here is as follows:

    //令牌相关
    [Header("设置萤石云的appKey")]
    public string appKey = "";
    [Header("设置萤石云的appSecret")]
    public string appSecret = "";
    string GetATUrl = "https://open.ys7.com/api/lapp/token/get";
    [HideInInspector]
    public string AT = "";
    DateTime AtEdTime; //令牌失效时间
//请求萤石云的令牌
    void GetAccessToken()
    {
    
    
        isGetATing = true;
        List<IMultipartFormSection> formData = new List<IMultipartFormSection>();
        formData.Add(new MultipartFormDataSection("appKey", appKey));
        formData.Add(new MultipartFormDataSection("appSecret", appSecret));

        Global.DoReqWebApiPost(GetATUrl, formData, (bytes) =>
        {
    
    
            try
            {
    
    
                if (string.IsNullOrEmpty(bytes)) return;
                JsonData datas = JsonMapper.ToObject(bytes);
                if (!datas.ContainsKey("data")) return;
                if (!datas["data"].ContainsKey("accessToken") || !datas["data"].ContainsKey("expireTime")) return;
                AT = datas["data"]["accessToken"].ToString();
                AtEdTime = ConvertToDateTime(datas["data"]["expireTime"].ToString());
            }
            catch (Exception e)
            {
    
    
                Debug.LogWarning("获取萤石云AccessToken异常：" + e);
            }
            finally {
    
    
                isGetATing = false;
            }
        });
}

It should be noted that if the program runs for a long time, it is necessary to determine the expiration time of the accessToken, even if it is obtained and updated, otherwise it will cause malfunction.

Get Surveillance Video Stream

To obtain a single video stream address, you need to use accessToken as a parameter, and the protocol must be ezopen, and the expiration time should be as long as possible.

    [Header("是否同步流地址")]
    public bool isSyncUrl = true;
    [Header("选择视频流类型")]
    public Streaming_Type streamingType = Streaming_Type.ezopen;
    [Header("监控设备编号")]
    public string deviceSerial;
    [Header("监控频道号")]
public string channelNo;

 //获取视频地址
    void GetSteamingUrl()
    {
    
    
        List<IMultipartFormSection> formData = new List<IMultipartFormSection>();
        formData.Add(new MultipartFormDataSection("accessToken", YsAccessTokenMgr.instance.AT));
        formData.Add(new MultipartFormDataSection("deviceSerial", deviceSerial));
        formData.Add(new MultipartFormDataSection("channelNo", channelNo));
        formData.Add(new MultipartFormDataSection("expireTime", "2592000"));
        formData.Add(new MultipartFormDataSection("protocol", ((int)streamingType).ToString()));
        formData.Add(new MultipartFormDataSection("quality", "1"));

        Global.DoReqWebApiPost(StreamUrl, formData, (bytes) =>
        {
    
    
            try
            {
    
    
                if (string.IsNullOrEmpty(bytes))
                    return;
                JsonData datas = JsonMapper.ToObject(bytes);
                if (!datas.ContainsKey("data")|| !datas["data"].ContainsKey("url"))
                    return;
                videourl = datas["data"]["url"].ToString();
            }
            catch (Exception e)
            {
    
    
                Debug.LogWarning("获取萤石云视频流地址异常：" + e);
            }
        });
    }

It is also possible not to obtain the video stream address here, only the address of ezopen is needed for video embedding, and it will not be obtained when isSyncUrl is false.

Open the webpage to play the video

After we click the label of the surveillance video, we open the webpage of the surveillance video according to the information of the video label.
There are two ways to play the video stream: video embedded and jumping to the playback page. For details, please refer to: https://open.ys7.com/bbs/article/20Because
our video window is on the UI, So use CanvasWebViewPrefab to open the webpage:

 canvasWebView.WebView.LoadUrl(url);

video embedded

code show as below:

 string url = "https://open.ys7.com/ezopen/h5/iframe_se?url=" + path + "&autoplay=1&audio=0&accessToken=" + YsAccessTokenMgr.instance.AT;
        canvasWebView.WebView.LoadUrl(url);

The description is as follows:
url: monitoring address, including verification code, device serial number, channel number, resolution, playback type
autoplay: 1- enable autoplay, no fields displayed - disable autoplay
audio: 1- enable audio, no fields displayed- Turn off the audio
accessToken: access token, the necessary parameters to play the monitoring address.
When testing this method, the author found that in WebGL, this method may cause webpage errors under certain circumstances and the video is not played:

Jump play page

code show as below:

 string url = " https://open.ys7.com/ezopen/h5/live?autoplay=1&audio=0&accessToken=" + YsAccessTokenMgr.instance.AT + "&hd=1&deviceSerial=" + camlab.deviceSerial + "&channelNo=" + camlab.channelNo;
        canvasWebView.WebView.LoadUrl(url);

The instructions are as follows:
live suffix: preview
rec suffix: playback
autoplay: 1- enable autoplay, no fields displayed - turn off autoplay
audio: 1- enable audio, no fields displayed - turn off audio
accessToken: access token, necessary to play the monitoring address Parameters
validCode: verification code, the verification code is required for encrypted device playback
hd: 1-high definition (actually the main stream), the field not displayed-smooth (actually the sub-stream)
deviceSerial: device serial number
channelNo: channel number

Project source code

Complete project source code: https://download.csdn.net/download/qq_33789001/88135255
Cannot be opened, indicating that the audit has not passed.

Now after the project, open the Main.unity scene in the project, select the FunNodes>YsAccessTokenMgr node to set your own appKey and appSecret:

Select Icon_Camera to modify the information deviceSerial and channelNo of the video tag:

Ensure that the information is under the same account. After running, click the video icon to see the playback effect.