Picture-in-Picture는 vLine에서 WebRTC를 수행하는 유일한 방법입니까?

Question

vLine을 테스트 사이트에 통합했는데 그게 picture-in-picture라는 것을 알게되었습니다. 그게 유일한 방법일까요? 두 스트림을 분리하는 방법이 있습니까?

Answer 1

vLine UI widgets, 특히 uiVideoPanel widget을 활성화하면 PIP (picture-in-picture) 모드가 발생합니다. "ui": true은 uiVideoPanel 위젯을 포함하여 모든 위젯을 사용 가능하게합니다. 사용자 정의 방식으로 비디오 스트림을 배치하려면

, 당신은 uiVideoPanel 위젯을 해제하고 stream.createMediaElement()으로 HTML <video> 요소를 만들 수 mediaSession:addLocalStream and mediaSession:addRemoteStream events을 처리 할 수 ​​있습니다. 결과로 <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(); 
    }); 
}