Is picture-in-picture the only way vLine does WebRTC?

Question

I’ve integrated vLine into a test site and I’m noticing that it’s picture-in-picture. Is that the only way this works? Is there a way to have both streams separate?

Answer 1

The picture-in-picture (PIP) mode occurs when you enable the vLine UI widgets, specifically the uiVideoPanel widget. Note that "ui": true enables all widgets, including the uiVideoPanel widget.

If you want to lay out the video streams in a custom manner, you can disable the uiVideoPanel widget and handle the mediaSession:addLocalStream and mediaSession:addRemoteStream events, where you can create the HTML <video> element with stream.createMediaElement(). You can put the resulting <video> element in any div and adjust the layout with CSS.

The following snippet was lifted from the vline-shell example:

// $client is the vline.Client that you created with vline.Client.create()
$client.on('add:mediaSession', onAddMediaSession, self);

// callback on new MediaSessions
function addMediaSession_(mediaSession) {
  // add event handler for add stream events
  mediaSession.on('mediaSession:addLocalStream mediaSession:addRemoteStream', function(event) {
    // get the vline.MediaStream
    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;
    }

    // create video or audio element, giving it the the same id as the MediaStream
    var elem = $(event.stream.createMediaElement());
    elem.prop('id', stream.getId());

    // video-wrapper is the id of a div in the page
    $('#video-wrapper').append(elem);
  });
  // add event handler for remove stream events
  mediaSession.on('mediaSession:removeLocalStream mediaSession:removeRemoteStream', function(event) {
    $('#' + event.stream.getId()).remove();
  });
}