In a webapp on mobile I display a video stream on full screen (i.e 360 x 520) using .getUserMedia. Depending values passed in URL (i.e 260 x 220) I create a canvas in the middle of the screen:
let largview = iw-40; // canvas width with left 20px (iw=screen width)
let heightview = Math.round((largview)/w)*h; // URL values
let topview = Math.round((ih-heightview)/2); // (ih=screen height)
video.style.width = iw+'px';
video.style.height = ih+'px';
canvas.width = largview;
canvas.height = heightview;
canvas.style.marginLeft = 20+'px';
canvas.style.marginTop = topview+'px';
Once done I duplicate the video stream in this canvas:
setInterval(function(){
context.drawImage(cameraVideo, 20,topview, largview,heightview, 0,0, largview,heightview);
},1);
My prob is that I'm unable to display the video in canvas just as this one was "transparent": without its border:1px solid red you couldn't see it, video stream and canvas stream will perfectly fit together. I've tried a lot of different values in drawImage but sometimes canvas stream is largest than video stream, sometimes its not at the right place, sometimes its works well (top/left are OK) but canvas is not fully filled: 20px missing on the right side...
I've found a [weird ?] solution with 2 <canvas> tags:
The 1st canvas is set to width and height = 100% (contains the full video stream).
The 2nd one is sized largview * heightview, with position = 20px left and topview px of the top.
setInterval(function(){
cameraContext.drawImage(cameraVideo, 0,0, iw,ih); // full video
let imageData = cameraContext.getImageData( 20, topview, cameraCanvas.width, cameraCanvas.height);
cameraContext2.putImageData(imageData, 0, 0);
},1);
Works well.