javascript - 有没有办法在同一页面上使用反应网络摄像头，一个用于前置摄像头，另一个用于后置摄像头？

Question

我正在使用 react-webcam 版本 ^4.0.0。我有一个内置反应的网页，我想使用第一个选项卡拍摄客户自拍照，并使用下一个选项卡使用他的后置摄像头拍照。对于前置摄像头，我使用以下代码：-

    const videoConstraints = {
         facingMode: 'user'
    };
              <Webcam
                id="Selfie"
                audio={false}
                style={webcamStyle}
                videoConstraints={videoConstraints}
                height="auto"
                // eslint-disable-next-line no-return-assign
                ref={webcam => (this.webcam = webcam)}
                screenshotFormat="image/jpeg"
              />

我正在使用以下代码来使用后置摄像头：-

const videoConstraints = {
  facingMode: 'environment'
};
                  <Webcam
                id="panCard"
                audio={false}
                style={webcamStyle}
                height="auto"
                videoConstraints={videoConstraints}
                // eslint-disable-next-line no-return-assign
                ref={webcam => (this.webcam = webcam)}
                screenshotFormat="image/jpeg"
              />

问题是即使我将后置摄像头设置为环境，它仍然会打开前置摄像头。我该如何解决这个问题？任何帮助或建议表示赞赏。谢谢。

标签： javascriptreactjswebcamnext.js