"Uncaught ReferenceError: room is not defined" when attempting to disconnect from Twilio Video room

Question

I'm using the Twilio Video Javascript API to stream and record video content from the browser. The application is built in Nodejs/Express and I am loading the Twilio API from a CDN link in the page. So far I can successfully instantiate a room and record the video on the server with the following code:

    function createAndConnectToRoom(roomName) {
        Twilio.Video.connect(Token, { name: roomName }).then(room => {
            console.log(`Successfully joined a Room: ${room}`);
            room.on('participantConnected', participant => {
                console.log(`A remote Participant connected: ${participant}`);
            });
        }, error => {
            console.error(`Unable to connect to Room: ${error.message}`);
        });

        displayLocalVideo();
    }

My problem is I am unable to disconnect from the server. Ideally, I'd like to have a big button that disconnects the user and terminates the room. On the Twilio docs, they advise using the following code (the outer function is my own, the inner code is from Twilio). However, I receive Uncaught ReferenceError: the room is not defined in the Chrome console when I fire this function with an onclick event.

    function disconnectFromRoom() {
        room.on('disconnected', room => {
            // Detach the local media elements
            room.localParticipant.tracks.forEach(publication => {
                const attachedElements = publication.track.detach();
                attachedElements.forEach(element => element.remove());
            });
        });

        // To disconnect from a Room
        room.disconnect();

    }

I also tried to save "room" to a global variable when it's created and then passing that variable into the disconnect function. But even then I cannot call the room.on.

I seem to be misunderstanding something basic in how to use the API to terminate a room.

How do you include this code to the page? How exactly did you save a room to a global variable and pass to the function? — Shlang, Apr 11 '20 at 20:57
I included the code in the bottom of an Express EJS view after linking in the Twilio SDK (twilio-video.min.js). When I tried saving room to a global variable I did it in the createAndConnectToRoom function immediately after console logging "successfully connected to a room". For example, I set something like rm = room and then later get an undefined error when calling rm.on in the disconnect function. — hughesdan, Apr 12 '20 at 04:26
It sounds a bit weird, I guess the problem is in the way you are trying to save a room as a global variable. I might be caused by how you adding and separating scripts. I've made a [runnable example](https://codesandbox.io/s/little-silence-s47wu?file=/public/mock.js) with mocked Twilio and everything seems fine, can you take a look and maybe modify it so that it would reflect your setup. Also please take a look at [official example](https://github.com/twilio/video-quickstart-js/blob/master/quickstart/src/index.js) — Shlang, Apr 12 '20 at 11:53
Thank you. The issue does indeed appear to be the result of the way I was trying to save room as a global variable. In your runnable example you attached room to window and when I do the same it fixes the error. Do you want to make your comment an answer? — hughesdan, Apr 13 '20 at 03:00

score 0 · Answer 1 · answered Apr 17 '20 at 05:09

Looks like you don't have access to the room variable in the disconnectFromRoom function. Try to hold all the room created in some global variable like window.room and then access the room from window in disconnectFromRoom function.

Please look at this example too.

score 0 · Answer 2 · answered Apr 17 '20 at 06:00

Move your room.on('disconnect) code into your createAndConnectToRoom function. It does not need to be inside your disconnect function!

In your disconnectFromRoom function:

    function disconnectFromRoom() {
       if (rm) {
          rm.disconnect();
       }
    }

Also want to add that

    room.on('disconnected', room => {

has a namespace collision

"Uncaught ReferenceError: room is not defined" when attempting to disconnect from Twilio Video room

2 Answers2