I am getting this error when I try to start the video again.
zoomStream.startVideo()
zoomStream is the stream I created my own variable for that.
zoomStream.stopVideo() is working but not startVideo()
<canvas id="rightSideVideo" width="1920" height="1080"></canvas>
I tried to convert it to video tag but when I convert it into video tag the video is not rendering.
const joinVideoRoom = (roomName, token, name, passcode) => {
return new Promise((resolve, reject) => {
var ZoomVid = ZoomVideo.createClient();
// var stream;
// Check system requirements before proceeding (Krunal made some changes below)
if (ZoomVideo.checkSystemRequirements().video && ZoomVideo.checkSystemRequirements().audio) {
// Initialize Zoom SDK
ZoomVid.init('en-US', 'Global', { patchJsMedia: true }).then(() => {
// Join the Zoom room
ZoomVid.join(roomName, token, name, passcode).then(() => {
console.log("Successfully joined the Zoom room");
// Get the media stream
zoomStream = ZoomVid.getMediaStream();
console.log("zoomStream object:", zoomStream);
// Start video and audio ---< needed to be in the separate function (temp. purpose only)
if (zoomStream.isRenderSelfViewWithVideoElement()) {
// If rendering with a video element
zoomStream.startVideo({ videoElement: document.querySelector('#my-self-view-video') }).then(() => {
// Video successfully started and rendered
console.log("Video started successfully");
//it will add white border when video starts
$('#my-self-view-video').css({
'border': '2px solid white'
});
// stream.startAudio();
zoomStream.startAudio()
ZoomVid.on('user-added', (payload) => {
console.log(payload[0].userId + ' joined the session');
// updateUserJoinedUI(payload[0].userId);
});
ZoomVid.on('active-speaker', (payload) => {
console.log('Active speaker, use for CSS visuals', payload);
});
// Resolve the promise when all Zoom SDK operations are completed
resolve({ ZoomVid, zoomStream });
}).catch((error) => {
console.log("Error starting video:", error);
reject(error);
});
}
// Adding the peer video state change event handler
ZoomVid.on('peer-video-state-change', (payload) => {
if (payload.action === 'Start') {
// Start rendering peer video
console.log("Peer videoe is on");
zoomStream.renderVideo(document.querySelector('#rightSideVideo'), payload.userId, 1920, 1080, 0, 0, 3);
} else if (payload.action === 'Stop') {
// Stop rendering peer video
zoomStream.stopRenderVideo(document.querySelector('#rightSideVideo'), payload.userId);
}
});
// Retrieve all users after joining (this seems to be in a separate function)
ZoomVid.getAllUser().forEach((user) => {
if (user.bVideoOn) {
zoomStream.renderVideo(document.querySelector('#rightSideVideo'), user.userId, 1920, 1080, 0, 0, 3);
}
});
}).catch(error => {
console.error("Error joining Zoom room:", error);
reject(error);
});
}).catch(error => {
console.error("Error initializing Zoom SDK:", error);
reject(error);
});
} else {
console.error("System requirements not met for video and audio");
reject(new Error("System requirements not met for video and audio"));
}
});
};
