前言
之前我介紹了替代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()
工程源碼
完整的工程源碼：https://download.csdn.net/download/qq_33789001/88135255
無法打開說明審核未通過。
現在工程后,打開項目中的Main.unity場景，選中FunNodes>YsAccessTokenMgr節點設置您自己的appKey和appSecret：
選中Icon_Camera修改視頻標簽的信息deviceSerial和channelNo：
確保的信息都是同一個賬號下面的，運行后點擊視頻圖標即可看到播放的效果了。
模板匹配)
