How to show the same stream in multiple video elements

Question

I have one WebRTC connection, And I have 4 receiving video elements in html page.

What i am getting right now is that only one video element is showing the stream other have the same settings but not showing the same stream.

What should I do in order to receive the same video stream on all video elements.

What do you mean by "the same settings" ? This is the exact same video tag with all the attributes? You could use something like $(video).clone() (with jQuery). — Ernest

Rahul Kumar Rahul Kumar · Accepted Answer · 2021-04-10T06:11:44

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

// comment-out below line if you do not have your own socket.io server
// connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

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

How to show the same stream in multiple video elements

1 Answers