前言
之前我介绍了替代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', // 视频容器ID
accessToken: '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', // 视频容器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/文件夹放入功能中
引入脚本：
<script src="./ezuikit.js"></script>
编写一个很简单的网页仅包含一个元素
<div id="video-container"></div>
并且通过EZUIKit.EZUIKitPlayer函数进行初始化：
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：
确保的信息都是同一个账号下面的，运行后点击视频图标即可看到播放的效果了。
