vue webrtc视频中切换摄像头

在Vue.js应用中集成WebRTC做视频聊天时，切换摄像头通常是通过JavaScript API来实现的。以下是基本步骤：

1. 首先，在HTML中添加用于显示视频流的`<video>`元素，并设置它作为本地媒体流的目标：

<template>
  <div id="video-container">
    <video ref="localVideo" id="local-video"></video>
  </div>
</template>

<script>
export default {
  methods: {
    toggleCamera() {
      // 实现切换摄像头的部分
    }
  },
  mounted() {
    this.getUserMedia();
  },
  async getUserMedia() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    this.localStream = stream;
    this.updateLocalVideo(stream);
  },
  updateLocalVideo(stream) {
    this.$refs.localVideo.srcObject = stream;
  }
}
</script>

2. 在`toggleCamera`方法中，利用`navigator.mediaDevices.enumerateDevices()`获取可用的摄像头设备，然后选择另一个设备替换当前的本地流：

methods: {
  toggleCamera() {
    navigator.mediaDevices.enumerateDevices()
      .then(devices => {
        if (devices.length > 1) { // 检查是否有备用摄像头
          const currentDeviceId = this.localStream.getTracks()[0].id; // 获取当前摄像头设备ID
          devices.forEach(device => {
            if (device.kind === 'videoinput' && device.id !== currentDeviceId) {
              this.switchToNewDevice(device);
            }
          });
        } else {
          console.log('No secondary camera found.');
        }
      })
      .catch(error => console.error('Error enumerating devices:', error));
  },
  
  async switchToNewDevice(device) {
    try {
      const newStream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: device.deviceId } });
      this.localStream.getTracks().forEach(track => track.stop()); // 关闭旧摄像头
      this.localStream = newStream; // 更新本地流
      this.updateLocalVideo(newStream);
    } catch (error) {
      console.error('Failed to switch cameras:', error);
    }
  }
}