I flipped a webcam stream to make it mirrored using ctx.translate() and ctx.scale() but it also does flip everything else drawn on the canvas. Is there a way to flip the webcam video but not the other drawings on the canvas like texts?
Here is the code I am currently using (excerpt):
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);
});
I thought about drawing a new canvas over the flipped canvas but if possible I would like to draw everything on the same canvas.
You need to update the context's matrix-transform during the drawing.
First you scale and translate the context, then you draw your video, here you reset the context's matrix before finally drawing the text.
// 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>