I am quite new to zoom’s web video SDK. I am using the sample react app. After investigating for a bit, I can’t seem to find a way to capture ONLY my video as a client (a simple button for each client that will record their own video for 5 seconds). I saw that we could record the video of the canvas that contains all participant videos, but that is not what I am looking for.
I tried to create an empty canvas and render the video to it and then try to capture an image from that canvas.
const inputCanvas = document.getElementById("different-canvas");
const userId = zmClient.getCurrentUserInfo().userId;
let stream = await zmClient.getMediaStream();
stream.renderVideo(inputCanvas, userId, 1920, 1080, 0, 0, 3);
// And I try to download an image like this
let url = inputCanvas.toDataURL();
let a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = 'frame.png';
a.click();
window.URL.revokeObjectURL(url);
However, when I render the stream to another canvas, the original one disappears (seems like I can’t render one stream to 2 canvases at the same time). Is there a better way to do this? Would appreciate any information.
I managed to capture the individual videos of each participant like this
let video = document.createElement("video");
const inputCanvas = document.createElement('canvas');
// Get connected devices.
const devices = await ZoomVideo.getDevices();
// Get the first camera Id.
const selectedCameraId = devices[0].deviceId
// Create a local video track (Mainly used for testing camera preview -> lower quality?)
const localVideo = ZoomVideo.createLocalVideoTrack(selectedCameraId);
// Start the video by passing it an html video element.
await localVideo?.start(video);
However, the video resolution is 640x360, can’t we change the resolution of the local video track to 720p?
I see. However it seems like passing the captureOptions and specifiying the width and height to be 1280x720 gives a better video quality when using localVideoTrack
The main use case for localVideoTrack is a “preview” of your video before joining a session.