时间戳

首页 > 解决方案 > ReactJs 网络摄像头 多个网络摄像头提要

reactjs - ReactJs 网络摄像头 多个网络摄像头提要

问题描述

我目前正在为高级设计做一个项目，我们将两个 USB 摄像头插入主机并在 ReactJS 页面上显示来自这些摄像头的提要。我目前正在使用带有以下代码的 React 网络摄像头：

const WebcamCapture = () => {
const webcamRef = React.useRef(null);

const capture = React.useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot();
}, [webcamRef]);

return (
<div className="webcam-container">
  <Webcam
    audio={false}
    ref={webcamRef}
    screenshotFormat="image/jpeg"
    videoConstraints={videoConstraints}
  />
</div>
);
};

  <Grid item xs={6}>
      <Item>
        <Card sx={{ maxWidth: 345 }}>
          <WebcamCapture />
        </Card>
      </Item>
    </Grid>

这段代码可以很好地显示相机源。我可以将此组件添加到我的 html/css 中，它会显示实时摄像头供稿。我的问题是我们需要访问插入计算机的第二个摄像头。而且我似乎无法找到可以选择其他 USB 摄像头的组件中的哪个位置。我的猜测是在 webcamRef 中的某个地方，我可以递增到下一个摄像头，但我似乎无法弄清楚那部分。多谢你们。

标签： reactjs

解决方案

推荐阅读