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

Question

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;
});

Answer 1

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