当前位置：首页 > VUE

vue实现rtc

2026-02-10 02:42:03VUE

Vue 实现 RTC 的基本方法

在 Vue 中实现 WebRTC（实时通信）需要结合浏览器提供的 WebRTC API 和 Vue 的生命周期管理。以下是实现的基本步骤。

安装依赖

确保项目已安装 peerjs 或 simple-peer 等 WebRTC 库。通过 npm 或 yarn 安装：

npm install peerjs
# 或
npm install simple-peer

初始化 Peer 连接

在 Vue 组件中初始化 Peer 对象，用于建立对等连接。通常在 mounted 生命周期钩子中完成。

import Peer from 'peerjs';

export default {
  data() {
    return {
      peer: null,
      conn: null,
    };
  },
  mounted() {
    this.peer = new Peer();
    this.peer.on('open', (id) => {
      console.log('Peer ID:', id);
    });
  },
};

建立连接

通过 Peer 对象建立连接，并处理连接事件。监听 connection 事件以接收其他对等方的连接请求。

methods: {
  connectToPeer(peerId) {
    this.conn = this.peer.connect(peerId);
    this.conn.on('open', () => {
      console.log('Connected to peer');
    });
  },
},
mounted() {
  this.peer.on('connection', (conn) => {
    this.conn = conn;
    conn.on('open', () => {
      console.log('Peer connected to us');
    });
  });
},

发送和接收数据

通过已建立的连接发送和接收数据。使用 send 方法发送数据，监听 data 事件接收数据。

methods: {
  sendMessage(message) {
    if (this.conn && this.conn.open) {
      this.conn.send(message);
    }
  },
},
mounted() {
  this.peer.on('connection', (conn) => {
    conn.on('data', (data) => {
      console.log('Received:', data);
    });
  });
},

实现音视频通信

使用 getUserMedia 获取本地媒体流，并通过 RTCPeerConnection 建立音视频通信。

methods: {
  async startVideoCall() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    this.$refs.localVideo.srcObject = stream;

    const peerConnection = new RTCPeerConnection();
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
  },
},

处理 ICE 候选和信令

交换 ICE 候选和 SDP 信息以建立连接。监听 icecandidate 事件并处理信令。

methods: {
  async createOffer() {
    const offer = await this.peerConnection.createOffer();
    await this.peerConnection.setLocalDescription(offer);
    // 发送 offer 到对等方
  },
  async handleAnswer(answer) {
    await this.peerConnection.setRemoteDescription(answer);
  },
},
mounted() {
  this.peerConnection.onicecandidate = (event) => {
    if (event.candidate) {
      // 发送 ICE 候选到对等方
    }
  };
},

完整示例

以下是一个简单的 Vue 组件示例，展示如何实现基本的 WebRTC 通信。

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

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

      this.peerConnection = new RTCPeerConnection();
      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>