当前位置：首页 > VUE

vue实现推流

2026-02-17 22:35:29VUE

Vue 实现推流的方法

推流（Streaming）通常指将音视频数据从客户端发送到服务器，常用于直播、视频会议等场景。Vue 作为前端框架，可以结合 WebRTC 或其他推流库实现该功能。

使用 WebRTC 实现推流

WebRTC 是浏览器原生支持的实时通信技术，适合点对点或通过服务器的推流。

获取音视频流
通过 navigator.mediaDevices.getUserMedia 获取摄像头和麦克风的权限：

async function getMediaStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true,
    });
    return stream;
  } catch (err) {
    console.error("Error accessing media devices:", err);
    return null;
  }
}

创建 RTCPeerConnection
初始化一个 WebRTC 连接，并与服务器或对等端交换 SDP 和 ICE 候选：

vue实现推流

const peerConnection = new RTCPeerConnection({
  iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
});

// 添加本地流到连接中
const stream = await getMediaStream();
stream.getTracks().forEach((track) => {
  peerConnection.addTrack(track, stream);
});

// 处理 ICE 候选
peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    // 发送候选到信令服务器
  }
};

通过信令服务器交换 SDP
通常需要一个信令服务器（如 WebSocket）交换 SDP 信息：

peerConnection.createOffer().then((offer) => {
  return peerConnection.setLocalDescription(offer);
}).then(() => {
  // 发送 offer 到信令服务器
});

使用第三方推流库（如 OBS、FFmpeg.js）

如果需要更复杂的推流功能（如 RTMP），可以结合第三方工具：

vue实现推流

使用 FFmpeg.js 处理流
FFmpeg.js 是浏览器版的 FFmpeg，可用于编码和推流：

import { createFFmpeg } from "@ffmpeg/ffmpeg";
const ffmpeg = createFFmpeg({ log: true });

async function pushStream() {
  await ffmpeg.load();
  // 将音视频流转换为可推流格式
  ffmpeg.run("-i", "input.mp4", "-f", "flv", "rtmp://server/live/stream");
}

集成 OBS 或其他推流软件
对于专业直播场景，可让用户通过 OBS 等工具推流，Vue 仅作为控制界面。

在 Vue 中封装推流组件

将推流逻辑封装为 Vue 组件，便于复用：

<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <button @click="startStream">开始推流</button>
  </div>
</template>

<script>
export default {
  methods: {
    async startStream() {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      });
      this.$refs.localVideo.srcObject = stream;
      // 初始化 WebRTC 或调用推流逻辑
    },
  },
};
</script>