海康对接摄像头

1.前端播放用ws 流，后台调用海康后台可以直接返回

2.前端参考vue项目中播放ws（Websocket协议）视频流_ws视频流如何播放-CSDN博客这个地址就行了

3.注意js引用是否正确

一定要是这个目录

4.引用js的地方

5.代码，工具类

复制代码

<template>
  <div id="player" style="width: 100%;height: 100%;"></div>
</template>

<script src="../../../../../public/js/h5player.min.js"></script>


<script>
export default {
  data() {
    return {
      player: null
    }
  },
  mounted() {
    // 例如一屏播放4个视频，写法如下
    this.initPlayer(2);
    let arr = ['ws://58.221.113.46:559/openUrl/CCuqAQ8','ws://58.221.113.46:559/openUrl/Gppck0w','ws://58.221.113.46:559/openUrl/pJXovNm','ws://58.221.113.46:559/openUrl/Kb4L9Nm'];
    arr.forEach((url, index) => {
      this.realplay(url, index);
    })
  },
  methods: {
    // 初始化
    initPlayer(num = 1) { // 设置分屏：1*1、2*2、3*3、4*4
      this.player = new JSPlugin({
        szId: 'player', // 父窗口id，需要英文字母开头 必填
        szBasePath: "js/", // 必填,与h5player.min.js的引用路径一致
        iMaxSplit: 4, // 分屏播放，默认最大分屏4*4
        openDebug: true,
        mseWorkerEnable: false,//是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
        bSupporDoubleClickFull: true,//是否支持双击全屏，true-双击是全屏；false-双击无响应
        oStyle: {
          borderSelect: '#343434', // 选中视频的边框颜色，默认选择第一个，颜色为#fc0
        }
      })
      this.player.JS_ArrangeWindow(num).then(
        () => { console.log(`arrangeWindow to ${num}x${num} success`) },
        e => { console.error(e) }
      )
      // 监听视频连接过程中出现的异常
      this.player.JS_SetWindowControlCallback({
        pluginErrorHandler(iWindIndex, iErrorCode, oError) {
          console.error(`监控窗口${iWindIndex}发生错误，错误码: ${iErrorCode}，${oError}`);
        }
      });
    },
    // 预览
    realplay (playURL = '', index = 0) { // 设置第index（从0开始）个窗口的视频地址
      this.player.JS_SetTraceId(index, true);
      this.player.JS_Play(playURL, { playURL, mode: 0, keepDecoder: 0, token: '' }, index).then(
        () => {
          console.log('realplay success');
          this.player.JS_GetTraceId(index).then((id) => { console.log("traceid:", id) })
        },
        e => { console.error(e) }
      )
    },
  }
}
</script>
<style scoped lang="less">
/* 由于我的视频没有撑满整个容器，所以加了下面的样式，如果没遇到这种情况可以忽略。*/
// 设置2*2分屏时
/deep/#player {
  & > div, & > div > div > video {
    width: 100% !important;
    height: 100% !important;
  }
  & > div > div {
    width: 50% !important;
    height: 50% !important;
  }
}
/*
// 设置1*1分屏时
/deep/#player {
    & > div,
    & > div > div,
    & > div > div > video {
        width: 100% !important;
        height: 100% !important;
    }
}
*/
</style>

6.引用的地方