nxdt-web/src/components/JessibucaH265/index.vue

<template>
  <div class="jessibuca">
    <div id="container" ref="containerPlayer" @dblclick="toggleFullScreen"></div>
  </div>
</template>

<script>
import { getVideoList } from '@/api/screen/screen'
import { getQxToken } from '@/api/video/camera'
import { selectVideoLoginInfo } from '@/api/screen/screen'
export default {
  data() {
    return {
      jessibuca: null,
      playUrl: '',
      qxToken: null,
      qxInfo: null,
      fixedData: [],
    }
  },

  // 接收父组件传递的设备信息
  props: {
    playerInfo: {
      type: Object,
      default: () => null,
    },
  },
  // 监听设备信息
  watch: {
    playerInfo: {
      handler(newValue) {
        if (newValue) {
          // 1. 监听到数据后 调token 和 ip 的接口
          Promise.all([this.getQxToken(), this.selectVideoLoginInfo()]).then(() => {
            //  2. Promise.all 等待两个异步请求结束后 再组装url
            const { puid, ballIndex } = newValue
            this.playUrl =
              this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
            console.log('this.playUrl', this.playUrl)
            this.playvideo()
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 父组件要求播放视频
    childPlayVideo(e) {
      if (this.qxToken && this.qxInfo) {
        const { puid, ballIndex } = e
        this.playUrl =
          this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
        if (this.jessibuca) {
          // await this.jessibuca.destroy()
          this.playvideo()
        } else {
          this.createJessibuca()
          this.playvideo()
        }
      } else {
        Promise.all([this.getQxToken(), this.selectVideoLoginInfo()]).then(async () => {
          //  2. Promise.all 等待两个异步请求结束后 再组装url
          const { puid, ballIndex } = e
          this.playUrl =
            this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
        })

        if (this.jessibuca) {
          // await this.jessibuca.destroy()
          this.playvideo()
        } else {
          this.createJessibuca()
          this.playvideo()
        }
      }
    },

    // 父组件要求关闭
    childClosedVideo() {
      this.stopvideo()
    },
    createJessibuca() {
      this.jessibuca = new window.Jessibuca({
        container: this.$refs.containerPlayer,
        videoBuffer: 0.2, // 缓存时长
        isResize: false,
        text: '',
        debug: false,
        showBandwidth: true, // 显示网速
        operateBtns: {
          fullscreen: true,
          screenshot: true,
          play: true,
          audio: true,
        },
        forceNoOffscreen: true,
        isNotMute: true,
      })
      this.jessibuca.on('load', function () {
        console.log('on load')
      })
      this.jessibuca.on('play', function () {
        console.log('on play')
      })
      this.jessibuca.on('audioInfo', function (msg) {
        //  console.log('audioInfo', msg)
      })

      this.jessibuca.on('videoInfo', function (info) {
        // console.log('videoInfo', info)
      })

      this.jessibuca.on('error', function (error) {
        console.log('error', error)
      })

      this.jessibuca.on('start', function () {
        console.log('start')
      })

      this.jessibuca.on('stats', function (stats) {
        //  console.log('stats', stats)
      })
    },
    playvideo() {
      if (this.playUrl) {
        console.log('播放--')
        this.jessibuca.play(this.playUrl)
      }
    },
    async stopvideo() {
      if (this.jessibuca) {
        await this.jessibuca.destroy()
        this.jessibuca = null
      }
    },

    async getQxToken() {
      const res = await getQxToken()

      console.log('res播放视频的token', res)
      this.qxToken = res.msg
    },
    async selectVideoLoginInfo() {
      const res = await selectVideoLoginInfo()
      this.qxInfo = res.data
    },

    async getDeviceList() {
      const res = await getVideoList({
        deviceType: '固定摄像头',
      })
      this.fixedData = res.data
    },
    //双击全屏
    toggleFullScreen() {
      const containerPlayer = this.$refs.containerPlayer
      if (document.fullscreenElement) {
        // 如果已经是全屏，则退出全屏
        document.exitFullscreen()
      } else {
        // 进入全屏
        containerPlayer.requestFullscreen()
      }
    },
  },

  mounted() {
    this.createJessibuca()
  },
  beforeDestroy() {
    if (this.jessibuca) {
      this.jessibuca.destroy()
      this.jessibuca = null
    }
  },
}
</script>

<style lang="scss" scoped>
.jessibuca {
  height: 100%;
  & > #container {
    width: 100%;
    height: 100%;
    object-fit: fill;
    background-color: black;
  }
}
</style>