yxk-storeroom-system/src/views/storeManage/warehouse3D/module/video.vue

<template>
  <el-dialog :close-on-click-modal="false" :visible="openVideoVisible" :before-close="handleClose" :title="videoTitle">
    <span class="dialog-right-top" />
    <span class="dialog-left-bottom" />
    <div class="setting-dialog">
      <!-- :src="videoSrc" controls-->
      <canvas id="canvas" width="100%" />
    </div>
  </el-dialog>
</template>

<script>
import JSMpeg from '@/views/components/jsmpeg'
export default {
  data() {
    return {
      openVideoVisible: false,
      videoTitle: '',
      camConfig: null,
      myVideo: null
    }
  },
  methods: {
    handleClose(done) {
      this.openVideoVisible = false
      // this.myVideo = document.getElementById('canvas')
      // this.myVideo.pause()
      done()
    },
    play() {
      // const rtspUrl = 'rtsp://' + this.camConfig.deviceInfo.deviceAccount + ':' + this.camConfig.deviceInfo.devicePassword + '@' + this.camConfig.deviceInfo.deviceIp + ':' + this.camConfig.deviceInfo.devicePort + '/' + this.camConfig.deviceInfo.videoRoute + '/1'
      // const data = { rtspUrl: rtspUrl, size: '1024*768' }
      const url = 'ws://127.0.0.1:3539'
      var canvas = document.getElementById('canvas')
      const opt = {
        canvas: canvas,
        poster: '0.jpg'
      }
      const player = new JSMpeg.Player(url, opt)
      console.log(player)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>