Each client capturing and downloading their own video ONLY

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?

Hey @poufy ,

The Web Video SDK can only send 360p at the moment.

Thanks,
Tommy

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

1 Like

Hey @poufy ,

Correct. :slight_smile: The main use case for localVideoTrack is a “preview” of your video before joining a session. :slight_smile:

You should also be able to do your self recording use case.

Thanks,
Tommy

1 Like