如何在用reactjs构建的PWA应用中切换摄像头？

在React应用中切换摄像头，可以使用navigator.mediaDevices.getUserMedia()方法，它会弹出一个对话框让用户选择摄像头

首先，检查浏览器是否支持navigator.mediaDevices和navigator.mediaDevices.getUserMedia：

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  console.log('getUserMedia supported');
} else {
  console.log('getUserMedia not supported');
}

创建一个函数来获取摄像头流：

async function getCameraStream() {
  try {
    const constraints = { video: true };
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    return stream;
  } catch (err) {
    console.error('Error accessing camera:', err);
  }
}

创建一个函数来切换摄像头：

async function switchCamera() {
  const currentStream = videoRef.current.srcObject;
  const newStream = await getCameraStream();

  if (currentStream) {
    currentStream.stop();
  }

  videoRef.current.srcObject = newStream;
}

在组件中使用：

import React, { useRef } from 'react';

function VideoCamera() {
  const videoRef = useRef(null);

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline width="320" height="240"></video>
      <button onClick={switchCamera}>切换摄像头</button>
    </div>
  );
}

export default VideoCamera;

在这个例子中，我们创建了一个VideoCamera组件，它包含一个video元素和一个按钮。点击按钮时，会调用switchCamera函数来切换摄像头。