What is the correct way to hang up a video call in vLine?

Question

I am currently using Client.stopMediaSessions(). Is this correct? From what I read in the documentation, and see in the examples, this seems to be the right way to do it.

This should stop both local and remote streams, correct?

What event(s) is/are fired when stopMediaSessions() is called? From my logs, it doesn’t seem that the handler for mediaStream:end is being called. Should it be? Or is enterState:closed the only event fired? Or are both fired?

My question has to do with removing the <video> elements from the DOM – both for the remote and local elements. In your example for MediaStream in the API Reference, the addStream() function handles both mediaStream:start and mediaStream:end events. However, when using this to add both local and remote streams, you can’t count on the mediaElement variable in the mediaStream:end handler because nothing ties that var to the stream, so you don’t know which element to do a removeChild() on.

Anyway, that’s not a big deal. I am just curious what the sequence of events is when a stopMediaSessions() is called; from that I can ensure the right <video> element is being removed.

But in general, I do want to know what the correct way is to hang up/terminate a video call among a set of participants.

Thanks a lot!

Answer 1

client.stopMediaSessions() will stop all vline.MediaSessions for the given vline.Client, so yes, it will "hang up" a call.

To "hang up" an audio/video session with a specific user (vline.Person), you can use Person.stopMedia().

A vline.MediaSession can have local and remote vline.MediaStreams associated with it, so by stopping a vline.MediaSession you will implicitly stop all vline.MediaStreams associated with it.

Since client.stopMediaSessions() is stopping all of the vline.MediaSession's (and therefore vline.MediaStream's), you should get both a mediaStream:end event (from the vline.MediaStream) and a enterState:closed event (from the vline.MediaSession).

For adding and removing <video> elements and keeping track of them, I'd suggest doing something similar to what the vLine shell example does. It uses the unique MediaStream ID to name the div that it puts the <video> element in:

mediaSession.on('mediaSession:addLocalStream mediaSession:addRemoteStream', function(event) {
  var stream = event.stream;

  // guard against adding a local video stream twice if it is attached to two media sessions
  if ($('#' + stream.getId()).length) {
    return;
  }

  $('#video-wrapper').append(elem);
 });

// add event handler for remove stream events
mediaSession.on('mediaSession:removeLocalStream mediaSession:removeRemoteStream', function(event) {
  $('#' + event.stream.getId()).remove();
});