❤ 前端JS、Vue使用萤石实现视频回放、云台控制功能

前端JS、Vue使用海康萤石直播、回放、云台控制功能

1、官网文档：【萤石开放文档】

UIKit Javascript · 萤石开放平台API文档 (ys7.com)

• 最新代码和demo

https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm

• 云台控制功能

云台 · 萤石开放平台API文档 (ys7.com)

！问题1 老版本监控回放二合一模块 引入后无法隐藏DOM节点 需手动删除

！问题2 老版本监控回放二合一模块和新版本模块无法共用 不可以引入两个库 否则会造成模块切换后报错

———————————————————————————

2、简单使用

使用：【轻应用(H5/web)=>UIKit Javascript 】

官网文档地址：
【http://open.ys7.com/doc/zh/uikit/uikit_javascript.html】

npm 官网相关文档介绍：
https://www.npmjs.com/package/ezuikit-js

• 安装依赖

npm install ezuikit-js

main.js内引入

import EZUIKit from 'ezuikit-js';

<template>
  <div>
      <div id="videoPlayr"></div>
  </div>
</template>
 
<script>
 
import EZUIKit from "ezuikit-js";
var player = null;
export default {
  data(){
    return{
        videoInfo:{
            deviceurl:'',
            accessToken:'',
            deviceCode:'',
            deviceSerial:'',
          },
    }
  },
  methods: {
    videoPlayer() {
      player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: "videoPlayr",   // 播放控件的ID
        accessToken: this.videoInfo.accessToken,   // 后端给的Token
        url: this.videoInfo.deviceurl,         // 后端给的URL
        template: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        width: 1100,
        height: 563,
      });
  }
};
</script>

3、进阶方法调用

（1）停止播放

play.stop()

4、问题以及解决方法：

（1） A切换到B设备播放时，A依旧在播放

player.stop()

(2) 正在播放时,切换到其他模块/页面 也会造成关闭当前模块/页面后依旧在播放的问题,可以在销毁时调用停止播放方法 （必须加）

（3） 视频销毁【调用萤石云ezuikit-js的视频对象销毁】

① 调用html原生

document.getElementById('video-container1').innerHTML= "";

没起效果，元素虽然内容去掉，但是视频声音依然在

② 原生js remove()

（经检测十分的好用）

 if (_this[`${'player'+i}`]) {
        var stopPromise = _this[`${'player'+i}`].stop();
        stopPromise.then((data) => {
          _this[`${'player'+i}`] = null;
          let mdaid = "#videoPlayr" + i+'-wrap';
          document.querySelector(mdaid).remove();
        });
  }

友情提示：

萤石视频存在问题不少，建议第一次使用的用户还是去使用阿里云带的！