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.
JavaScript
Copy 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 >