JS获取电脑摄像头，麦克风，点击切换摄像头设备

主要用到的API是 

navigator.mediaDevices.getUserMedia

在这里可以看到 详情

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

1.获取本地视频

  const getVideo = () => {
    navigator.mediaDevices
      .getUserMedia({
        audio: false,
        video: {
          width: 560,
          height: 370,
          deviceId: cameraDeviceId,  //多个摄像头切换，只需要传入当前点击摄像头的deviceId即可
        },
      })
      .then((stream) => {
        if (window.stream) {
          //先关闭之前已经打开的设备
          window.stream.getTracks().forEach((track) => {
            track.stop();
          });
        }
        var video = videoRef.current;
        try {
          window.stream = stream;
          video.srcObject = stream;
        } catch (error) {
          video.src = window.URL.createObjectURL(stream); //老的播放方式
        }
        video.onloadedmetadata = function(e) {
          video.play();
        };
      });
    // .catch(function (err) {
    //   message.error('开启摄像头失败，请尝试重新检测');
    // });
  };
    <video ref={videoRef} className="detection-video-item"></video>

 2.获取本地视频设备列表

  //获取视频列表
  const getVideoList = () => {
    navigator.mediaDevices
      .enumerateDevices()
      .then(function (devices) {
        devices.forEach(function (device) {
            console.log(device)
        });
      })
  };
  };

    

拿到devices后打印可以发现 ,有三种的类型

3.切换摄像，点击下拉框，获取到当前选择的value后，赋值给cameraDeviceId即可