vue 萤石云视频监控对接

萤石云文档(web开发)参考博客：https://www.jianshu.com/p/5b104ce25724参考博客：https://www.jianshu.com/p/00b6331f3aff

谭CV

8477人浏览 · 2021-09-09 17:18:15

谭CV · 2021-09-09 17:18:15 发布

萤石云文档(web开发)

萤石云DEMO下载

参考博客：vue中实现视频直播（萤石云） - 简书

参考博客：海康威视&萤石摄像头直播/监控模式Vue开发 - 简书

萤石云web开发文档短小易懂，一定要看(文档变更有点乱，我看的时候api部分已被移除，故参考了简书博客)

前提了解

兼容性

Chrome 55+
Firefox 55+
最新IE

直播与视频监控开发区别

直播可使用第三方播放器如video标签等；而视频监控不可
直播可使用https开头链接；而视频监控不可，视频监控使用萤石云协议(ezopen://)

视频监控链接地址特征

预览：ezopen:// [验证码@] open.ys7.com/[deviceSerial]/[channelNo] [.hd].live（示例：ezopen://open.ys7.com/203751922/1.hd.live）
回放：ezopen:// [验证码@] open.ys7.com/[deviceSerial]/[channelNo] [.hd].rec[?begin= yyyyMMddhhmmss&end= yyyyMMddhhmmss]（ezopen://验证码@open.ys7.com/203751922/1.rec?begin=20190317000000&begin=20190317235959）

tips：

回放地址不带时间参数时默认取当日0时0分0秒至23时59分59秒，缺省也同样会自动补充，比如begin=2019031709，系统会自动给补充为begin=20190317090000&end=20190317235959

回放时间点是否存在录像可以通过调用根据时间获取存储文件信息接口（链接）来查询验证

多窗口模式

从文档中只看到多窗口只针对监控
多窗口监控地址通过逗号分隔

窗口切割参数：splitBasis

//在监控模式中设置窗口切割参数（1*1,2*2,3*3）
var player = new EZUIPlayer({
    id: 'myPlayer',
    url: {url0},{url1},{url2},{url3}, // ezopen播放地址逗号分隔
    autoplay: true,
    accessToken: "at.8o2k6dbpcvtr13reaa96hbnya6*************c",
    decoderPath: '{{location path}}',
    width: 1200, // 宽度高度为容器规格，将按照窗口数均分
    height: 800,
    splitBasis: 2 //设置窗口切割参数
  });

包引入区别

js原生引入方式，示例：

<script src="../ezuikit.js"></script>
<script src="../js/jquery.min.js"></script>

node构建，示例

npm install ezuikit-js

//当前使用的文件引入
import  EZUIKit from 'ezuikit-js';

ezuikit-js源码了解(主要是播放器模板的区别)

simple(极简版)
standard(标准版)
security(安防版(预览回放))
voice(语音版)

1.其中simple最适合用来自定义，ezuikit-js中的大部分代码都是simple的，当给simple进行header，footer等配置时，不满意，可以在源码中进行更改，该源码只有js代码，html和css皆由js来生成，与其通过配置来对simple进行改变，不如对simple自定义（由参考博客1可知萤石云大部分api非常方便使用）

2.standard/security/voice，这是三种固定模板，无法进行配置（由源码可知：本地并无此三种模板的代码，代码在萤石云服务器上），若需对此三种模板进行样式等变更，则需要对不同源iframe进行操作(麻烦)

开发（只包含视频监控）

1.npm包引入 ezuikit-js

2.根据公司需求和对上述前提的了解，我选择了对simple进行自定义

代码：

//组件:萤石云视频监控simple自定义

<template>
  <div class="hello-ezuikit-js">
    <div id="video-container" style="width:100%;height:500px">
       <div class="mask" @click="togglePlay" :style="{ 'display': play ? 'none' : 'block' }">
       </div>
       <div class="controll">
         <div class="left">
           <el-tooltip effect="dark" :content="play ? '正在播放' : '停止'">
              <i :class="play ? 'el-icon-video-pause' : 'el-icon-video-play'" @click="togglePlay"></i>
            </el-tooltip>
           <el-tooltip effect="dark" content="视频截图">
              <i class="el-icon-camera" @click="isCapturePicture"></i>
           </el-tooltip>
           <el-tooltip effect="dark" :content="enableZ ? '电子放大-已开启' : '电子放大-已关闭'">
              <i :class="enableZ ? 'el-icon-zoom-out' : 'el-icon-zoom-in'" @click="toggleZoom"></i>
           </el-tooltip>
         </div>
         <div class="right">
           <el-tooltip effect="dark" content="全屏">
            <i class="el-icon-full-screen" @click="isFullScreen"></i>
           </el-tooltip>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
export default {
  name: "EZUIKitJs",
  data(){
    return {
      player: null,
      enableZ:false, //默认关闭电子放大
      play: false //默认停止播放
    }
  },
  mounted(){
    console.group("mounted 组件挂载完毕状态===============》");
    this.player =  new EZUIKit.EZUIKitPlayer({
      autoplay: false,
      id: "video-container",
      accessToken:"xxx",
      url: "xxx",
      template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
      width: 600,
      height: 500
    });
  },
  beforeDestroy(){
    if(this.play)this.player.stop();
  },
  methods:{
    // 开启/关闭 电子放大
    toggleZoom(){
      if(!this.player || !this.play) return;
      switch (this.enableZ) {
        case true:
          this.player.closeZoom();
          this.enableZ = false;
          break;
        case false:
          this.player.enableZoom();
          this.enableZ = true;
          break;  
        default:
          break;
      }
    },
    // 播放/停止 监控
    togglePlay(){
      if(!this.player) return;
      switch (this.play) {
        case true:
          this.player.stop();
          this.play = false;
          break;
        case false:
          this.player.play();
          this.play = true;
          break;  
        default:
          break;
      }
    },
    // 视频截图
    isCapturePicture(){
      if(!this.player || !this.play) return;
      this.player.capturePicture();
    },
    // 全屏
    isFullScreen(){
      if(!this.player || !this.play) return;
      this.player.fullScreen();
    }
  }
};
</script>
<style lang="scss" scoped>
#video-container{
  position: relative;
}
::v-deep #video-container iframe{
  width: 100% !important;
}
.mask{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:500px;
  background: rgba(255, 255, 255, .6) url('../../assets/images/play.png') no-repeat center;
  background-size: 100px;
}
.controll{
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: rgba(0, 0, 0, 0.65);
  padding: 0 15px;
  z-index: 2;
  opacity:0;
  transition: all 0.3s;
  .left{
    width: 50%;
    i{
      margin-right: 10px;
    }
  }
  .right{
    width: 50%;
    text-align: right;
  }
  i{
    vertical-align: middle;
    color: #fff;
    font-size: 30px;
  }
}


#video-container:hover .controll{
  opacity: 0.65;
}
</style>

效果：

初始化参数

参数名	类型	描述	是否必选
id	String	播放器容器DOM的id	Y
accessToken	String	授权过程获取的access_token	Y
url	String	视频ezopen协议播放地址	Y
audio	int	是否默认开启声音 1：打开（默认） 0：关闭	N
width	int	视频宽度，默认值为容器容器DOM宽度	N
height	int	视频高度，默认值为容器容器DOM高度	N
templete	string	播放器模板，可以通过选定模板，使用内置的播放器样式，组件 simple：极简版;standard：标准版;security：安防版(预览回放);vioce：语音版	N
header	Array	视频头部可选UI组件，可选值：capturePicture：截图,save：录像保存,zoom：电子放大	N
footer	Array	视频底部部可选UI组件，可选值：talk：对讲,broadcast：语音播报,hd：高清标清切换,fullScreen：全屏	N
plugin	Array	按需加载插件，可选值： talk：对讲	N
handleSuccess	function	播放成功回调	N
handleError	function	播放错误回调	N
openSoundCallBack	function	开启声音回调	N
closeSoundCallBack	function	关闭回调	N
startSaveCallBack	function	开始录像回调	N
stopSaveCallBack	function	结束录像回调	N
capturePictureCallBack	function	截图回调	N
fullScreenCallBack	function	全屏回调	N
fullScreenChangeCallBack	function	全屏变化回调-全局（含ESC退出全屏等）	N
getOSDTimeCallBack	function	获取OSD时间回调

API方法集合

方法名	类型	描述	使用示例
stop	function	结束播放	`player.stop()`
openSound	String	开启声音	`player.openSound()`
closeSound	String	关闭声音	`player.closeSound()`
startSave	int	开始录像	`player.startSave()`
stopSave	int	结束录像	`player.stopSave()`
capturePicture	function	视频截图	`player.capturePicture()`
fullScreen	function	全屏（自动适配移动端pc端全屏）	`player.fullScreen()`
cancelFullScreen	function	取消全屏	`player.cancelFullScreen()`
getOSDTime	function	获取播放时间回调	`player.getOSDTime()`
startTalk	function	开始对讲	`player.startTalk()`
stopTalk	function	结束对讲	`player.stopTalk()`

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

谭CV

@THcoding_Cat

已为社区贡献7条内容