Thingjs嵌入萤石视频ezuikit.js+ezopen协议

thingjs在使用外部资源时，需要复制第三方资源代码到该平台，在嵌入视频之前需要引入萤石官方文档中提供的ezuikit.js官方文档，下载ezuikit.js。
正题来了，直接贴代码

THING.Utils.dynamicLoad([
// 将ezuikit.js文件复制到自己的项目中，在引入
‘/自己的项目路径/ezuikit.js’
],
function () {
// 加载场景后执行
app.on(‘load’, function (ev) {
new THING.widget.Button(‘监控’, () => {
// 找的场景中的摄像头
let monitor = app.query("[物体类型=摄像头]")[0]
// 调用摄像头封装类
new VideoCamera(monitor)
});
});
// 摄像头封装类-绘制标牌
function VideoCamera(obj) {
this.obj = obj;
this.player = null;
var that = this; this.marker = app.create({
type: “Marker”,
offset: [0, 0.5, 0],
size: 3,
url: “https://www.thingjs.com/static/images/sliohouse/videocamera3.png”,
parent: obj,
keepSize: true // 设置图标始终保持像素大小
});
// 点击标牌弹出视频
this.marker.on(‘click’, function () {
that.showVideoFrame();
});
}
// 显示视频类
VideoCamera.prototype.showVideoFrame = function () {
// 使用UI布局外观
var template =
<div id="monitor" style='position:absolute;bottom:20px;margin:0px 20px;padding: 0px 20px;background: rgba(5, 93, 250, .3);'> <div style="width:450px;height:300px;" id="video-container"></div> </div>;
// 插入到 ThingJS 内置的 2D 界面 div 中
(钱的英文符号)(’#div2d’).append($(template));
// 创建视频
if (!this.player) {
let box = document.getElementById(“EZUIKitPlayer-video-container”);
box && box.remove();
this.player = new EZUIKit.EZUIKitPlayer({
autoplay: true,
id: “video-container”,
accessToken: “自己的accessToken”,
url: “自己的ezopen协议视频路径”,
template: “simple”, // simple - 极简版; standard-标准版; security - 安防版(预览回放); voice-语音版；
// fullScreenCallBack: data => console.log(“全屏回调”, data),
});
}
}
})

3.需要了解更多操作请查看萤石官方文档（~~）

Thingjs嵌入萤石视频ezuikit.js+ezopen协议相关推荐

uniapp结合萤石视频ezuikit.js的爬坑记录
1.前言由于开发需要,项目需要接入萤石的视频监控.萤石官方提供了三种协议的的视频方式,hls,rtmp,ezopen.三种协议是视频直播有一定差别,由于hls有十多秒的延迟,不符合项目的要求,并且因 ...
html实现ezuikit.js萤石云直播监控，ezuikit.js实时监控实现，萤石云实时监控简单实现
效果图实现下面方式一的播放url获取:登录萤石云->控制台->我的资源->设备列表->列表中:查看通道->监控地址下面方式二的播放url获取:登录萤石云->控 ...
萤石视频监控模式的参数decoderPath配置问题
这是萤石视频监控模式的api文档这里写了decoderPath参数为必填,是ezuikit的绝对地址这个地址就是你引入ezuikit.js的绝对路径如果你路径没填或是写错了,会报这样的错比如, ...
关于博客园内嵌入bilibili视频
原文:https://www.cnblogs.com/wkfvawl/p/12268980.html 一.原理使用iframe标签,更改其中src对应bilibili视频的aid和cid,组装新的H ...
腾讯视频Node.js服务是如何支撑国庆阅兵直播高并发的？
导语 | 上个月,我有幸参与了腾讯视频国庆阅兵直播页面开发的相关工作,最终,累计观看2.38亿人次,经受住了高并发的考验.在参于Glama框架的开发维护及平时基础建设相关讨论实践中,对高并发有一些部分 ...
腾讯视频 Node.js 服务是如何支撑国庆阅兵直播高并发的？
导语 | 上个月,我有幸参与了腾讯视频国庆阅兵直播页面开发的相关工作,最终,累计观看2.38亿人次,经受住了高并发的考验.在参于Glama框架的开发维护及平时基础建设相关讨论实践中,对高并发有一些部分 ...
【Livepano】VR全景嵌入人物视频详细教程
livepano 即完全无缝融合到全景图中的变形热点视频. 这种无缝融合是真正无缝,从而让观者产生沉浸感和真实感. 所需素材: livepano最基本的两个源素材就是全景图以及所需的一个视频. 拍摄全 ...
vue 引入萤石视频
1.官网下载js包 https://open.ys7.com/mobile/download.html 2.(把下载好的ezuikit.js js包)放进vue 的 static 下 3.在inde ...
html中怎样插入视频博客园,关于博客园内嵌入bilibili视频
一.原理使用iframe标签,更改其中src对应bilibili视频的aid和cid,组装新的HTML源码,即可在文章内嵌入bilibili视频. 二.获取aid和cid aid为视频的av号,但是 ...

Thingjs嵌入萤石视频ezuikit.js+ezopen协议

Thingjs嵌入萤石视频ezuikit.js+ezopen协议相关推荐

最新文章

热门文章