当前位置：首页 > VUE

vue webrtc实现视频

2026-03-08 16:43:23VUE

Vue 实现 WebRTC 视频通信

在 Vue 中实现 WebRTC 视频通信需要结合浏览器的 WebRTC API 和 Vue 的响应式特性。以下是具体实现步骤：

初始化项目与依赖

创建一个 Vue 项目并安装必要的依赖库（如 peerjs 或原生 WebRTC API）。使用 Vue CLI 或 Vite 初始化项目后，通过 npm 或 yarn 安装依赖。

获取用户媒体设备

通过 navigator.mediaDevices.getUserMedia 获取用户的摄像头和麦克风权限。该方法返回一个 Promise，解析后可获得媒体流对象。

vue webrtc实现视频

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

创建 RTCPeerConnection

实例化 RTCPeerConnection 对象，配置 ICE 服务器（如 STUN/TURN 服务器）。将本地媒体流添加到连接中。

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

// 添加本地流到连接
localStream.getTracks().forEach((track) => {
  peerConnection.addTrack(track, localStream);
});

处理信令交换

通过信令服务器（如 WebSocket）交换 SDP 和 ICE 候选信息。创建 Offer/Answer 并设置远程描述。

vue webrtc实现视频

// 创建 Offer
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// 发送 Offer 到对端

// 接收 Answer
await peerConnection.setRemoteDescription(answer);

渲染视频流

在 Vue 模板中使用 <video> 标签绑定媒体流。通过 ref 动态更新视频源。

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

<script>
export default {
  mounted() {
    this.$refs.localVideo.srcObject = localStream;
    peerConnection.ontrack = (event) => {
      this.$refs.remoteVideo.srcObject = event.streams[0];
    };
  },
};
</script>

处理连接状态

监听 icecandidate、connectionstatechange 等事件，处理连接状态和错误。

peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    // 发送 ICE 候选到对端
  }
};

peerConnection.onconnectionstatechange = () => {
  console.log("Connection state:", peerConnection.connectionState);
};

完整示例代码

以下是一个简化的 Vue 组件示例：

<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <video ref="remoteVideo" autoplay></video>
    <button @click="startCall">Start Call</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localStream: null,
      peerConnection: null,
    };
  },
  methods: {
    async startCall() {
      this.localStream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      });
      this.$refs.localVideo.srcObject = this.localStream;

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

      this.localStream.getTracks().forEach((track) => {
        this.peerConnection.addTrack(track, this.localStream);
      });

      this.peerConnection.ontrack = (event) => {
        this.$refs.remoteVideo.srcObject = event.streams[0];
      };

      const offer = await this.peerConnection.createOffer();
      await this.peerConnection.setLocalDescription(offer);
      // 发送 Offer 到对端（需实现信令逻辑）
    },
  },
};
</script>