reactjsnext.jszoom-sdkzoom-meeting

Is there any way I can handle the meeting end event in zoom/meetingsdk?


I have connected zoom sdk to my project as it is said here: https://developers.zoom.us/docs/meeting-sdk/web/component-view/import-sdk/

All OK, but I would like to be able to handle the call end event. I use actual lib (not deprecated):

const ZoomMtgEmbedded = await (await import('@zoom/meetingsdk/embedded')).default;
const client = ZoomMtgEmbedded.createClient();
const clientConf = await getAuth(id, role, f_name, l_name);

const meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({
    zoomAppRoot: meetingSDKElement,
    language: 'en-US',
    // leaveUrl: '', // This option was available in the now deprecated library - @zoom/meetingsdk/embedded
    patchJsMedia: true,
    leaveOnPageUnload: true,
    customize: {
        meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
        toolbar: {
            buttons: [
                {
                    text: 'Custom Button',
                    className: 'CustomButton',
                    onClick: () => {
                        console.log('TEST');
                    }
                }
            ]
        }
    }
});

The "leaveUrl" parameter was convenient, you can make a redirect with parameters and perform the necessary logic on the page, now this option is not available, and I have been walking in circles on the zoom forum for several hours and either there is no answer, or the answers do not relate to the current library.

When you end a call, the browser gives an "alert" about it, maybe you can intercept it somehow, or play through other events, if you can't add your own callback. Or is "beforunload" the only way?

Thanks for any help!


Solution

  • Using the instantiated client you can add an event handler to "listen" for "connection-changed" events.

    ...
    
    const client = ZoomMtgEmbedded.createClient();
    
    ...
    
    client.on("connection-change", (payload) => {
      if (payload.state === "Closed") {
        // Meeting ended
      }
    });
    
    ...
    

    Instead of the "Closed" string literal it appears possible you can import ConnectionState from "@zoom/videosdk" and use ConnectionState.Closed.

    import { ConnectionState } from '@zoom/videosdk';
    
    ...
    
    const client = ZoomMtgEmbedded.createClient();
    
    ...
    
    client.on("connection-change", (payload) => {
      if (payload.state === ConnectionState.Closed) {
        // Meeting ended
      }
    });
    
    ...