前言
之前我介绍了替代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:
文章来源:https://www.toymoban.com/news/detail-649647.html
确保的信息都是同一个账号下面的,运行后点击视频图标即可看到播放的效果了。文章来源地址https://www.toymoban.com/news/detail-649647.html
到了这里,关于Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!