畫中畫是vLine做WebRTC的唯一方法嗎？

Question

我已經將vLine集成到測試網站中，並且我注意到它是畫中畫。這是唯一的方法嗎？有兩種方法可以將兩個流分開嗎？

Answer 1

當您啓用vLine UI widgets，特別是uiVideoPanel widget時，會出現畫中畫（PIP）模式。請注意，"ui": true將啓用所有小組件，包括uiVideoPanel小組件。

如果你想展示在自定義方式的視頻流，你可以禁用uiVideoPanel小部件和處理mediaSession:addLocalStream and mediaSession:addRemoteStream events，在那裏你可以stream.createMediaElement()創建HTML <video>元素。您可以將生成的<video>元素放入任何div中，然後使用CSS調整佈局。

下面的代碼片段從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(); 
    }); 
}