当前位置：首页 > VUE

vue3实现直播

2026-01-23 09:02:22VUE

vue3实现直播的基本方法

使用Vue3实现直播功能可以通过多种技术方案完成，常见的有基于WebRTC、HLS或RTMP协议的方式。以下是几种可行的实现方案：

基于WebRTC的实现 WebRTC适合低延迟的实时直播场景。需要搭建信令服务器和STUN/TURN服务器。安装peerjs或simple-peer库处理WebRTC连接。

基于HLS的实现 HLS适合高兼容性但延迟稍高的场景。使用hls.js库可以轻松实现。视频源需要先转码为HLS格式（m3u8+ts片段）。

基于FLV的实现 FLV协议延迟较低，使用flv.js库可以实现网页播放。需要服务端支持RTMP转FLV流。

具体实现代码示例

HLS方案实现 安装依赖：

npm install hls.js

组件代码：

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

<script setup>
import { ref, onMounted } from 'vue'
import Hls from 'hls.js'

const videoPlayer = ref(null)

onMounted(() => {
  const video = videoPlayer.value
  const hls = new Hls()

  if (Hls.isSupported()) {
    hls.loadSource('http://example.com/live/stream.m3u8')
    hls.attachMedia(video)
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play()
    })
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'http://example.com/live/stream.m3u8'
    video.addEventListener('loadedmetadata', () => {
      video.play()
    })
  }
})
</script>

WebRTC方案实现 安装依赖：

npm install peerjs

组件代码：

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

<script setup>
import { ref, onMounted } from 'vue'
import Peer from 'peerjs'

const localVideo = ref(null)
const remoteVideo = ref(null)

onMounted(async () => {
  const peer = new Peer()
  const localStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true})

  localVideo.value.srcObject = localStream

  peer.on('call', call => {
    call.answer(localStream)
    call.on('stream', remoteStream => {
      remoteVideo.value.srcObject = remoteStream
    })
  })
})
</script>