Javascript 在不镜像画布的情况下将网络摄像头视频屏幕截图绘制到画布

好的，我正在通过HTML中的视频元素显示来自计算机的网络摄像头提要，我正在镜像它，所以它看起来更像应该的。当我拍摄屏幕截图并将其显示在画布上时，图像会恢复到原来的状态，而不是镜像。现在我可以镜像画布，这样看起来就像视频一样，但我也尝试根据光标所在的位置在画布上绘制其他东西。我知道我可以镜像光标的位置，所以看起来你只是在画它应该是什么样子，但我会在画布上画很多东西，所以这会很烦人。我想知道我是否可以在视频放到画布上之前镜像视频的提要，这样我就不必镜像其他所有内容了

在视频元素中显示网络摄像头：

var video=document.querySelector（“#videoElement”）；
navigator.getUserMedia=navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia | | navigator.msGetUserMedia | | navigator.oGetUserMedia；
if（navigator.getUserMedia）{
getUserMedia（{video:true}，handleVideo，videoError）；
}
功能handleVideo（流）{
video.src=window.URL.createObjectURL（流）；
}

不用css来镜像视频，你可以直接在画布上镜像：

ctx.scale（-1，1）

这正是我试图避免的。我先在视频上显示摄像头，所以如果我想让它看起来像我做的那样，我需要先镜像它。当我把屏幕截图放在画布上时，我可以用它进行镜像，但是如果我这样做了，我将无法根据光标的位置绘制东西。只需设置镜像，然后将其恢复为正常<代码>ctx.刻度（-1,1）；ctx.translate（yourVid.videoWidth，0）；ctx.drawImage（yourVid，x，y）；ctx.刻度（-1,1）；ctx.translate（-yourVid.videoWidth，0）；ctx.doYourOtherDrawings（）或者，

ctx.setTransform（-1,0,0,1，您的视频宽度，0）；ctx.drawImage（yourVid，0,0）；setTransform（1,0,0,1,0,0）；ctx.doYourOtherDrawings（）哦，是的。这确实有效。真不敢相信我没看到。谢谢！好东西。不用css来镜像你的视频，你可以直接在画布上做：
ctx.scale（-1，1）
这就是我想要避免的。我先在视频上显示摄像头，所以如果我想让它看起来像我做的那样，我需要先镜像它。当我把屏幕截图放在画布上时，我可以用它进行镜像，但是如果我这样做了，我将无法根据光标的位置绘制东西。只需设置镜像，然后将其恢复为正常<代码>ctx.刻度（-1,1）；ctx.translate（yourVid.videoWidth，0）；ctx.drawImage（yourVid，x，y）；ctx.刻度（-1,1）；ctx.translate（-yourVid.videoWidth，0）；ctx.doYourOtherDrawings（）

或者，

ctx.setTransform（-1,0,0,1，您的视频宽度，0）；ctx.drawImage（yourVid，0,0）；setTransform（1,0,0,1,0,0）；ctx.doYourOtherDrawings（）哦，是的。这确实有效。真不敢相信我没看到。谢谢！好东西。