Я интегрировал vLine на тестовую площадку и заметил, что это картинка в картинке. Это единственный способ, которым это работает? Есть ли способ разделить оба потока?
Является ли «картинка в картинке» единственным способом, которым vLine использует WebRTC?
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