video.vue

<template>
  <div class="videoBox">
    <div >
      <el-button v-show="platform" style="margin-right: 15px;" id="capture" class="el-button manage-add-btn el-button--primary"
        @click="capture">{{$t('button.cutpic')}}</el-button>
    </div>
    <!-- <div id="imgOut" v-if="isCapture" v-loading="loading" :style="{height:'450px'}" style="width:100%">
      <canvasDialog ref='canvasModel' @getBase64Str='getBase64Str' @getIsRemote='getIsRemote'></canvasDialog>
    </div> -->
    <div>
      <div v-show="platform==1" class="video-box" :style="{height:'450px'}" v-loading="loading">
        <canvas id="canvasVideo" style="background: black;width:100%;height:100%"></canvas>
      </div>
      <div v-show="platform==2" style="height:'450px'" v-loading="loading">
        <div id="my-video" style="background: black;width:100%;height:100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
  // import canvasDialog from '../components/drawCanvas.vue'
  import EZUIKit from 'ezuikit-js'
  import SLPlayer from '../../../../static/js/slplayer'
  export default {
    components:{
      // canvasDialog
    },
    data() {
      return {
        loading: false,
        platform: 2,
        isIcon: false,
        palyUrl: '',
        player:'',
        playerIndex:0,
        playerM3u8:'',
        playerM3u8Index:0,
        captureCanvas:'',
        isCapture:false,
        playerEz:'',
        fileBase64:'',
        base64Str:'',
        channelId:''
      }
    },
    destroyed() {
    	if(this.player){
        this.player.stop()
      }
      if(this.playerEz){
        let canvasVideo = document.getElementById('my-video')
        canvasVideo.innerHTML = ''
      }
    },
    methods: {
      getBase64Str(val){
        this.loading = false;
        this.fileBase64 = val.toDataURL('image/jpeg')
        this.base64Str = this.dataURLtoFile(val.toDataURL('image/jpeg'),new Date().getTime(),'image/jpeg')
        let time = new Date().getTime()
        this.$parent.fileBase64=this.fileBase64
        this.$parent.imgList.push({
          id:time,
          val:this.base64Str
        })
      },
      getIsRemote(val){
        //关闭截图的标签
        if(val){
          this.isCapture = false;
        }
      },
      initDialog(record) {
        this.isCapture = false;
        this.platform = 2;
        let parmas = {
          id: record.gateId,
          protocol:1
        }
        this.$api.videoShopTourReport.getLiveInfo(parmas).then(data => {
          let result = data.data;
          if (result.code == 200) {
            this.platform = result.data.platform;
            this.palyUrl = result.data.liveAddress;
            this.channelId = result.data.channelId
            this.playerVideo(result.data.accessToken)
          }else{
            this.$message.error(this.$t('message.videoFailed'))
          }
        })
      },
      playerVideo(atoken) {
        this.$nextTick(() => {
          // 拾联视频
          if (this.platform == 1) {
            if(this.playerEz){
              let canvasVideo = document.getElementById('my-video')
              canvasVideo.innerHTML = ''
            }
            if (this.playerIndex > 0) {
              // 暂停上次播放并重新开始新的视频
              this.player.stop();
              setTimeout(() => {
                this.player.start(this.palyUrl)
              }, 100)
            } else {
              this.createPlayer(this.palyUrl);
            }
          } else {
            // 萤石云视频
            // 清除拾联视频
            if (this.player) {
              this.player.stop();
            }
            // 开始萤石云视频
            if(this.playerEz){
              let canvasVideo = document.getElementById('my-video')
              canvasVideo.innerHTML = ''
            }
            // 开始萤石云视频
            this.playerEz = new EZUIKit.EZUIKitPlayer({
              id: "my-video", // 视频容器ID
              accessToken: atoken,
              url: this.palyUrl,
              template: 'theme',//simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
              autoplay: true,
              footer: ['hd','fullScreen'],
              width: 700,
              height:450,
            });
          }
        })
      },
      createPlayer(row) {
          this.playerIndex ++ ;
          let that = this;
           that.Module = {
           	/* ************************************ */
           	// 定义视频画布
           	canvas: document.getElementById("canvasVideo"),
           	/* ************************************ */
           	// 设置相应的事件回调
           	onStart: function () {
           		console.log("onStart...")
           	},
           	onEnd: function () {
           		console.log("onEnd...")
           	},
           	onError: function (code, err) {
           		alert('error: ', code, err)
           		console.log('error: ', code, err);
           	},
           	onVideoStart: function () {
           		console.log('onVideoStart。。。');
           	},
           	// 录像回放中返回时间刻度
           	onPlayTime: function (ts) {
           		if(ts==0) return;
           		var date = new Date(ts * 1000);//如果date为10位不需要乘1000
           		var Y = date.getFullYear() + '-';
           		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
           		var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
           		var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
           		var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
           		var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
           		var timestamp = Y + M + D + h + m + s;
           	}
           }
           SLPlayer(that.Module).then(function (obj) {
             that.loading = false
             that.player = obj;
             setTimeout(()=>{
               that.player.start(row)
             },1000)
          });

      },
      closeCapture() {
        this.isIcon = false;
        let imgHtml = document.getElementById("imgOut")
        imgHtml.innerHTML = ''
      },
      capture() {
        this.$emit('directCapture','')
        // this.isCapture = true;
        // this.loading = true;
        // this.$api.videoShopTourReport.getCapture({id:this.channelId}).then(data => {
        //   let result = data.data;
        //   this.loading = false;
        //   this.$refs.canvasModel.createCanvas(result.data,710,450,'remote','isDeal')
        // })
      },
      dataURLtoFile(dataurl,filename,filetype){
          var arr = dataurl.split(","),
          bstr =atob(arr[1]),
          n = bstr.length,
          u8arr =new Uint8Array(n);
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
          }
          return new File([u8arr], filename, {
              type: filetype
          });
      },
      confirmCapture() {
        let time = new Date().getTime()
        this.$parent.fileBase64=this.fileBase64
        this.$parent.imgList.push({
          id:time,
          val:this.base64Str
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .videoBox{
    position: relative;
  }
  #imgOut{
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999;
  }
  /deep/.el-loading-mask{
    z-index: 99999;
  }
</style>