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)
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.
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.
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.
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.
)
