En una aplicación web en el móvil, muestro una transmisión de video en pantalla completa (es decir, 360 x 520) usando .getUserMedia . Según los valores pasados en la URL (es decir, 260 x 220), creo un lienzo en el medio de la pantalla:

 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';

Una vez hecho esto, duplico la transmisión de video en este lienzo:

 setInterval(function(){ context.drawImage(cameraVideo, 20,topview, largview,heightview, 0,0, largview,heightview); },1);

Mi problema es que no puedo mostrar el video en el lienzo, ya que este era "transparente": sin su border:1px solid red , no podría verlo, la transmisión de video y la transmisión de lienzo encajarán perfectamente. Probé muchos valores diferentes en drawImage pero a veces el flujo de lienzo es más grande que el flujo de video, a veces no está en el lugar correcto, a veces funciona bien (arriba/izquierda están bien) pero el lienzo no está completamente lleno: faltan 20px en el lado correcto...