Html getusermedia-镜像而不是翻转

我正在使用getusermedia从视频流中抓取图像，并像这样镜像它

canvas.width = video.videoWidth;
canvas.height = video.videoHeight;

var ctx = canvas.getContext('2d');
ctx.setTransform(1,0,0,-1,0,canvas.height)

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

dataUrl = canvas.toDataURL('image/jpeg');

---

但它不是镜像它，而是将它颠倒过来。我哪里出错了？

CanvasContext2d.setTransform的参数是

setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)

将scaleY设置为-1并在Y轴上按高度平移。事实上，你是垂直翻转的

要水平翻转，您需要

ctx.setTransform(-1,0,0,1,canvas.width,0);

const vid=document.createElement'video'； const ctx=canvas.getContext'2d'； //gUM存在StackSnippet过度保护的iFrame问题 //因此，我们将使用普通视频代替 vid.src=https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm'; 电视剧 .然后=>{ canvas.width=vid.videoWidth； canvas.height=vid.videoHeight； 拉环； }; 函数拉环{ 如果inp.checked{ ctx.setTransform-1,0,0,1，canvas.width，0； }否则{ ctx.setTransform1,0,0,1,0,0； } ctx.drawImagevid，0,0； requestAnimationFramedrawloop； } 帆布{ 宽度：100%； } 水平翻转