当前位置：首页 > VUE

vue实现直播功能

2026-01-17 11:50:53VUE

使用 Vue 实现直播功能

方案一：基于 WebRTC 实现实时直播

技术栈选择

Vue 3 + WebRTC (RTCPeerConnection)
信令服务器（可选 Socket.io）
媒体服务器（如 Janus, Mediasoup）

核心实现步骤

安装必要依赖

npm install peerjs simple-peer socket.io-client

创建视频组件

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

<script>
import Peer from 'simple-peer'

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

    this.peer = new Peer({ initiator: true, stream })

    this.peer.on('signal', data => {
      // 通过信令服务器发送offer
      socket.emit('offer', data)
    })

    socket.on('answer', answer => {
      this.peer.signal(answer)
    })
  }
}
</script>

方案二：使用直播协议（HLS/RTMP）

技术架构

前端：Vue + video.js
推流端：OBS/FFmpeg
流媒体服务器：Nginx-rtmp-module/SRS

实现方法

安装 video.js

npm install video.js @videojs-player/vue

配置播放器组件

<template>
  <video-player 
    src="http://your-server/live/stream.m3u8"
    controls
    autoplay
  />
</template>

<script>
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'

export default {
  components: { VideoPlayer }
}
</script>

服务器配置示例（Nginx）

rtmp {
  server {
    listen 1935;
    application live {
      live on;
      hls on;
      hls_path /tmp/hls;
      hls_fragment 3s;
    }
  }
}

方案三：使用第三方SDK

推荐SDK

Agora Web SDK
Zego Express Web SDK
Tencent Cloud LVB

Agora示例实现

安装SDK

npm install agora-rtc-sdk

基础实现代码

<script>
import AgoraRTC from 'agora-rtc-sdk'

export default {
  data() {
    return {
      client: null,
      localStream: null
    }
  },
  methods: {
    async init() {
      this.client = AgoraRTC.createClient({ mode: 'live', codec: 'h264' })
      await this.client.init('YOUR_APP_ID')

      this.localStream = AgoraRTC.createStream({
        streamID: Date.now(),
        audio: true,
        video: true,
        screen: false
      })

      await this.localStream.init()
      this.$refs.videoElement.srcObject = this.localStream
    },
    async joinChannel() {
      await this.client.join('YOUR_TOKEN', 'channelName', null, Date.now())
      await this.client.publish(this.localStream)
    }
  }
}
</script>