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

[rahul7827]

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);