Javascript 如何使用react网络摄像头仅显示视频画布

我正在使用访问网络摄像头。我想将流绘制到画布中，因为我想在流的顶部绘制一个正方形。我可以使用画布对象来实现这一点。该代码如下所示，并且有效：

从“react Webcam”导入网络摄像头；
从“React”导入React，{useRef}；
常量MyComponent=props=>{
const webcamRef=useRef（null）；
const canvasRef=useRef（null）；
函数drawImge（）{
const video=webcamRef.current；
const canvas=canvasRef.current；
if（视频和画布）{
var ctx=canvas.getContext（'2d'）；
canvas.width=video.video.videoWidth；
canvas.height=video.video.videoHeight；
//我们还希望画布显示反镜像图像
ctx.translate（canvas.width，0）；
ctx.刻度（-1,1）；
ctx.drawImage（video.video，0，0，canvas.width，canvas.height）；
ctx.刻度（-1,1）；
ctx.translate（-canvas.width，0）；
面积=300；
var pX=画布宽度/2-面面积/2；
var pY=canvas.height/2-faceArea/2；
ctx.rect（pX，pY，faceArea，faceArea）；
ctx.lineWidth=“6”；
ctx.strokeStyle=“红色”；
ctx.stroke（）；
设置超时（绘图，33）；
}
}
设置超时（绘图，33）；
返回(
)
}

问题是现在显示了两个流（来自

和

）。我怎么能只处理画布输出？我试图“隐藏”react web cam组件，但画布只输出一个黑色图像。“隐藏”是指将

显示：“无”

分配给

组件的样式。

网络摄像头部件 应该是这样的

<Webcam
                audio={true}
                ref={webcamRef}
                mirrored
                style={{
                    width: "0%", height: "0%"
                }}
               videoConstraints={ width: 1280,
  height: 720,
  facingMode: "user"}
            />

---

如果你为网络摄像头本身指定了一个宽度和高度，我认为它的作用基本上是将

输入到你的html中，因此为什么你不需要网络摄像头本身的宽度和高度，但视频控件应该有宽度和高度

你是什么意思？我不懂你的逻辑