当前位置：首页 > VUE

vue实现视频直播

2026-01-17 07:56:47VUE

Vue 实现视频直播的方法

使用 video.js 和 HLS 协议

安装 video.js 和 videojs-contrib-hls 插件：

npm install video.js videojs-contrib-hls

在 Vue 组件中引入并初始化：

import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'

export default {
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      controls: true,
      autoplay: true,
      sources: [{
        src: 'http://example.com/live/stream.m3u8',
        type: 'application/x-mpegURL'
      }]
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}

模板部分：

<video ref="videoPlayer" class="video-js"></video>

使用 flv.js 实现 FLV 直播

安装 flv.js：

npm install flv.js

Vue 组件实现：

import flvjs from 'flv.js'

export default {
  data() {
    return {
      player: null
    }
  },
  mounted() {
    if (flvjs.isSupported()) {
      this.player = flvjs.createPlayer({
        type: 'flv',
        url: 'http://example.com/live/stream.flv'
      })
      this.player.attachMediaElement(this.$refs.videoPlayer)
      this.player.load()
      this.player.play()
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy()
    }
  }
}

模板部分：

<video ref="videoPlayer" controls autoplay></video>

使用 WebRTC 实现低延迟直播

安装 peerjs 库：

npm install peerjs

Vue 组件实现：

import Peer from 'peerjs'

export default {
  data() {
    return {
      peer: null,
      stream: null
    }
  },
  mounted() {
    this.peer = new Peer()
    this.peer.on('call', call => {
      call.answer()
      call.on('stream', stream => {
        this.$refs.videoPlayer.srcObject = stream
        this.stream = stream
      })
    })
  },
  beforeDestroy() {
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop())
    }
    if (this.peer) {
      this.peer.destroy()
    }
  }
}

模板部分：

<video ref="videoPlayer" autoplay playsinline></video>

使用第三方直播 SDK

以腾讯云直播 SDK 为例：

import TcPlayer from 'tcplayer.js'

export default {
  mounted() {
    new TcPlayer('player-container-id', {
      m3u8: 'http://example.com/live/stream.m3u8',
      autoplay: true,
      width: '100%',
      height: '500px'
    })
  }
}

模板部分：