webrtc - 画中画是 vLine 做 WebRTC 的唯一方式吗？

Question

我已将 vLine 集成到一个测试站点中，我注意到它是画中画。这是唯一可行的方法吗？有没有办法让两个流分开？

Answer 1

当您启用vLine UI 小部件，特别是uiVideoPanel小部件时，会出现画中画 (PIP) 模式。请注意，"ui": true启用所有小部件，包括uiVideoPanel小部件。

如果您想以自定义方式布置视频流，您可以禁用uiVideoPanel小部件并处理mediaSession:addLocalStream和mediaSession:addRemoteStream事件，您可以在其中<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();
  });
}