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.