tnbapp/src/components/LivePlayer.vue

<template>
  <div id="dplayer" ref="dplayer" style="height: 480px;" />
</template>

<script>
import flvjs from 'flv.js'
import DPlayer from 'dplayer'
import { getCamPullUrl } from '@/api/cam'

export default {
  name: 'LivePlayer',
  props: {
    videoProp: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      flvjs,
      DPlayer,
      getUrl: true
    }
  },
  created() {
  },
  mounted() {
    const camId = this.videoProp.videoId
    this.getPullUrl(camId)
  },
  methods: {
    getPullUrl(camId) {
      getCamPullUrl(camId).then(resp => {
        if (resp.code === 0) {
          this.initFlvPlayer(resp.data)
        } else {
          this.$notify.error({
            message: '获取摄像头拉流地址失败',
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify.error({
          message: error.message,
          type: 'warning',
          duration: 3000
        })
      })
    },
    initFlvPlayer(videoUrl) {
      new DPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        video: {
          url: videoUrl,
          type: 'customFlv',
          customType: {
            customFlv: function(video, player) {
              const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: video.src
              })
              flvPlayer.attachMediaElement(video)
              flvPlayer.load()
            }
          }
        }
      })
    }
  }
}
</script>

<style>
</style>