将网络摄像头视频截图绘制到画布而不用镜像画布

Question

好的，所以我通过HTML中的视频元素从计算机显示网络摄像头，我正在镜像它，看起来更像是应该的。当我截取屏幕截图并将其显示在画布上时，图像将恢复原来的状态，而不是镜像。现在我可以镜像画布，然后看起来就像视频，但我也试图根据光标的位置在画布上绘制其他东西。我知道我可以只镜像光标所在的位置，所以看起来你只是绘图它应该是，但我会在画布上绘制很多东西，所以它会很烦人。我想知道在放入画布之前我是否可以基本上反映视频的视频，以便我不必反映其他所有内容？

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

＆＃13;

＆＃13;

var video = document.querySelector("#videoElement");
 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
 
if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}
 
function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

＆＃13;

＆＃13;

＆＃13;

使用CSS镜像视频元素：

＆＃13;

＆＃13;

  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);

＆＃13;

＆＃13;

＆＃13;

截图到画布：

＆＃13;

＆＃13;

        ctx.drawImage(video, 0,0, canvas.width, canvas.height);

＆＃13;

＆＃13;

＆＃13;