What unit of measurement do the x, y offset in Video web SDK's renderVideo API take as params?

Description
It is unclear as to what unit of measurements does the renderVideo API on Stream actually take.
Neither in the type definition or SDK reference (Zoom Video SDK for Web - 1.9.0) I could get a clear picture about this.

I can just see number as the type for these.

Which Web Video SDK version?
SDK Version: 1.8.2

Video SDK Code

 /**
   *
   * Starts rendering video.
   *
   *
   * **Example**
   * ```javascript
   * try{
   *   const canvas = document.querySelector('#canvas-id');
   *   await stream.renderVideo(canvas,userId,300,200,0,0,1);
   * } catch (error)  {
   *   console.log(error);
   * }
   * ```
   *
   * @param canvas Required. The canvas to render the video.
   * @param userId Required. The user ID which to render the video.
   * @param width Required. Video width.
   * @param height Required. Video height.
   *
   * ** Note **
   *
   * The origin of the coordinates is in the lower left corner of the canvas.
   *
   * @param x Required. Coordinate x of video.
   * @param y Required. Coordinate y of video.
   * @param videoQuality Required. Video quality: 90p, 180p, 360p, 720p. Currently supports up to 720p.
   * @param additionalUserKey Optional. Used to render the same video on different coordinates of the canvas.
   *
   * @returns
   * - `''`: Success
   * - `Error`: Failure. Details in {@link ErrorTypes}.
   * @category Video
   */
  function renderVideo(
    canvas: HTMLCanvasElement,
    userId: number,
    width: number,
    height: number,
    x: number,
    y: number,
    videoQuality: VideoQuality,
    additionalUserKey?: string,
  ): Promise<'' | Error>;

This only solution working for me with some random numbers like 77, 30, -50, -25 etc, If I try to handle directly using widths, its breaking since the x and y offsets are off limit.

Device:

  • Device: Macbook Pro
  • OS: macOS 13.4.1
  • Browser: Chrome
  • Browser Version 119.0.6045.105 (Official Build) (arm64)

Hey @panghalarsh

Thanks for your feedback.

The videos in the Video SDK are rendered using pixels as the unit of measurement. We display the videos on a canvas element, and the width, height, x, y, etc. are all coordinates and units relative to the canvas.

Thanks
Vic

Got it, thanks for clarifying @vic.yang

I wanted to implement this layout by passing coordinates and height, width to each renderVideo call

(Not able to upload media on the post :frowning: )

----------------------------------------------
|  ---------------------------   -------------- |
| |                           | |  Right Tile  ||
| |         Left Tile         | |              || 
| |                           |  -------------- |
| |                           |                 |
|  ---------------------------                  |
 ------------------------------------------------

for left tile I am using 0.5 * window.innerWidth and Height as window.innerHeight

but with that the video is going out of screen and is having margins (have checked by giving negative offsets), do we have to keep something else also in mind like aspect ratio for eg.

how can we be certainly sure that the video would be rendered at exact coordinates we intend to.

Hey @panghalarsh

Let me illustrate your idea:

Do you mean to enlarge the video tile? For instance, in the upper right part of the diagram, the left tile goes beyond the window boundary, and in the viewport, the left video is cropped. To achieve this, make sure the canvas also exceeds the viewport.

Or do you mean video tiles scale with the viewport? In that case, you will need to dynamically calculate the coordinates and adjust the canvas size accordingly. To provide a better user experience, it is important to maintain the aspect ratio during these calculations.

Thanks
Vic

So, have tried the updateVideoCanvasDimension API and it turns out that it resolved all my resolution and positioning issues.

Though I can see some margins around the videos due to aspect ratio. Would love to know if we can change the aspect ratio of the video being rendered in order to remove margins or possibly if there is some other workaround.

Thanks a lot @vic.yang for your fast replies ! :smiley:

Hey @panghalarsh

This is possible. Usually, the video is captured and transmitted in 16/9 ratio. If it is rendered in other ratios, the video may be distorted.

Thanks
Vic

1 Like