Volteé una secuencia de cámara web para reflejarla usando ctx.translate() y ctx.scale() pero también voltea todo lo demás dibujado en el lienzo. ¿Hay alguna manera de voltear el video de la cámara web pero no los otros dibujos en el lienzo como textos?
Aquí está el código que estoy usando actualmente (extracto):
const setupcamera = () => { navigator.mediaDevices .getUserMedia({ video: { width: 600, height: 400 }, audio: false, }) .then((stream) => { video.srcObject = stream; }); }; const detectpose = async () => { const poses = await detector.estimatePoses(video, false); console.log(poses); ctx.drawImage(video, 0, 0, 600, 400); ctx.font = "30px Comic Sans MS"; ctx.fillStyle = "green"; ctx.fillText(po, elbowx, elbowy); setupcamera(); video.addEventListener("loadeddata", async () => { ctx.translate(600, 0); ctx.scale(-1, 1); detector = await poseDetection.createDetector( poseDetection.SupportedModels.MoveNet ); setInterval(detectpose, 20); });Pensé en dibujar un nuevo lienzo sobre el lienzo invertido, pero si es posible, me gustaría dibujar todo en el mismo lienzo.
Debe actualizar la transformación de matriz del contexto durante el dibujo.
Primero escalas y traduces el contexto, luego dibujas tu video, aquí restableces la matriz del contexto antes de finalmente dibujar el texto.
// using a video file because SO can't use gUM const video = document.createElement("video"); video.muted = true; video.crossOrigin = "anonymous"; video.src = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm"; // when available video.requestVideoFrameCallback is the best const requestFrame = (cb) => { if(video.requestVideoFrameCallback) { return video.requestVideoFrameCallback(cb); } return requestAnimationFrame(cb); }; video.play().then(() => { const canvas = document.querySelector("canvas"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; const ctx = canvas.getContext("2d"); ctx.font = "800 90px sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "green"; requestFrame(draw); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // vertical-flip ctx.scale(1, -1); ctx.translate(0, -canvas.height); ctx.drawImage(video, 0, 0); // reset the transform-matrix ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillText("Some text", canvas.width / 2, canvas.height / 2); requestFrame(draw); } }).catch(console.error); canvas { max-height: 100vh } <canvas></canvas>