Remote Streams

PreviousLocal Stream NextMuting/Unmuting Remote Streams

Last updated 4 years ago

Rendering

Within the onPublishedStreamChange event is a object. This object contains the that is being published. You can add participant.mediaStream to a video element in your html. There will be separate events for each remote stream that is is published/unpublished.

function handleRemoteStreamChange(eventDetail) {
  if (eventDetail.isPublished) {
    let streamListContainer =  document.getElementById('published-stream-list');
    let streamContainer = document.getElementById(`stream-container-${eventDetail.participant.id}`);

    if (!streamContainer) {
      streamContainer = document.createElement("div");
      streamContainer.id = `stream-container-${eventDetail.participant.id}`
      streamListContainer.appendChild(streamContainer);
    }

    let streamElement = document.getElementById(`stream-element-${eventDetail.participant.id}`);
    if (!streamElement) {
      streamElement= document.createElement("video");
      streamElement.id = `stream-element-${eventDetail.participant.id}`
      streamElement.autoplay = true;
      streamElement.playsInline = true;
      streamContainer.appendChild(streamElement);
    }
    
    streamElement.srcObject = eventDetail.participant.mediaStream;

    let nameElement = document.getElementById(`name-element-${eventDetail.participant.id}`);
    if (!nameElement) {
      nameElement= document.createElement("div");
      nameElement.id = `name-element-${eventDetail.participant.id}`
      streamContainer.appendChild(nameElement);
    }

    let muteButton = document.getElementById(`mute-button-${eventDetail.participant.id}`);
    if (!muteButton) {
      muteButton = document.createElement("button");
      muteButton.id = `mute-button-${eventDetail.participant.id}`;
      muteButton.onclick = function(){ handleRemoteStreamMuteToggle(eventDetail.participant.id);};
      streamContainer.appendChild(muteButton);
    }
    
    muteButton.innerText = eventDetail.participant.mutedLocally ? "Unmute" : "Mute";
    nameElement.innerHTML = eventDetail.participant.name;

  } else {    
    let streamContainer= document.getElementById(`stream-container-${eventDetail.participant.id}`);
    if (streamContainer) {
      streamContainer.parentNode.removeChild(streamContainer);
    }
  }
}

function handleRemoteVideoMuteToggle(participantId) {
  
  let muteButton = document.getElementById(`mute-button-${participantId}`);
  if (muteButton) {
    let mute = muteButton.innerText == "Mute";
    aloVideo.muteParticipant(participantId, mute);
  }
  
}

function handlePublishedStreamChange(eventDetail) {
    if (eventDetail.isLocal) {
      ...
    } else {
      handleRemoteStreamChange(eventDetail);
    }
}

<html>
  
  <div id="published-stream-list">    
  </div>

</html>

Rendering

function handleRemoteStreamChange(eventDetail) {
  if (eventDetail.isPublished) {
    let streamListContainer =  document.getElementById('published-stream-list');
    let streamContainer = document.getElementById(`stream-container-${eventDetail.participant.id}`);

    if (!streamContainer) {
      streamContainer = document.createElement("div");
      streamContainer.id = `stream-container-${eventDetail.participant.id}`
      streamListContainer.appendChild(streamContainer);
    }

    let streamElement = document.getElementById(`stream-element-${eventDetail.participant.id}`);
    if (!streamElement) {
      streamElement= document.createElement("video");
      streamElement.id = `stream-element-${eventDetail.participant.id}`
      streamElement.autoplay = true;
      streamElement.playsInline = true;
      streamContainer.appendChild(streamElement);
    }
    
    streamElement.srcObject = eventDetail.participant.mediaStream;

    let nameElement = document.getElementById(`name-element-${eventDetail.participant.id}`);
    if (!nameElement) {
      nameElement= document.createElement("div");
      nameElement.id = `name-element-${eventDetail.participant.id}`
      streamContainer.appendChild(nameElement);
    }

    let muteButton = document.getElementById(`mute-button-${eventDetail.participant.id}`);
    if (!muteButton) {
      muteButton = document.createElement("button");
      muteButton.id = `mute-button-${eventDetail.participant.id}`;
      muteButton.onclick = function(){ handleRemoteStreamMuteToggle(eventDetail.participant.id);};
      streamContainer.appendChild(muteButton);
    }
    
    muteButton.innerText = eventDetail.participant.mutedLocally ? "Unmute" : "Mute";
    nameElement.innerHTML = eventDetail.participant.name;

  } else {    
    let streamContainer= document.getElementById(`stream-container-${eventDetail.participant.id}`);
    if (streamContainer) {
      streamContainer.parentNode.removeChild(streamContainer);
    }
  }
}

function handleRemoteVideoMuteToggle(participantId) {
  
  let muteButton = document.getElementById(`mute-button-${participantId}`);
  if (muteButton) {
    let mute = muteButton.innerText == "Mute";
    aloVideo.muteParticipant(participantId, mute);
  }
  
}

function handlePublishedStreamChange(eventDetail) {
    if (eventDetail.isLocal) {
      ...
    } else {
      handleRemoteStreamChange(eventDetail);
    }
}

<html>
  
  <div id="published-stream-list">    
  </div>

</html>