当前位置：首页 > VUE

vue实现直播视频

2026-02-17 16:03:33VUE

Vue 实现直播视频的方法

使用 video.js 和 videojs-contrib-hls 插件

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

npm install video.js videojs-contrib-hls

在 Vue 组件中引入并使用：

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

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

export default {
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      autoplay: true,
      controls: true,
      sources: [{
        src: '你的直播流地址.m3u8',
        type: 'application/x-mpegURL'
      }]
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

使用 flv.js 实现 FLV 直播流

安装 flv.js：

npm install flv.js

Vue 组件实现：

<template>
  <div>
    <video ref="videoElement" controls autoplay></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  data() {
    return {
      flvPlayer: null
    }
  },
  mounted() {
    if (flvjs.isSupported()) {
      const videoElement = this.$refs.videoElement
      this.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: '你的直播流地址.flv'
      })
      this.flvPlayer.attachMediaElement(videoElement)
      this.flvPlayer.load()
      this.flvPlayer.play()
    }
  },
  beforeDestroy() {
    if (this.flvPlayer) {
      this.flvPlayer.destroy()
    }
  }
}
</script>

使用 WebRTC 实现实时直播

安装 peerjs：

npm install peerjs

Vue 组件示例：

<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <video ref="remoteVideo" autoplay></video>
  </div>
</template>

<script>
import Peer from 'peerjs'

export default {
  data() {
    return {
      peer: null,
      localStream: null
    }
  },
  mounted() {
    this.initWebRTC()
  },
  methods: {
    async initWebRTC() {
      try {
        this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        this.$refs.localVideo.srcObject = this.localStream

        this.peer = new Peer()
        this.peer.on('call', call => {
          call.answer(this.localStream)
          call.on('stream', remoteStream => {
            this.$refs.remoteVideo.srcObject = remoteStream
          })
        })
      } catch (err) {
        console.error('Failed to get local stream', err)
      }
    }
  },
  beforeDestroy() {
    if (this.localStream) {
      this.localStream.getTracks().forEach(track => track.stop())
    }
    if (this.peer) {
      this.peer.destroy()
    }
  }
}
</script>

使用第三方直播 SDK

以腾讯云直播 SDK 为例：

<template>
  <div>
    <div ref="playerContainer" id="player-container"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script')
    script.src = 'https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js'
    script.onload = () => {
      const player = new TcPlayer('player-container', {
        flv: '你的直播流地址.flv',
        autoplay: true,
        width: '100%',
        height: '500px'
      })
    }
    document.body.appendChild(script)
  }
}
</script>