前言
之前我介紹了替代Universal?Media?PlayerUMP播放石云監(jiān)控視頻流(ezopen)的功能，效果還是很明顯的，筆者的測(cè)試是差不多3-5秒就能打開監(jiān)控畫面，不過稍微遺憾的是，之前的功能是iframe打開石云提供的播放網(wǎng)頁的形式，功能基本只有畫質(zhì)切換，聲音開關(guān)等；具體可以移步查看(https://blog.csdn.net/qq_33789001/article/details/132025298)。本文的功能還是在3D WebView for Windows and macOS (Web Browser)?插件的基礎(chǔ)上使用EZUIKit的插件實(shí)現(xiàn)了云臺(tái)控制（支持云臺(tái)的設(shè)備）功能。
效果
WebGL的支持：
云臺(tái)支持：
功能實(shí)現(xiàn)
筆者所用的插件：
LitJson 用于生成/解析網(wǎng)絡(luò)請(qǐng)求的json。
DOTweenPro 用于制作簡(jiǎn)單的窗口彈出、關(guān)閉動(dòng)畫；
3D WebView for Windows and macOS (Web Browser) 用于打開網(wǎng)頁（使用說明（https://blog.csdn.net/qq_33789001/article/details/126180804））的插件（看需求使用Embedded Browser也可以），需要WebGL 平臺(tái)的還需要2D WebView for WebGL (Web Browser IFrame)插件。
獲取accessToken，管理員賬號(hào)根據(jù)appKey和secret獲取accessToken；獲取監(jiān)控視頻流等基礎(chǔ)功能 就不再次贅述了，可以參考前言中的文章。
這里打開本地網(wǎng)頁的方式函數(shù)：
string url = "streaming-assets://CamLocalWebPlay/WebPlayCamVideo.html?url=" + path + "&token=" + YsAccessTokenMgr.instance.AT;
canvasWebView.WebView.LoadUrl(url);
streaming-assets:// 表示文件的路徑在Unity3d的StreamingAssets文件夾下。
方式一 本地iframe
視頻嵌入式播放方式，詳細(xì)說明請(qǐng)看：https://open.ys7.com/bbs/article/20。所以就是本地的網(wǎng)頁，這里我直接先粘出代碼：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>本地網(wǎng)頁監(jiān)控播放</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>
這里根據(jù)輸入的url 和token生成iframe_se的參數(shù)，即可正常播放。
方式一 本地EZUIKit
EZUIKit插件算是官方給出的插件，降低接入難度，適配自定義UI，適配主流框架；低延時(shí)預(yù)覽，云存儲(chǔ)回放，SD卡回放。功能API豐富，如：播放控制，音頻控制，視頻截圖，實(shí)時(shí)獲取視頻OSDTime，視頻錄制，設(shè)備對(duì)講，電子放大，全屏等。
其使用方式也比較簡(jiǎn)單：
創(chuàng)建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>
編寫一個(gè)很簡(jiǎn)單的網(wǎng)頁僅包含一個(gè)元素
<div id="video-container"></div>
并且通過EZUIKit.EZUIKitPlayer函數(shù)進(jìn)行初始化：
var player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 視頻容器ID
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
url: 'ezopen://open.ys7.com/203751922/1.live',
})
這里關(guān)鍵的就是需要傳入url和accessToken的值，這個(gè)之前通過螢石的后臺(tái)已經(jīng)獲取。
可以設(shè)置模板：
Template // simple - 極簡(jiǎn)版;standard-標(biāo)準(zhǔn)版;security - 安防版(預(yù)覽回放);voice-語音版;
theme-可配置主題；
筆者嘗試過后，發(fā)現(xiàn)只有standard-標(biāo)準(zhǔn)版和theme-可配置主題有效，其它為白屏效果。
standard-標(biāo)準(zhǔn)版：
theme-可配置主題：
點(diǎn)擊云臺(tái)控制按鈕可以調(diào)出云臺(tái)的控制面板：
也可以自定義按鈕來控制播放：
結(jié)束播放： player.stop() 開啟聲音： player.openSound()
關(guān)閉聲音： player.closeSound()
開始錄像： player.startSave()
結(jié)束錄像： player.stopSave()
視頻截圖： player.capturePicture()
全屏（自動(dòng)適配移動(dòng)端pc端全屏）： player.fullScreen()
取消全屏： player.cancelFullScreen()
獲取播放時(shí)間回調(diào)： player.getOSDTime()
開始對(duì)講： player.startTalk()
結(jié)束對(duì)講： player.stopTalk()
工程源碼
完整的工程源碼：https://download.csdn.net/download/qq_33789001/88135255
無法打開說明審核未通過。
現(xiàn)在工程后,打開項(xiàng)目中的Main.unity場(chǎng)景，選中FunNodes>YsAccessTokenMgr節(jié)點(diǎn)設(shè)置您自己的appKey和appSecret：
選中Icon_Camera修改視頻標(biāo)簽的信息deviceSerial和channelNo：
文章來源：http://www.zghlxwxcb.cn/news/detail-649647.html
確保的信息都是同一個(gè)賬號(hào)下面的，運(yùn)行后點(diǎn)擊視頻圖標(biāo)即可看到播放的效果了。文章來源地址http://www.zghlxwxcb.cn/news/detail-649647.html
到了這里，關(guān)于Unity3d C#利用本地網(wǎng)頁快速打開螢石云監(jiān)控視頻流(ezopen)實(shí)現(xiàn)云臺(tái),聲音等控制,支持WebGL平臺(tái)，替代UMP播放（含源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
