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>
Last updated