Estoy renderizando una secuencia de video en un lienzo, en algún momento aparece una línea verde al costado del video renderizado, ¿por qué? y como arreglar esto?

¡Ocurre cuando el tamaño del lienzo es más pequeño que la resolución del video!

El código es muy simple

 let videoConstraints: MediaTrackConstraints; if (options) { if (!CameraResolutions[options.resolution]) options.resolution = CameraQuality.Auto; videoConstraints = { deviceId: options.deviceId, frameRate: { ideal: 30 }, // facingMode: options.facingMode, width: { ideal: CameraResolutions[options.resolution][0] }, // 720 height: { ideal: CameraResolutions[options.resolution][1] }, // 720 }; } const constraints: MediaStreamConstraints = { video: videoConstraints ?? true, audio: false, }; navigator.mediaDevices.getUserMedia(options.constraints); ... this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);

this.video es un MediaStream recibido de una cámara web.

estoy probando en chrome

ACTUALIZACIÓN: Basado en el comentario de coralee actualizado a esto y funcionó :) La mayoría de las veces :( Pero necesito una mejor solución

 const w = this.canvas.width - 10; const h = this.canvas.height - 10; const x = 5; // to center the video on canvas const y = 5; this.ctx.drawImage(this.video, x, y, w, h);

ACTUALIZACIÓN 2: El verdadero problema: nuestro SDK de WebRTC está habilitando la transmisión simultánea y usa el códec vp8 https://en.wikipedia.org/wiki/VP8 y, por lo tanto, el tamaño del lienzo debe dividirse por 4, 8 o 16 La solución: Math.round(Math.min(videoWidth, maxSize) / 16) * 16;