当前位置：首页 > VUE

vue实现直播

2026-02-09 09:04:13VUE

Vue实现直播的基本方法

使用Vue实现直播功能通常需要结合WebRTC、RTMP或HLS等技术。以下是几种常见实现方式：

基于WebRTC的实现

WebRTC适合实时性要求高的场景，如视频会议：

vue实现直播

// 安装依赖
npm install webrtc-adapter simple-peer

// 组件示例
<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <video ref="remoteVideo" autoplay></video>
  </div>
</template>

<script>
import Peer from 'simple-peer'

export default {
  mounted() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        this.$refs.localVideo.srcObject = stream
        const peer = new Peer({ initiator: true, stream })

        peer.on('signal', data => {
          // 发送信令数据到服务器
        })

        peer.on('stream', stream => {
          this.$refs.remoteVideo.srcObject = stream
        })
      })
  }
}
</script>

基于RTMP的实现

RTMP适合大规模直播场景，需要搭配媒体服务器：

// 使用flv.js播放RTMP流
npm install flv.js

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

<script>
import flvjs from 'flv.js'

export default {
  mounted() {
    if (flvjs.isSupported()) {
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'rtmp://your-server/live/stream'
      })
      flvPlayer.attachMediaElement(this.$refs.videoElement)
      flvPlayer.load()
      flvPlayer.play()
    }
  }
}
</script>

基于HLS的实现

HLS适合跨平台兼容性要求高的场景：

vue实现直播

// 使用hls.js播放HLS流
npm install hls.js

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

<script>
import Hls from 'hls.js'

export default {
  mounted() {
    const hls = new Hls()
    hls.loadSource('https://your-server/live/stream.m3u8')
    hls.attachMedia(this.$refs.videoElement)
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      this.$refs.videoElement.play()
    })
  }
}
</script>

直播推流实现

使用OBS或ffmpeg推流到媒体服务器：

// 前端采集视频并推流
<template>
  <video ref="preview" autoplay muted></video>
  <button @click="startStreaming">开始直播</button>
</template>

<script>
export default {
  methods: {
    async startStreaming() {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      })
      this.$refs.preview.srcObject = stream

      // 使用WebSocket或RTMP推流到服务器
      const mediaRecorder = new MediaRecorder(stream)
      mediaRecorder.ondataavailable = e => {
        // 发送数据块到服务器
      }
      mediaRecorder.start(1000)
    }
  }
}
</script>

直播常见功能扩展

实现弹幕功能：

<template>
  <div class="danmu-container">
    <video src="stream.mp4" controls></video>
    <div class="danmu-display" ref="danmu"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      danmuSocket: null
    }
  },
  mounted() {
    this.danmuSocket = new WebSocket('wss://your-server/danmu')
    this.danmuSocket.onmessage = e => {
      const danmu = document.createElement('div')
      danmu.textContent = e.data
      this.$refs.danmu.appendChild(danmu)
      // 添加动画效果
    }
  }
}
</script>