如何在多个视频元素中显示相同的流

Question

我有一个 WebRTC 连接，并且我在 html 页面中有 4 个接收视频元素。

我现在得到的是只有一个video 元素显示流，其他元素具有相同的设置但不显示相同的流。

我应该怎么做才能在所有 video 元素上接收相同的视频流。

Answer 1

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