Resume the live streaming

Introduction

During a live streaming, if the user refreshes the browser, the live streaming will be terminated. To resume the live streaming after refreshing the browser, please refer to this document.

How do I resume the live streaming after refreshing the browser?

1. Get the Room ID

When calling the joinRoom method, listen for the onJoinRoom callback function and call the getRoomID method within the onJoinRoom callback function to obtain and properly record the room ID after successfully joining the live streaming. For example, store it in sessionStorage for returning to the live streaming after refreshing the browser.

zp.joinRoom({
    onJoinRoom: () => {
        // Get the roomID
        const roomID = zp.getRoomID();
        // Store it in sessionStorage
        sessionStorage.setItem('roomID', roomID);
    }   
});

2. Rejoin the Room

After the user refreshes the browser, the application should retrieve the roomID from sessionStorage and call the joinRoom method to rejoin the room, and set showPreJoinView to false to disable the pre-join check page for a better user experience.

if (sessionStorage.getItem('roomID')){
    // Generate Kit Token
    const appID = ;
    const token = "";
    const roomID = sessionStorage.getItem('roomID');
    const userID = "";
    const userName = "userName" + userID;    
    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForProduction(appID, token, roomID, userID, userName);

    // Create an instance object using the Kit Token.
    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom({
        // Hide the pre-join check view
        showPreJoinView: false,
    });
}

Reference

getRoomID

// Description: Get the Room ID
getRoomID(): string;