Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码)

前言

之前我介绍了替代Universal?Media?PlayerUMP播放石云监控视频流(ezopen)的功能,效果还是很明显的,笔者的测试是差不多3-5秒就能打开监控画面,不过稍微遗憾的是,之前的功能是iframe打开石云提供的播放网页的形式,功能基本只有画质切换,声音开关等;具体可以移步查看(https://blog.csdn.net/qq_33789001/article/details/132025298)。本文的功能还是在3D WebView for Windows and macOS (Web Browser)?插件的基础上使用EZUIKit的插件实现了云台控制(支持云台的设备)功能。

效果

WebGL的支持:

云台支持:

功能实现

笔者所用的插件:

LitJson 用于生成/解析网络请求的json。

DOTweenPro 用于制作简单的窗口弹出、关闭动画;

3D WebView for Windows and macOS (Web Browser) 用于打开网页(使用说明(https://blog.csdn.net/qq_33789001/article/details/126180804))的插件(看需求使用Embedded Browser也可以),需要WebGL 平台的还需要2D WebView for WebGL (Web Browser IFrame)插件。

获取accessToken,管理员账号根据appKey和secret获取accessToken;获取监控视频流等基础功能 就不再次赘述了,可以参考前言中的文章。

这里打开本地网页的方式函数:

javascript 复制代码
string url = "streaming-assets://CamLocalWebPlay/WebPlayCamVideo.html?url=" + path + "&token=" + YsAccessTokenMgr.instance.AT;
canvasWebView.WebView.LoadUrl(url);

streaming-assets:// 表示文件的路径在Unity3d的StreamingAssets文件夹下。

方式一 本地iframe

视频嵌入式播放方式,详细说明请看:https://open.ys7.com/bbs/article/20。所以就是本地的网页,这里我直接先粘出代码:

html 复制代码
<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>本地网页监控播放</title>

    <style>
        html, body, iframe {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 100%;
            height: 100%;
        }

        iframe {
            border: none;
        }

    </style>
  <body onload="document.documentElement.webkitRequestFullScreen();">
      <div id="wrap">
          <iframe id="videoframe">
          </iframe>
      </div>
    <script>
        function getUrlParam(key) {
            const search = window.location.search.substring(1);
            const paramsArray = search.split("&");
            let value = null;
            paramsArray.forEach((param) => {
                const [paramKey, paramValue] = param.split("=");
                if (key === paramKey) {
                    value = paramValue;
                }
            });
            return value;
        }
        var iframe = document.getElementById("videoframe");
        iframe.src = "https://open.ys7.com/ezopen/h5/iframe_se?url=" + getUrlParam("url") 
            + "&autoplay=1&audio=0&accessToken=" + getUrlParam("token") ;
    </script>
  </body>
</html>

这里根据输入的url 和token生成iframe_se的参数,即可正常播放。

方式一 本地EZUIKit

EZUIKit插件算是官方给出的插件,降低接入难度,适配自定义UI,适配主流框架;低延时预览,云存储回放,SD卡回放。功能API丰富,如:播放控制,音频控制,视频截图,实时获取视频OSDTime,视频录制,设备对讲,电子放大,全屏等。

其使用方式也比较简单:

创建DOM

html 复制代码
  <div id="video-container"></div>

直播播放

javascript 复制代码
var player = new EZUIKit.EZUIKitPlayer({
  id: 'video-container', // 视频容器ID
  accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
  url: 'ezopen://open.ys7.com/G39444019/1.live',
  width: 600,
  height: 400,
})

回放播放

javascript 复制代码
    var player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      width: 600,
      height: 400,
      accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
      url: 'ezopen://open.ys7.com/G39444019/1.rec'
})

使用它需要先把代码仓库git下来,并将EZUIKit-JavaScript-npm/demos/base-demo/ezuikit_static/文件夹放入功能中

引入脚本:

html 复制代码
 <script src="./ezuikit.js"></script>

编写一个很简单的网页仅包含一个元素

html 复制代码
<div id="video-container"></div>  

并且通过EZUIKit.EZUIKitPlayer函数进行初始化:

javascript 复制代码
var player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
      url: 'ezopen://open.ys7.com/203751922/1.live',
    })

这里关键的就是需要传入url和accessToken的值,这个之前通过萤石的后台已经获取。

可以设置模板:

Template // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;

theme-可配置主题;

笔者尝试过后,发现只有standard-标准版和theme-可配置主题有效,其它为白屏效果。

standard-标准版:

theme-可配置主题:

点击云台控制按钮可以调出云台的控制面板:

也可以自定义按钮来控制播放:

结束播放: player.stop() 开启声音: player.openSound()

关闭声音: player.closeSound()

开始录像: player.startSave()

结束录像: player.stopSave()

视频截图: player.capturePicture()

全屏(自动适配移动端pc端全屏): player.fullScreen()

取消全屏: player.cancelFullScreen()

获取播放时间回调: player.getOSDTime()

开始对讲: player.startTalk()

结束对讲: player.stopTalk()

工程源码

完整的工程源码:https://download.csdn.net/download/qq_33789001/88135255

无法打开说明审核未通过。

现在工程后,打开项目中的Main.unity场景,选中FunNodes>YsAccessTokenMgr节点设置您自己的appKey和appSecret:

选中Icon_Camera修改视频标签的信息deviceSerial和channelNo:

确保的信息都是同一个账号下面的,运行后点击视频图标即可看到播放的效果了。