当前位置：首页 > VUE

vue视频直播实现

2026-01-19 13:26:55VUE

实现 Vue 视频直播的基本方法

使用 WebRTC 实现点对点直播

WebRTC 是浏览器原生支持的实时通信技术，适合低延迟场景。在 Vue 项目中安装 peerjs 或 simple-peer 库建立连接。

// 示例：初始化 Peer 对象
import Peer from 'peerjs';
const peer = new Peer();
peer.on('open', (id) => {
  console.log('Peer ID:', id);
});

通过 getUserMedia 获取摄像头流并传输：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const call = peer.call(remotePeerId, stream);
  });

基于 RTMP 协议的直播推流

对于大规模直播，可使用 OBS 等工具推流到 RTMP 服务器（如 Nginx-RTMP 或 SRS），前端通过 HLS 或 FLV 协议播放。

安装 video.js 和 videojs-flvjs 插件：

import videojs from 'video.js';
import 'videojs-flvjs';
const player = videojs('my-video', {
  sources: [{
    src: 'http://server/live/stream.flv',
    type: 'video/x-flv'
  }]
});

使用第三方 SDK 快速集成

云服务商（如阿里云、腾讯云）提供直播 SDK，通常包含推流和播放组件：

// 腾讯云 WebRTC 推流示例
import TRTC from 'trtc-js-sdk';
const client = TRTC.createClient({
  mode: 'live',
  sdkAppId,
  userId,
  userSig
});
client.startLocalPreview(localStream);

关键优化点

延迟控制：WebRTC 延迟最低（<1s），HLS 延迟较高（10s+）
自适应码率：使用如 dash.js 实现动态切换
弹幕实现：通过 WebSocket 同步消息，CSS3 动画渲染
跨平台兼容：检测浏览器支持情况，备用使用 HLS

完整示例结构

<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <video ref="remoteVideo" autoplay></video>
    <button @click="startBroadcast">开始直播</button>
  </div>
</template>

<script>
export default {
  methods: {
    async startBroadcast() {
      const stream = await navigator.mediaDevices.getUserMedia(
        { video: true, audio: true }
      );
      this.$refs.localVideo.srcObject = stream;
      // 这里添加信令服务器交互逻辑
    }
  }
}
</script>