1、在public文件夹下index.html中引入 jsmpeg.min.js

<script type="text/javascript" src="./jsmpeg.min.js"></script>

2、修改源码去除一直重连部分

  WSSource.prototype.onClose = function () {
    this.socket.close()
    // if (this.shouldAttemptReconnect) {
    //   clearTimeout(this.reconnectTimeoutId);
    //   this.reconnectTimeoutId = setTimeout(function () {
    //     this.start()
    //   }.bind(this), this.reconnectInterval * 1e3)
    // }
  };

3、新建组件

<template>
  <div class="videos_wrapper">
    <div class="video_wrapper" :id='"video_wrapper"+item.code' v-for="item in videos" :key="item.id">
      <ScreenFull :target='"video_wrapper"+item.code'></ScreenFull>
      <canvas :id='"video"+item.code' style="width:100%;height:100%"></canvas>

    </div>
    <!-- <canvas id='video' style="width:0;height:0"></canvas> -->
  </div>
</template>

<script>
// import Video from './Video.vue'
import ScreenFull from '../ScreenFull.vue'

export default {
  components: {
    // Video,
    ScreenFull
  },
  props: {
    videos: {
      type: Array,
      default: ()=>[]
    },
  },
  data () {
    return {
      player:[],
    }
  },
  watch: {

  },
  mounted () {

    this.init()
  },
  methods: {
    init(){

      this.videos.forEach((element,index) => {

           let canvas = document.getElementById(`video${element.code}`);
          this.player[index] = new JSMpeg.Player(`${process.env.VUE_APP_VIDEO_RUL}/${element.code}`, {canvas: canvas,
          onPlay: function() {
            //开始播放事件回调
            console.log('play')
            //videoPlay(this.url)
          },})
      });


    }
  },
  destroyed(){
      //this.player=[]
  }
};
</script>

<style lang="scss" scoped>
.videos_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .video_wrapper {
    width: 2.75rem;
    height: 1.4rem;
    position: relative;
    color: #fff;
  }
}
</style>

4、组件使用：

 <div class="item_content">
          <LeftTopVideos
            v-if="leftTopData[0]&&leftTopData[0].children.length>0"
            :videos="leftTopData[0].children"
          ></LeftTopVideos>
          <el-empty v-else :image="emptyImg" description="暂无数据"></el-empty>
        </div>
    <canvas id="video" style="width:0;height:0"></canvas>

import LeftTopVideos from "@/components/operateCenter/LeftTopVideos";
 components: {
        LeftTopVideos,
},    
data(){
   return {
 initPlayer: null,//初始化播放器
    }
},
created() {
   
    let canvas1 = document.getElementById(`video`);
    this.initPlayer = new JSMpeg.Player(`${process.env.VUE_APP_VIDEO_RUL}/b3_102`, {
      canvas: canvas1
    });
  },

5、全屏组件

<template>
    <i class="font" :class="isFullscreen?'font-tuichuquanping':'font-shipinquanping'" @click="click" ></i>
</template>

<script>
import screenfull from 'screenfull'

export default {
  name: 'Screenfull',
  data() {
    return {
      isFullscreen: false
    }
  },
   props:{
    target:''
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    click() {
      console.log(this.target,'444444')
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
       if(this.target){
        const element = document.getElementById(this.target)//指定全屏区域元素
        screenfull.toggle(element);
        return
      }
      screenfull.toggle()
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen
      this.$forceUpdate();
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)

      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    }
  }
}
</script>

<style scoped>
.font {
 position: absolute;
 right:0;
 top: 0;
 color: #fff;
 font-size: .25rem;
}
</style>

2、后期优化（将所有摄像头都请求回来，通过馆帅选）

父组件

 <LeftTopVideos
            v-if="leftTopData&&leftTopData.length>0&&selectedVideos.length>0"
            :videos="leftTopData"
          ></LeftTopVideos>
          <el-empty v-if='selectedVideos.length==0' :image="emptyImg" description="暂无监控"></el-empty>

data 

selectedVideos:[],
selectBtn: this.$store.state.selectBtn, //默认1馆

 //获取左侧头部监控所有数据
    async getLeftTopData() {
     this.leftTopData = [];
      let res = await fetchLeftTopData();
      this.leftTopData = res.list
      this.selectedVideos=res.list.filter(item=>item.name==this.selectBtn);
    },
//选择馆
    changeHall(num) {
      if(this.selectBtn==`b${num + 1}`){

      }else{
        //  this.leftTopData=[]
         this.selectBtn = `b${num + 1}`;
         this.$store.commit('setSelectedBtn',this.selectBtn)
         this.getLeftTopData();
        this.init();
         //获取标记点

      this.$refs.viewer.changeImg(num);
      }


    },

子组件

<template>
  <div class="videos_wrapper">
    <div class="video_wrapper" :id='"video_wrapper"+item.code' v-for="item in videos" :key="item.id"  v-if='item.name==$store.state.selectBtn'>
      <ScreenFull :target='"video_wrapper"+item.code'></ScreenFull>
      <canvas :id='"video"+item.code' style="width:100%;height:100%" ></canvas>
    </div>
    <!-- <el-empty v-else :image="emptyImg" description="暂无数据"></el-empty> -->
    <!-- <canvas id='video' style="width:0;height:0"></canvas> -->
  </div>
</template>

<script>
// import Video from './Video.vue'
import ScreenFull from '../ScreenFull.vue'

export default {
  components: {
    // Video,
    ScreenFull
  },
  props: {
    videos: {
      type: Array,
      default: ()=>[]
    },

  },
  data () {
    return {
      player:[],
      emptyImg: require("@/assets/imgs/empty.png"),//空图
    }
  },
  watch: {
    videos (newValue, oldValue) {
       this.player=[]
    }
  },
  mounted () {

    this.init()
  },
  methods: {
    init(){
        console.log('resssss',this.$store.state.selectBtn,this.videos);
      this.videos.forEach((element,index) => {

           let canvas = document.getElementById(`video${element.code}`);
          this.player[index] = new JSMpeg.Player(`${process.env.VUE_APP_VIDEO_RUL}/${element.code}`, {canvas: canvas,
          onPlay: function() {
            //开始播放事件回调
            console.log('play')
            //videoPlay(this.url)
          },})
      });


    }
  },
  destroyed(){
      //this.player=[]
  }
};
</script>

<style lang="scss" scoped>
.videos_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .video_wrapper {
    width: 2.75rem;
    height: 1.4rem;
    position: relative;
    color: #fff;
    margin: .0625rem 0;
  }
}
</style>

store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    selectBtn:'b1'
  },
  mutations: {
    setSelectedBtn(state,val){
      state.selectBtn=val
    }
  },
  actions: {
  },
  modules: {
  }
})