我已经将vLine集成到一个测试站点中,我注意到它是画中画的。这是唯一的方法吗?有没有办法将两种流分开?
当您启用vLine UI小部件,特别是uiVideoPanel
小部件时,会出现画中画(PIP)模式。请注意,"ui": true
启用所有小部件,包括uiVideoPanel
小部件。
如果要以自定义方式布置视频流,可以禁用uiVideoPanel
小部件并处理mediaSession:addLocalStream
和mediaSession:addRemoteStream
事件,在其中可以使用stream.createMediaElement()
创建HTML <video>
元素。您可以将生成的<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();
});
}