CODEWITHSUNDEEP
twiliotwilio-api
Woppi
Woppi

Reputation: 5451

How do you create a Twilio Video API Ended Event Hook?

I can't seem to figure out how to add an "ended" event hook after the "disconnected" event.

I wanted to hide the "End Call" button then notify the other participant via sockets so I can also hide their "End Call" button and do other stuff.

Here are my attempts:

My starting code was from https://github.com/TwilioDevEd/video-quickstart-node/blob/master/public/quickstart.js#L27

My attempts are

1. adding a "then" after stopping the conversation and calling a custom function

webRTCActiveConversation.on('disconnected', function (conversation) {
    console.log("Connected to Twilio. Listening for incoming Invites as '" + webRTCConversationsClient.identity + "'");

    //results to  "conversation.localMedia.stop(...).then is not a function"
    conversation.localMedia.stop().then(conversationEnded); 


    webRTCActiveConversation = null;
});

2. adding an "ended" event hook (somehow this was never triggered):

webRTCActiveConversation.on('ended', function (conversation) {
   console.log('conversation has ended...');

   //should hide end call button then socket emit to hide the end call button on the other connected client

    webRTCActiveConversation = null;
});

3. Adding DOM manipulation and socket emit under disconnect event hook (Disconnects call from this client, DOM manipulation and socket event are working, but Twilio connection has not been disconnected on the other connected client)

    webRTCActiveConversation.on('disconnected', function (conversation) {
        console.log("disconnect call" + webRTCConversationsClient.identity + "'");

        conversation.localMedia.stop();   

        //hide end call button
        var el = document.getElementById('button-end-audio-call');
        el.className += " hide-state";

        //socket emit to hide the end call button on the other connected client
        socket.emit('notifyEndCallRequest');


        webRTCActiveConversation = null;

    });

Upvotes: 1

Views: 299

Answers (1)

Woppi
Woppi

Reputation: 5451

I did a workaround for the meantime, I modified my attempt no.3 and it worked. I'm sure this is not the best way to do this as there is an "ended" event hook I can't figure out how to trigger, but it solved my issue (both participants got disconnected to the call).

    //when the conversation ends, stop capturing local video
    webRTCActiveConversation.on('disconnected', function (conversation) {
        console.log("disconnect call '" + webRTCConversationsClient.identity + "'");

        conversation.localMedia.stop();

        webRTCActiveConversation = null;

        //delay DOM manipulation and socket emit
        setTimeout(function(){
            var el = document.getElementById('button-end-audio-call');
            el.className += " app-state-hidden";

            //socket emit to hide the end call button on the other connected client
            socket.emit('notifyEndCallRequest');
        }, 3000);
    });

Still hopeful for how others handle such case :p

Upvotes: 1

Related Questions