muaz-khan/MultiStreamsMixer

How to show the same stream in multiple video elements or multiple div

rahul7827 opened this issue · 0 comments

this.connection.socketURL = socket_url.length > 0 ? socket_url[0].value : '';

this.connection.socketMessageEvent = 'video-broadcast-demo';

this.connection.session = {
audio: true,
video: true,
oneway: this.isPrivate == 1? false : true
};

this.connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: false,
OfferToReceiveVideo: false
};

this.connection.videosContainer = document.getElementById('videos-container');

let recordAudio, recordVideo;

this.connection.onstream = function(event) {

const existing = document.getElementById(event.streamid);
if (existing && existing.parentNode) {
existing.parentNode.removeChild(existing);
}

event.mediaElement.removeAttribute('src');
event.mediaElement.removeAttribute('srcObject');
event.mediaElement.muted = true;
event.mediaElement.volume = 0;

const video = document.createElement('video');
// const sidecam = document.createElement('video');

try {
video.setAttributeNode(document.createAttribute('autoplay'));
video.setAttributeNode(document.createAttribute('playsinline'));
} catch (e) {
video.setAttribute('autoplay', this.video_attribute);
video.setAttribute('playsinline', this.video_attribute);
}

if (event.type === 'local') {
video.volume = 0;
try {
video.setAttributeNode(document.createAttribute('muted'));
} catch (e) {
video.setAttribute('muted', this.video_attribute);
}
}
video.srcObject = event.stream;
this.camstream_id = event.streamid;

const mediaElement = getHTMLMediaElement(video, {
title: event.userid,
buttons: [],
width: '100%',
showOnMouseEnter: false
});

Array.from(document.getElementById("videos-container").childNodes).forEach((node, index) => {
if(index == 0 || index == 1){console.log(index,'index')}
else{
document.getElementById("videos-container").removeChild(node);
console.log('removing', node);
}
});

document.getElementById('videos-container').appendChild(mediaElement);

//document.getElementById('sidecam').appendChild(mediaElement);

// When i try above line, the first video gets blank, at a time only one video play.

setTimeout(() => {
mediaElement.media.play();

this.capture();

}, 5000);