Является ли «картинка в картинке» единственным способом, которым vLine использует WebRTC?

Я интегрировал vLine на тестовую площадку и заметил, что это картинка в картинке. Это единственный способ, которым это работает? Есть ли способ разделить оба потока?


person nickt    schedule 10.07.2013    source источник
comment
Не могли бы вы уточнить немного больше, пожалуйста?   -  person icedwater    schedule 10.07.2013


Ответы (1)


Режим «картинка в картинке» (PIP) возникает, когда вы включаете виджеты пользовательского интерфейса vLine, в частности uiVideoPanel виджет. Обратите внимание, что "ui": true включает все виджеты, включая виджет uiVideoPanel.

Если вы хотите разместить видеопотоки по своему усмотрению, вы можете отключить виджет uiVideoPanel и обрабатывать mediaSession:addLocalStream и mediaSession:addRemoteStream событий, где можно создать элемент HTML <video> с помощью stream.createMediaElement(). Вы можете поместить полученный элемент <video> в любой div и настроить макет с помощью CSS.

Следующий фрагмент был взят из примера vline-shell:

// $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();
  });
}
person tomtheengineer    schedule 10.07.2013