效果图
实现
下面方式一的播放url获取：登录萤石云->控制台->我的资源->设备列表->列表中：查看通道->监控地址
下面方式二的播放url获取：登录萤石云->控制台->我的资源->设备列表->列表中：查看通道->直播地址
appKey和appSecret获取：登录萤石云->控制台->我的账号->应用信息->右侧：应用密钥
下载ezuikit.js
- 官网下载：https://open.ys7.com/mobile/download.html
- 我使用的版本是：v7.2-------2022-11-25
- 官网API：http://hls.open.ys7.com/doc/zh/book/index/user.html
- accessToken获取接口【POST】：
https://open.ys7.com/api/lapp/token/get?appKey=ff768f0051284521b2*********9403&appSecret=7f06909efa7a80*********d652dac33
填充萤石云用户的appKey和appSecret
html中
需要引入ezuikit.js
<divid="video-container"style="width: 1000px;"></div><scripttype="text/javascript"src="js/ezuikit.js"></script>
JS中
var accessToken ="at.5bjnyfge123nq1vr2x***************************-f7tapedip";var playr =newEZUIKit.EZUIKitPlayer({id:'video-container',// 视频容器IDaccessToken: accessToken,url:'ezopen://open.ys7.com/E5927****/1.hd.live',// SN：E5927****，通道号：1，视频类型：hd// template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；plugin:['talk'],// 加载插件，talk-对讲width:1000,height:600,});
以上就可以查看实时监控了
下面是全代码使用方式例子
方式一
官方js生成标签自动播放
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title></head><body><divid="video-container"style="width: 1000px;"></div><divstyle="margin-top: 10px;"><buttononClick="play()">play</button><buttononClick="stop()">stop</button><buttononClick="getOSDTime()">getOSDTime</button><buttononClick="getOSDTime2()">getOSDTime2</button><buttononClick="capturePicture()">capturePicture</button><buttononClick="openSound()">openSound</button><buttononClick="closeSound()">closeSound</button><buttononClick="startSave()">startSave</button><buttononClick="stopSave()">stopSave</button><buttononClick="ezopenStartTalk()">开始对讲</button><buttononClick="ezopenStopTalk()">结束对讲</button><buttononClick="fullScreen()">全屏</button></div></body><scripttype="text/javascript"src="js/ezuikit.js"></script><script>// 官网下载：https://open.ys7.com/mobile/download.html// 官网API：http://hls.open.ys7.com/doc/zh/book/index/user.html// accessToken获取接口【POST】： https://open.ys7.com/api/lapp/token/get?appKey=ff768f0051284521b2*********9403&appSecret=7f06909efa7a80*********d652dac33var accessToken ="at.5bjnyfge123nq1vr2x***************************-f7tapedip";var playr =newEZUIKit.EZUIKitPlayer({id:'video-container',// 视频容器IDaccessToken: accessToken,url:'ezopen://open.ys7.com/E5927****/1.hd.live',// SN：E5927****，通道号：1，视频类型：hd// template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；plugin:['talk'],// 加载插件，talk-对讲width:1000,height:600,});// 功能functionfullScreen(){var playPromise = playr.fullScreen();
playPromise.then((data)=>{
console.log("promise 获取 数据", data)})}functionplay(){var playPromise = playr.play();
playPromise.then((data)=>{
console.log("promise 获取 数据", data)})}functionstop(){var stopPromise = playr.stop();
stopPromise.then((data)=>{
console.log("promise 获取 数据", data)})}functiongetOSDTime(){var getOSDTimePromise = playr.getOSDTime();
getOSDTimePromise.then((data)=>{
console.log("promise 获取 数据", data)})}functiongetOSDTime2(){var getOSDTimePromise = playr2.getOSDTime();
getOSDTimePromise.then((data)=>{
console.log("promise 获取 数据", data)})}functioncapturePicture(){var capturePicturePromise = playr.capturePicture();
capturePicturePromise.then((data)=>{
console.log("promise 获取 数据", data)})}functionopenSound(){var openSoundPromise = playr.openSound();
openSoundPromise.then((data)=>{
console.log("promise 获取 数据", data)})}functioncloseSound(){var closeSoundPromise = playr.closeSound();
closeSoundPromise.then((data)=>{
console.log("promise 获取 数据", data)})}functionstartSave(){var startSavePromise = playr.startSave();
startSavePromise.then((data)=>{
console.log("promise 获取 数据", data)})}functionstopSave(){var stopSavePromise = playr.stopSave();
stopSavePromise.then((data)=>{
console.log("promise 获取 数据", data)})}functionezopenStartTalk(){
playr.startTalk();}functionezopenStopTalk(){
playr.stopTalk();}</script></html>
方式二
使用video播放，但是浏览器会限制自动播放
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>video播放器实时监控</title></head><body><videoid="myPlayer"autoplaycontrolsstyle="width: 600px;height:400px"></video></body><scripttype="text/javascript"src="js/ezuikit.js"></script><script>// 弊端：浏览器默认限制自动播放// 开始初始化直播源地址（此处官方例子，可直接查看效果）var player =newEZUIKit.HLS("myPlayer","https://open.ys7.com/v3/openlive/G39444019_1_2.m3u8?expire=1687487466&id=461840962679742464&t=c076d5a5ad56090e919a6a2500b96169c20a77874cce866a87a7d65e493e6f2f&ev=100");// 播放
player.play();// 结束//player.stop();</script></html>
本文转载自: https://blog.csdn.net/weixin_43992507/article/details/128102675
版权归原作者 慕云枫 所有， 如有侵权，请联系我们删除。
版权归原作者 慕云枫 所有， 如有侵权，请联系我们删除。