当前位置：首页 > VUE

vue实现rtc

2026-01-07 18:35:20VUE

Vue 实现 RTC 的步骤

安装依赖

在 Vue 项目中安装 WebRTC 相关依赖，如 simple-peer 或 peerjs，用于简化 WebRTC 的实现。
运行以下命令安装 simple-peer：

npm install simple-peer

创建 Vue 组件

在 Vue 组件中引入 simple-peer，并初始化 Peer 实例。

import Peer from 'simple-peer';

export default {
  data() {
    return {
      peer: null,
      stream: null,
    };
  },
};

获取媒体流

使用 navigator.mediaDevices.getUserMedia 获取用户的摄像头和麦克风流。

async initStream() {
  try {
    this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  } catch (error) {
    console.error('Error accessing media devices:', error);
  }
}

初始化 Peer 连接

创建 Peer 实例并配置信号交换逻辑。

initPeer(isInitiator) {
  this.peer = new Peer({
    initiator: isInitiator,
    stream: this.stream,
    trickle: false,
  });

  this.peer.on('signal', (data) => {
    // 发送信号数据给对方
    this.sendSignal(data);
  });

  this.peer.on('stream', (remoteStream) => {
    // 处理远程流
    this.handleRemoteStream(remoteStream);
  });
}

处理信号交换

通过 WebSocket 或其他方式交换 Peer 信号数据。

sendSignal(data) {
  // 通过 WebSocket 或服务器转发信号数据
  socket.emit('signal', data);
}

// 接收对方信号
receiveSignal(data) {
  this.peer.signal(data);
}

渲染视频流

在模板中渲染本地和远程视频流。

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

<script>
export default {
  mounted() {
    this.$refs.localVideo.srcObject = this.stream;
  },
  methods: {
    handleRemoteStream(stream) {
      this.$refs.remoteVideo.srcObject = stream;
    },
  },
};
</script>

关闭连接

在组件销毁时关闭 Peer 连接和媒体流。

beforeDestroy() {
  if (this.peer) {
    this.peer.destroy();
  }
  if (this.stream) {
    this.stream.getTracks().forEach(track => track.stop());
  }
}

注意事项

确保使用 HTTPS 或 localhost 环境，否则 getUserMedia 可能无法正常工作。
信号交换需要通过服务器或第三方服务（如 WebSocket）中转。
对于更复杂的场景（如多人通话），可以使用 mediasoup 或 janus-gateway 等库。

示例代码整合

以下是一个完整的 Vue 组件示例：

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

<script>
import Peer from 'simple-peer';

export default {
  data() {
    return {
      peer: null,
      stream: null,
    };
  },
  async mounted() {
    await this.initStream();
    this.$refs.localVideo.srcObject = this.stream;
  },
  methods: {
    async initStream() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      } catch (error) {
        console.error('Error accessing media devices:', error);
      }
    },
    startCall() {
      this.initPeer(true);
    },
    initPeer(isInitiator) {
      this.peer = new Peer({
        initiator: isInitiator,
        stream: this.stream,
        trickle: false,
      });

      this.peer.on('signal', (data) => {
        console.log('Signal data:', data);
        // 实际项目中通过 WebSocket 发送信号
      });

      this.peer.on('stream', (remoteStream) => {
        this.$refs.remoteVideo.srcObject = remoteStream;
      });
    },
  },
  beforeDestroy() {
    if (this.peer) {
      this.peer.destroy();
    }
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
    }
  },
};
</script>

vue实现rtc