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；获取监控视频流等基础功能就不再次赘述了，可以参考前言中的文章。

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

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。所以就是本地的网页，这里我直接先粘出代码：

<!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

  <div id="video-container"></div>

直播播放

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

回放播放

    var player = new EZUIKit.EZUIKitPlayer({id: 'video-container', // 视频容器IDwidth: 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/文件夹放入功能中
引入脚本：

 <script src="./ezuikit.js"></script>

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

<div id="video-container"></div>

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

var player = new EZUIKit.EZUIKitPlayer({id: 'video-container', // 视频容器IDaccessToken: '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()