Remote Streams

Remote Stream

A remote stream is the stream that a user other than the current user of Video Service published. When listening for onPublishedStreamChange events you can identify local stream events by the isLocal property being set to false.

Rendering

Within the onPublishedStreamChange event is a participant object. This object contains the MediaStream 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>

PreviousLocal Stream NextMuting/Unmuting Remote Streams

Last updated 3 years ago

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>