Canvas Video Occasionally Stretched

Video SDK Web
1

Description
On some devices (specifically on Windows with the Edge browser), rendering video onto a <canvas> occasionally results in a stretched video. Once stretched, the video does not return to its correct state with stretched, even after using updateVideoCanvasDimension(). The only way to fix it is to stop and restart the camera.

This is my code:

Canvas style:

<canvas id="pin_canvas_view" width="1024" height="907" style="width: 100%;height: 100%;background-color: transparent;object-fit: fill;" user-id="16778240"></canvas>

Render canvas:

      const canvasElement = document.getElementById(ViewIdentifiers.PIN_CANVAS_VIEW);
      canvasElement.setAttribute('user-id', userId);
      await stream.renderVideo(canvasElement, userId, canvasElement.width, canvasElement.height, 0, 0, quality);

Start camera:

      let videoOptions = {
        cameraId: cameraId,
        originalRatio: window.isMobile
      };

      if (state.mediaStream.isSupportVirtualBackground() && virtualBackground) {
        videoOptions.virtualBackground = { imageUrl: virtualBackground };
      }
      await state.mediaStream.startVideo(videoOptions);

Can you help troubleshoot these session IDs:
skUiaLguT4ebDfCVrJUDVg==
N/qI+FOKSe+cKSwya0nxyw==

Could the issue be caused by using object-fit: fill on the <canvas> element’s style, or is there likely another cause? How should I resolve this issue?

Thank you in advance for your help!

Browser Console Error
N/A

Which Web Video SDK version?
2.1.0

Device:

  • Device: Window
  • Browser: Edge
2

Hi @lmtruong1512

Thanks for your feedback.

Could the issue be caused by using object-fit: fill on the <canvas> element’s style, or is there likely another cause?

This is possible.

When using canvas to render video, the width and height set on the canvas determine the actual number of pixels in the displayed content. If object-fit: fill is used, it will be affected by the container’s aspect ratio — if the aspect ratio doesn’t match, the video may appear stretched.

Thanks
Vic

1 Like
3

Hi @vic.yang,

We updated to object-fit: contain, but the canvas is still stretched. It doesn’t seem to be working. Do you have any suggestions for resolving or working around this issue while keeping using canvas?