- 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: "www.thingjs.com/static/imag…", 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.需要了解更多操作请查看萤石官方文档（~~）
