const streamNameDisplayaudioStateDisplay = document.createElement("divbutton");
        streamNameDisplay.innerHTML = "Name: " + name;
coreDisplay.appendChild(audioStateDisplay);

        const streamDisplay = createContainer(coreDisplay);
        streamDisplay.id = "stream-" + id;
        const video = document.createElement("video");
        video.muted = true;
        if(Browser().isSafariWebRTC()) {
            video.setAttribute("playsinline", "");
            video.setAttribute("webkit-playsinline", "");
        }
        streamDisplay.appendChild(video);
        video.srcObject = stream;

        video.onloadedmetadata = function (e) {
            video.play();
        };
        stream.getTracks().forEach(function(track){
            track.addEventListener("ended", function() {
                video.srcObject.removeTrack(track);
                //check video element has no tracks left
                for (const [key, vTrack] of Object.entries(video.srcObject.getTracks())) {
                    if (vTrack.readyState !== "ended") {
                        return;
                    }
                }
                removeLocalDisplay(id);
            });
        });
        if (stream.getVideoTracks().length > 0) {
            // Resize only if video displayed
            video.addEventListener('resize', function (event) {
                publisherNameDisplay.innerHTML = name + " " + type + " " + video.videoWidth + "x" + video.videoHeight;
                resizeVideo(event.target);
            });
        } else {
            // Hide audio only container
            hideItem(streamDisplay);
            // Set up mute button for audio only stream
            audioStateDisplay.innerHTML = audioStateText(stream) + " " + type;
            audioStateDisplay.addEventListener("click", function() {
                onMuteClick(audioStateDisplay, stream, type);
            });
        }

        localDisplays[id] = coreDisplay;
        localDisplayDiv.appendChild(coreDisplay);
        return coreDisplay;

    const stop = function () {
        for (const [key, value] of Object.entries(localDisplays)) {
            removeLocalDisplay(value.id);
        }
    }

const initRemoteDisplay = function(options) {
    const constants = SFU.constants;
    const remoteParticipants = {};
    // Validate options first
    if (!options.div) {
        throw new Error("Main div to place all the media tag is not defined");
    }
    if (!options.room) {
        throw new Error("Room is not defined");
    }
    if (!options.peerConnection) {
        throw new Error("PeerConnection is not defined");
    }

    let mainDiv = options.div;
    let room = options.room;
    let peerConnection = options.peerConnection;
    let displayOptions = options.displayOptions || {publisher: true, quality: true, type: true};
    ...
    const createRemoteDisplay = function(id, name, mainDiv, displayOptions) {
        ...
    }

    const stop = function() {
        ...
    }

    peerConnection.ontrack = ({transceiver}) => {
        ...
    }

    return {
        stop: stop
    }
}

    room.on(constants.SFU_ROOM_EVENT.ADD_TRACKS, function(e) {
        console.log("Received ADD_TRACKS");
        let participant = remoteParticipants[e.info.nickName];
        if (!participant) {
            participant = {};
            participant.nickName = e.info.nickName;
            participant.tracks = [];
            participant.displays = [];
            remoteParticipants[participant.nickName] = participant;
        }
        participant.tracks.push.apply(participant.tracks, e.info.info);
        for (const pTrack of e.info.info) {
            let createDisplay = true;
            for (let i = 0; i < participant.displays.length; i++) {
                let display = participant.displays[i];
                if (pTrack.type === "VIDEO") {
                    if (display.hasVideo()) {
                        continue;
                    }
                    display.videoMid = pTrack.mid;
                    display.setTrackInfo(pTrack);
                    createDisplay = false;
                    break;
                } else if (pTrack.type === "AUDIO") {
                    if (display.hasAudio()) {
                        continue;
                    }
                    display.audioMid = pTrack.mid;
                    display.setTrackInfo(pTrack);
                    createDisplay = false;
                    break;
                }
            }
            if (!createDisplay) {
                continue;
            }
            let display = createRemoteDisplay(participant.nickName, participant.nickName, mainDiv, displayOptions);
            participant.displays.push(display);
            if (pTrack.type === "VIDEO") {
                display.videoMid = pTrack.mid;
                display.setTrackInfo(pTrack);
            } else if (pTrack.type === "AUDIO") {
                display.audioMid = pTrack.mid;
                display.setTrackInfo(pTrack);
            }
        }
        ...
    });

    room.on(constants.SFU_ROOM_EVENT.ADD_TRACKS, function(e) {
        ...
    }).on(constants.SFU_ROOM_EVENT.REMOVE_TRACKS, function(e) {
        console.log("Received REMOVE_TRACKS");
        const participant = remoteParticipants[e.info.nickName];
        if (!participant) {
            return;
        }
        for (const rTrack of e.info.info) {
            for (let i = 0; i < participant.tracks.length; i++) {
                if (rTrack.mid === participant.tracks[i].mid) {
                    participant.tracks.splice(i, 1);
                    break;
                }
            }
            for (let i = 0; i < participant.displays.length; i++) {
                let found = false;
                const display = participant.displays[i];
                if (display.audioMid === rTrack.mid) {
                    display.setAudio(null);
                    found = true;
                } else if (display.videoMid === rTrack.mid) {
                    display.setVideo(null);
                    found = true;
                }
                if (found) {
                    if (!display.hasAudio() && !display.hasVideo()) {
                        display.dispose();
                        participant.displays.splice(i, 1);
                    }
                    break;
                }
            }
        }
        ...
    });

    room.on(constants.SFU_ROOM_EVENT.ADD_TRACKS, function(e) {
        ...
    }).on(constants.SFU_ROOM_EVENT.LEFT, function(e) {
        console.log("Received LEFT");
        let participant = remoteParticipants[e.name];
        if (!participant) {
            return;
        }
        participant.displays.forEach(function(display){
            display.dispose();
        })
        delete remoteParticipants[e.name];
        ...
    });

    room.on(constants.SFU_ROOM_EVENT.ADD_TRACKS, function(e) {
        ... 
    }).on(constants.SFU_ROOM_EVENT.TRACK_QUALITY_STATE, function(e){
        console.log("Received track quality state");
        const participant = remoteParticipants[e.info.nickName];
        if (!participant) {
            return;
        }

        for (const rTrack of e.info.tracks) {
            const mid = rTrack.mid;
            for (let i = 0; i < participant.displays.length; i++) {
                const display = participant.displays[i];
                if (display.videoMid === mid) {
                    display.updateQualityInfo(rTrack.quality);
                    break;
                streamNameDisplay.setAttribute("class","text-center");}
        streamNameDisplay.setAttribute("style","width: auto; height: auto;");    }
        coreDisplay.appendChild(streamNameDisplay}
    });

     streamNameDisplay.innerHTML = "Name: "const +abr name + "<br/>Max.resolution: " + video.videoWidth + "x" + video.videoHeight;
= ABR(abrQualityCheckPeriod, [
            {parameter: "nackCount", maxLeap: 10},
    resizeVideo(event.target);
        });

          }
        participant.displays.forEach(setEventHandlers: function(displayvideo) {
            display.dispose();
    // Ignore   })play/pause button
        delete remoteParticipants[e.name];
    });

                if (stream == nullsetVideoABRTrack: function(track) {
                    video = nullabr.setTrack(track);
                    this.videoMid = undefined;
},

                    qualityDivs.forEach(setTrackInfo: function(divtrackInfo) {
                if (trackInfo) { 
     div.remove();
               if (trackInfo.quality) {
   });
                    qualityDivs = [] showItem(qualitySwitchDisplay);
                    return;
       if (abr.isEnabled()) {
             }
               const videoautoDiv = document.createElementcreateQualityButton("video");
                video.muted = trueAuto", qualityDivs, qualitySwitchDisplay);
                if(Browser().isSafariWebRTC()) {
           autoDiv.style.color = QUALITY_COLORS.SELECTED;
       video.setAttribute("playsinline", "");
                    videoautoDiv.setAttribute("webkit-playsinline", "");addEventListener('click', function() {
                }
                streamDisplay.appendChildsetQualityButtonsColor(videoqualityDivs);
                video.srcObject = stream;
                videoautoDiv.style.onloadedmetadatacolor = function (e) {
    QUALITY_COLORS.SELECTED;
                video.play().then(function() {
               abr.setAuto();
         video.muted = false;
                    });
                };
        }
        video.addEventListener("resize", function (event) {
             for (let i = 0; i < streamNameDisplay.innerHTML = "Published by: " + name + "<br/>Current resolution: " + video.videoWidth + "x" + video.videoHeight;
trackInfo.quality.length; i++) {
                            resizeVideoabr.addQuality(event.targettrackInfo.quality[i]);
                }            const qualityDiv = createQualityButton(trackInfo.quality[i], qualityDivs, qualitySwitchDisplay);
            },

            updateQualityInfo: function(videoQuality) {
           }
     showItem(qualitySwitchDisplay);
                for (const qualityInfo of videoQuality) {
  for (let c = 0; c < qualityDivs.length; c++) {
         let qualityColor = QUALITY_COLORS.UNAVAILABLE;
                    if (qualityDivs[c].style.color !qualityInfo.available === "red"true) {
                        qualityColor = QUALITY_COLORS.AVAILABLE;
          qualityDivs[c].style.color = "gray";
          }
                    for (const qualityDiv of qualityDivs) }{
                        if (qualityDiv.innerText   }=== qualityInfo.quality){
                            qualityDiv.style.color = "blue"qualityColor;
                            room.changeQuality(trackInfo.id, trackInfo.quality[i])  break;
                        });
                    }
    qualityDisplay.appendChild(qualityDiv);
                    }abr.setQualityAvailable(qualityInfo.quality, qualityInfo.available);
                }
            },