Hi, I’m creating an application that allow users to stream their zoom sessions using the Video SDK UI Toolkit for the interface and starting the livestream from my server using the video SDK API and giving the users a button to start and stop the transmission
I added some event listeners to allow the users to automatically join to the zoom session when they visit an specific link and to automatically leave when they change the page or close the browser
Everything works great if there are multiple users on a session, they can close and re-open the window and they get re-connected to the same session they were before, but there are sometimes that only a single user is transmitting, so if that user closes the browser or even refreshes the page the zoom session is automatically finished since there are no more users in it, this abruptly interrupts the transmission and causes an error when the users try to stop the transmission since the zoom session ID changes and the video SDK API needs it to stop the transmission
So, my question is that, is it possible to mantain a video SDK session open for a couple of minutes even when there are no users in it to allow them to reconnect without having to create a new session?
Or could you please suggest some way to handle this to prevent the transmission from being interrupted if the session suddenly get’s finished? I know that probably I’m not implementing this correctly so I’m looking for some guidance, I hope you can understand what I’m trying to achieve, please let me know if you need more information
This is a snippet of the useEffect that I use in my code to allow the users to connect to the session, I hope it helps
useEffect(() => {
const initiZoom = async () => {
console.log("initiZoom with name:", initialUsername)
if (!username) {
return
}
if (!usernameWasSet) {
return
}
const {
errorMessage, token
} = await getZoomTokenAction(sessionName, username, webinarId, isHost ? "host" : "participant")
if (errorMessage) {
console.error("Error getting zoom token", errorMessage)
toast.error(errorMessage)
return
}
if (!token) {
console.error("Error getting zoom token", token)
toast.error("Error getting zoom token")
return
}
if (!containerRef.current) {
console.error("No container found")
return
}
uiToolkit.joinSession(containerRef.current, {
sessionName,
userName: username,
sessionIdleTimeoutMins: 0,
videoSDKJWT: token,
language: "es",
featuresOptions: {
virtualBackground: {
enable: false
},
caption: {
enable: false
},
invite: {
enable: false
},
theme: {
enable: true,
defaultTheme: "light"
},
phone: {
enable: false
},
subsession: {
enable: false
},
feedback: {
enable: false
},
settings: {
enable: isHost
},
troubleshoot: {
enable: false
},
header: {
enable: false
},
viewMode: {
enable: false,
defaultViewMode: "gallery" as SuspensionViewValue,
viewModes: ["minimized", "speaker", "gallery"] as SuspensionViewValue[],
},
audio: {
enable: true,
backgroundNoiseSuppression: false,
},
leave: {
enable: false
}
}
})
uiToolkit.onSessionJoined(async () => {
console.log("Session joined")
// Store the session ID in context
const sessionInfo = uiToolkit.getSessionInfo()
if (sessionInfo?.sessionId) {
setSessionId(sessionInfo.sessionId)
}
})
uiToolkit.onSessionClosed(() => {
setSessionId(null)
console.log("Session closed")
})
// Mark session as successfully joined.
sessionJoinedRef.current = true
setIsLoading(false)
}
initiZoom()
const handleBeforeUnload = () => {
uiToolkit.leaveSession()
}
window.addEventListener('beforeunload', handleBeforeUnload)
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload)
if (sessionJoinedRef.current) {
setSessionId(null) // Clear sessionId on unmount
uiToolkit.leaveSession()
}
}
}, [username, usernameWasSet, webinarId, sessionName, setSessionId, isHost, initialUsername])