海康摄像头视频播放控件

1.引入海康插件

  

2.海康视频插件初始化和播放

        注意：①初始化的时候，szBasePath是插件内部引入其他文件是的绝对路径，如果页面中有几个js文件没有正常加载，请求不同，这个时候，看看szBasePath的路径

                  ②视频插件的播放JS_Play(url,config,windowIndex)中的windowIndex如果是多个插件实例来播放，那么这个值一直都是零

3.海康插件官网地址下载

海康开放平台

<template>
  <div class="container">
    <el-card style="width: 24%; height: 880px">
      <el-tree
        ref="treeRef"
        lazy
        :data="treeList"
        node-key="id"
        :current-node-key="currentNodeKey"
        :highlight-current="true"
        :load="loadNode"
        :props="props"
      />
    </el-card>
    <div class="main">
      <div class="outDiv" v-for="(item,index) in deviceData" :key="index"  style="width:31%;height:300px;margin-right:10px;">
          <div :id="videoBox[index]" style="height:85%;border:10px solid #ddd;" @click="videoBoxClick(index)"></div>
          <div style="height:10%;display:flex;justify-content:space-between;align-item:center;border:1px solid #ddd">
            <span style="line-height:30px">名称：省公司大门</span>
            <div style="line-height:30px;dispaly:flex;">
               <span style="width:10px;height:10px;border-radius:10px;background-color:#6d7;display:inline-block"></span>
              在线</div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      props:{
        label:'name',
        children:'children'
      },
      isFirst:true,
      treeList:[],
      cameraData: [],
      currentNodeKey: '',
      deviceCode: '',
      videoUrl: null,
      // 播放器对象
      player: null,
      deviceUrl:[],
      deviceData:[],    //播放设备数据
      
      videoWs:[],    //视频流地址
      videoBox:[],   //播放视频的div
      videoBoxPlayer:[],   //视频播放器
      promiseArr:[],
    }
  },
  mounted() {
    this.getTreeList()
    this.getDevice()
  },
  methods: {
    loadNode(node,resolve){
      if(!this.isFirst){
        this.$postRequest(`${this.$urls.zhhqUrls.getSubOrgList}`+ '/' + node.key,{})
        .then(res=>{
          if(res.data.code == 200){
            resolve(res.data.data)
          }
        })
      }
       console.log(node,'node')
    },
    getTreeList(){
      this.isFirst = false
      this.$postRequest(`${this.$urls.zhhqUrls.getOrgList}`, {})
      .then(res=>{
         if(res.data.code == 200){
           this.treeList = res.data.data.map(item=>{
             return {
               ...item,

             }
           })
         }
      })
    },
    // 获取所有的播放设备
   getDevice(){
     this.$getRequest(`${this.$urls.zhhqUrls.aqPannelDevice}`,{})
     .then(res=>{
       if(res.data.code == 200){
         this.deviceData = res.data.data
         this.getDeviceUrl()
       }else{
         this.$message.error(res.data.msg)
       }
     })
   },

  //  获取所有的播放设备URL
   getDeviceUrl(){
     if(this.deviceData.length > 0){
       this.deviceData.forEach((item,index)=>{
        this.promiseArr[index] =  this.$postRequest(`${this.$urls.zhhqUrls.aqPannelDeviceUrl}`,item)
         .then(res=>{
           if(res.data.code == 200){
             this.videoWs.push(res.data.data.responseBody.url)
           }else{
             this.$message.error(res.data.msg)
           }
         })
     })
     Promise.all(this.promiseArr).then(res=>{
       this.palyVideo()
     })
      
     } 
   },
   palyVideo(){
     this.videoWs.forEach((item,index)=>{
        this.videoBox.push('videoBox' + index)
     })
      this.$nextTick(()=>{
          this.deviceData.forEach((item,index)=>{
               this.initPlayer(index)
          })

          // this.videoBoxPlayer.forEach((item,index)=>{
          //    this.playH5(item,this.videoWs[index])

          // })
        })
   },
   videoBoxClick(index){
     this.playH5(this.videoBoxPlayer[index],this.videoWs[index],index)
      
   },

    /**
     * 初始化播放器
     */
    initPlayer(index) {
      var self = this
      self.videoBoxPlayer[index] = new window.JSPlugin({
        // 需要英文字母开头 必填
        szId: self.videoBox[index],
        // 必填,引用H5player.min.js的js相对路径
        szBasePath: '/h5player',
        // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
        iWidth: 800,
        iHeight: 600,
        // 分屏播放，默认最大分屏4*4
        iMaxSplit: 16,
        iCurrentSplit: 1,
        // 样式
        oStyle: {
          border: '#343434',
          borderSelect: '#FFCC00',
          background: '#000'
        }
      })
    },

    /**
     * 播放
     */
    playH5(player,preUrl, index) {
      const _this = this

      const param = {
        playURL: preUrl,
        // 1：高级模式  0：普通模式，高级模式支持所有
        mode: 1
      }
      // 索引默认0
      if (!index) {
        index = 0
      }
      player.JS_Play(preUrl, param, index).then(() => {
        // 播放成功回调
        console.log('播放成功')
      },
      (err) => {
        console.log('播放失败{}', err)
      })
    },
    /**
     * 停止
     */
    h5PlayStop() {
      const _this = this
      _this.player.JS_Stop()
    },
    /** 视频控制 */
    // camera_change(command) {
    //   this.copntrolParams.command = command
    //   this.copntrolParams.presetIndex = null
    //   cameraControl(this.copntrolParams).then(response => {

    //   })
    // },
    /** 跳到预置点 */
    // camera_presetPoint(presetIndex) {
    //   this.copntrolParams.command = 'GOTO_PRESET'
    //   this.copntrolParams.presetIndex = presetIndex
    //   cameraControl(this.copntrolParams).then(response => {

    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  display: flex;
}
.main {
  width:75%;
  height: 700px;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  .outDiv{
     position: relative;
      .innerDiv{
        background-color: blue;
        height: 10px;
        position: absolute;
        top: -10px;
      }
  }
}
</style>