当前位置：首页 > VUE

vue实现视频直播

2026-03-09 13:07:51VUE

Vue实现视频直播的方法

使用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'

模板部分：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
  <source src="your-stream-url.m3u8" type="application/x-mpegURL">
</video>

初始化播放器：

mounted() {
  this.player = videojs('my-video')
}

使用flv.js实现FLV直播流

安装flv.js：

npm install flv.js

组件实现：

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

<script>
import flvjs from 'flv.js'

export default {
  data() {
    return {
      player: null
    }
  },
  mounted() {
    if (flvjs.isSupported()) {
      this.player = flvjs.createPlayer({
        type: 'flv',
        url: 'your-stream-url.flv'
      })
      this.player.attachMediaElement(this.$refs.videoElement)
      this.player.load()
      this.player.play()
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy()
    }
  }
}
</script>

使用hls.js实现HLS直播

安装hls.js：

npm install hls.js

组件实现：

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

<script>
import Hls from 'hls.js'

export default {
  mounted() {
    const videoSrc = 'your-stream-url.m3u8'
    const video = this.$refs.videoElement

    if (Hls.isSupported()) {
      const hls = new Hls()
      hls.loadSource(videoSrc)
      hls.attachMedia(video)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play()
      })
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc
      video.addEventListener('loadedmetadata', () => {
        video.play()
      })
    }
  }
}
</script>

使用WebRTC实现实时直播

安装peerjs：

npm install peerjs

简单实现示例：

// 接收端代码
const peer = new Peer()
const conn = peer.connect('broadcaster-id')
const video = document.getElementById('video')

conn.on('stream', (stream) => {
  video.srcObject = stream
})