@flashphoner/sfusdk-examples 2.0.244 → 2.0.248

package/src/commons/js/display.js

@@ -8,11 +8,11 @@ const QUALITY_COLORS = {
     SELECTED: "blue"
 };
 
-const initLocalDisplay = function(localDisplayElement){
+const initLocalDisplay = function (localDisplayElement) {
     const localDisplayDiv = localDisplayElement;
     const localDisplays = {};
 
-    const removeLocalDisplay = function(id) {
+    const removeLocalDisplay = function (id) {
         let localDisplay = document.getElementById(localDisplays[id].id);
         let video = localDisplay.getElementsByTagName("video");
         if (video && video[0]) {
@@ -24,7 +24,7 @@ const initLocalDisplay = function(localDisplayElement){
         localDisplay.remove();
     }
 
-    const getAudioContainer = function() {
+    const getAudioContainer = function () {
         for (const [key, value] of Object.entries(localDisplays)) {
             let video = value.getElementsByTagName("video");
             if (video && video[0]) {
@@ -41,24 +41,24 @@ const initLocalDisplay = function(localDisplayElement){
         }
     }
 
-    const onMuteClick = function(button, stream, type) {
+    const onMuteClick = function (button, stream, type) {
         if (stream.getAudioTracks().length > 0) {
             stream.getAudioTracks()[0].enabled = !(stream.getAudioTracks()[0].enabled);
             button.innerHTML = audioStateText(stream) + " " + type;
         }
     }
 
-    const add = function(id, name, stream, type) {
+    const add = function (id, name, stream, type) {
         if (stream.getAudioTracks().length > 0) {
             let videoElement = getAudioContainer();
             if (videoElement) {
                 let track = stream.getAudioTracks()[0];
                 videoElement.video.srcObject.addTrack(track);
                 videoElement.audioStateDisplay.innerHTML = audioStateText(stream) + " " + type;
-                videoElement.audioStateDisplay.addEventListener("click", function() {
+                videoElement.audioStateDisplay.addEventListener("click", function () {
                     onMuteClick(videoElement.audioStateDisplay, stream, type);
                 });
-                track.addEventListener("ended", function() {
+                track.addEventListener("ended", function () {
                     videoElement.video.srcObject.removeTrack(track);
                     videoElement.audioStateDisplay.innerHTML = "No audio";
                     //check video element has no tracks left
@@ -78,13 +78,14 @@ const initLocalDisplay = function(localDisplayElement){
         const publisherNameDisplay = createInfoDisplay(coreDisplay, name + " " + type);
 
         const audioStateDisplay = document.createElement("button");
+        audioStateDisplay.innerText = audioStateText();
         coreDisplay.appendChild(audioStateDisplay);
 
         const streamDisplay = createContainer(coreDisplay);
         streamDisplay.id = "stream-" + id;
         const video = document.createElement("video");
         video.muted = true;
-        if(Browser().isSafariWebRTC()) {
+        if (Browser().isSafariWebRTC()) {
             video.setAttribute("playsinline", "");
             video.setAttribute("webkit-playsinline", "");
         }
@@ -93,8 +94,8 @@ const initLocalDisplay = function(localDisplayElement){
         video.onloadedmetadata = function (e) {
             video.play();
         };
-        stream.getTracks().forEach(function(track){
-            track.addEventListener("ended", function() {
+        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())) {
@@ -116,7 +117,7 @@ const initLocalDisplay = function(localDisplayElement){
             hideItem(streamDisplay);
             // Set up mute button for audio only stream
             audioStateDisplay.innerHTML = audioStateText(stream) + " " + type;
-            audioStateDisplay.addEventListener("click", function() {
+            audioStateDisplay.addEventListener("click", function () {
                 onMuteClick(audioStateDisplay, stream, type);
             });
         }
@@ -132,7 +133,7 @@ const initLocalDisplay = function(localDisplayElement){
     }
 
     const audioStateText = function (stream) {
-        if (stream.getAudioTracks().length > 0) {
+        if (stream && stream.getAudioTracks().length > 0) {
             if (stream.getAudioTracks()[0].enabled) {
                 return "Mute";
             } else {
@@ -148,687 +149,1532 @@ const initLocalDisplay = function(localDisplayElement){
     }
 }
 
-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};
-
-    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);
-            }
-        }
-    }).on(constants.SFU_ROOM_EVENT.REMOVE_TRACKS, function(e) {
-        console.log("Received REMOVE_TRACKS");
-        const participant = remoteParticipants[e.info.nickName];
-        if (!participant) {
-            return;
+const abrManagerFactory = function (room, abrOptions) {
+    return {
+        createAbrManager: function () {
+            let abr = {
+                track: null,
+                interval: abrOptions.interval,
+                thresholds: abrOptions.thresholds,
+                qualities: [],
+                currentQualityName: null,
+                statTimer: null,
+                paused: false,
+                manual: false,
+                keepGoodTimeout: abrOptions.abrKeepOnGoodQuality,
+                keepGoodTimer: null,
+                tryUpperTimeout: abrOptions.abrTryForUpperQuality,
+                tryUpperTimer: null,
+                start: function () {
+                    this.stop();
+                    console.log("Start abr interval")
+                    if (abr.interval) {
+                        const thresholds = Thresholds();
+                        for (const threshold of abr.thresholds) {
+                            thresholds.add(threshold.parameter, threshold.maxLeap);
+                        }
+                        abr.statsTimer = setInterval(() => {
+                            if (abr.track) {
+                                room.getStats(abr.track.track, constants.SFU_RTC_STATS_TYPE.INBOUND, (stats) => {
+                                    if (thresholds.isReached(stats)) {
+                                        abr.shiftDown();
+                                    } else {
+                                        abr.useGoodQuality();
+                                    }
+                                });
+                            }
+                        }, abr.interval);
+                    }
+                },
+                stop: function () {
+                    console.log("Stop abr interval")
+                    abr.stopKeeping();
+                    abr.stopTrying();
+                    if (abr.statsTimer) {
+                        clearInterval(abr.statsTimer);
+                        abr.statsTimer = null;
+                    }
+                },
+                isEnabled: function () {
+                    return (abr.interval > 0);
+                },
+                pause: function () {
+                    abr.paused = true;
+                },
+                resume: function () {
+                    abr.paused = false;
+                },
+                setAuto: function () {
+                    abr.manual = false;
+                    abr.resume();
+                },
+                setManual: function () {
+                    abr.manual = true;
+                    abr.pause();
+                },
+                isAuto: function () {
+                    return !abr.manual;
+                },
+                setTrack: function (track) {
+                    abr.track = track;
+                },
+                setQualitiesList: function (qualities) {
+                    abr.qualities = qualities;
+                },
+                clearQualityState: function () {
+                    abr.qualities = [];
+                    abr.currentQualityName = null;
+                },
+                addQuality: function (name) {
+                    abr.qualities.push({name: name, available: false, good: true});
+                },
+                setQualityAvailable: function (name, available) {
+                    for (let i = 0; i < abr.qualities.length; i++) {
+                        if (name === abr.qualities[i].name) {
+                            abr.qualities[i].available = available;
+                        }
+                    }
+                },
+                setQualityGood: function (name, good) {
+                    if (name) {
+                        for (let i = 0; i < abr.qualities.length; i++) {
+                            if (name === abr.qualities[i].name) {
+                                abr.qualities[i].good = good;
+                            }
+                        }
+                    }
+                },
+                getFirstAvailableQuality: function () {
+                    for (let i = 0; i < abr.qualities.length; i++) {
+                        if (abr.qualities[i].available) {
+                            return abr.qualities[i];
+                        }
+                    }
+                    return null;
+                },
+                getLowerQuality: function (name) {
+                    let quality = null;
+                    if (!name) {
+                        // There were no switching yet, return a first available quality
+                        return abr.getFirstAvailableQuality();
+                    }
+                    let currentIndex = abr.qualities.map(item => item.name).indexOf(name);
+                    for (let i = 0; i < currentIndex; i++) {
+                        if (abr.qualities[i].available) {
+                            quality = abr.qualities[i];
+                        }
+                    }
+                    return quality;
+                },
+                getUpperQuality: function (name) {
+                    let quality = null;
+                    if (!name) {
+                        // There were no switching yet, return a first available quality
+                        return abr.getFirstAvailableQuality();
+                    }
+                    let currentIndex = abr.qualities.map(item => item.name).indexOf(name);
+                    for (let i = currentIndex + 1; i < abr.qualities.length; i++) {
+                        if (abr.qualities[i].available) {
+                            quality = abr.qualities[i];
+                            break;
+                        }
+                    }
+                    return quality;
+                },
+                shiftDown: function () {
+                    if (!abr.manual && !abr.paused) {
+                        abr.stopKeeping();
+                        abr.setQualityGood(abr.currentQualityName, false);
+                        let quality = abr.getLowerQuality(abr.currentQualityName);
+                        if (quality) {
+                            console.log("Switching down to " + quality.name + " quality");
+                            abr.setQuality(quality.name);
+                        }
+                    }
+                },
+                shiftUp: function () {
+                    if (!abr.manual && !abr.paused) {
+                        let quality = abr.getUpperQuality(abr.currentQualityName);
+                        if (quality) {
+                            if (quality.good) {
+                                console.log("Switching up to " + quality.name + " quality");
+                                abr.setQuality(quality.name);
+                            } else {
+                                abr.tryUpper();
+                            }
+                        }
+                    }
+                },
+                useGoodQuality: function () {
+                    if (!abr.manual && !abr.paused) {
+                        if (!abr.currentQualityName) {
+                            let quality = abr.getFirstAvailableQuality();
+                            abr.currentQualityName = quality.name;
+                        }
+                        abr.setQualityGood(abr.currentQualityName, true);
+                        abr.keepGoodQuality();
+                    }
+                },
+                keepGoodQuality: function () {
+                    if (abr.keepGoodTimeout && !abr.keepGoodTimer && abr.getUpperQuality(abr.currentQualityName)) {
+                        console.log("start keepGoodTimer");
+                        abr.keepGoodTimer = setTimeout(() => {
+                            abr.shiftUp();
+                            abr.stopKeeping();
+                        }, abr.keepGoodTimeout);
+                    }
+                },
+                stopKeeping: function () {
+                    if (abr.keepGoodTimer) {
+                        clearTimeout(abr.keepGoodTimer);
+                        abr.keepGoodTimer = null;
+                    }
+                },
+                tryUpper: function () {
+                    let quality = abr.getUpperQuality(abr.currentQualityName);
+                    if (abr.tryUpperTimeout && !abr.tryUpperTimer && quality) {
+                        abr.tryUpperTimer = setTimeout(() => {
+                            abr.setQualityGood(quality.name, true);
+                            abr.stopTrying();
+                        }, abr.tryUpperTimeout);
+                    }
+                },
+                stopTrying: function () {
+                    if (abr.tryUpperTimer) {
+                        clearTimeout(abr.tryUpperTimer);
+                        abr.tryUpperTimer = null;
+                    }
+                },
+                setQuality: async function (name) {
+                    console.log("set quality name");
+                    // Pause switching until a new quality is received
+                    abr.pause();
+                    abr.currentQualityName = name;
+                    abr.track.setPreferredQuality(abr.currentQualityName);
+                }
+            }
+            return abr;
         }
-        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;
+    }
+}
+
+
+const createDefaultMeetingModel = function (meetingView, participantFactory, displayOptions, abrFactory) {
+    return {
+        participants: new Map(),
+        meetingName: null,
+        addParticipant: function (userId, participantName) {
+            if (this.participants.get(userId)) {
+                return;
+            }
+            const [participantModel, participantView, participant] = participantFactory.createParticipant(userId, participantName, displayOptions, abrFactory);
+            this.participants.set(userId, participant);
+            meetingView.addParticipant(userId, participantName, participantView.rootDiv);
+        },
+        removeParticipant: function (userId) {
+            const participant = this.participants.get(userId);
+            if (participant) {
+                this.participants.delete(userId);
+                meetingView.removeParticipant(userId);
+                participant.dispose();
+            }
+        },
+        renameParticipant: function (userId, newNickname) {
+            const participant = this.participants.get(userId);
+            if (participant) {
+                participant.setNickname(newNickname);
+            }
+        },
+        addTracks: function (userId, tracks) {
+            const participant = this.participants.get(userId);
+            if (!participant) {
+                return;
+            }
+
+            for (const track of tracks) {
+                if (track.type === "VIDEO") {
+                    participant.addVideoTrack(track);
+                } else if (track.type === "AUDIO") {
+                    participant.addAudioTrack(track);
                 }
             }
-            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;
+        },
+        removeTracks: function (userId, tracks) {
+            const participant = this.participants.get(userId);
+            if (!participant) {
+                return;
+            }
+            for (const track of tracks) {
+                if (track.type === "VIDEO") {
+                    participant.removeVideoTrack(track);
+                } else if (track.type === "AUDIO") {
+                    participant.removeAudioTrack(track);
                 }
-                if (found) {
-                    if (!display.hasAudio() && !display.hasVideo()) {
-                        display.dispose();
-                        participant.displays.splice(i, 1);
+            }
+        },
+        updateQualityInfo: function (userId, tracksInfo) {
+            const participant = this.participants.get(userId);
+            if (!participant) {
+                return;
+            }
+            participant.updateQualityInfo(tracksInfo);
+        },
+        end: function () {
+            console.log("Meeting " + this.meetingName + " ended")
+            meetingView.end();
+            this.participants.forEach((participant, id) => {
+                participant.dispose();
+            });
+            this.participants.clear();
+        },
+        setMeetingName: function (id) {
+            this.meetingName = id;
+            meetingView.setMeetingName(id);
+        }
+    }
+}
+
+const createDefaultMeetingView = function (entryPoint) {
+    const rootDiv = document.createElement("div");
+    rootDiv.setAttribute("class", "grid-item");
+    entryPoint.appendChild(rootDiv);
+    const title = document.createElement("label");
+    title.setAttribute("style", "display:block; border: solid; border-width: 1px");
+    rootDiv.appendChild(title);
+    return {
+        participantViews: new Map(),
+        setMeetingName: function (id) {
+            title.innerText = "Meeting: " + id;
+        },
+        addParticipant: function (userId, participantName, cell) {
+            const participantDiv = createContainer(rootDiv);
+            participantDiv.appendChild(cell);
+            this.participantViews.set(userId, participantDiv);
+        },
+        removeParticipant: function (userId) {
+            const cell = this.participantViews.get(userId);
+            if (cell) {
+                this.participantViews.delete(userId);
+                cell.remove();
+            }
+        },
+        end: function () {
+            rootDiv.remove();
+        }
+    }
+}
+const oneToOneParticipantFactory = function (remoteTrackFactory) {
+    return createParticipantFactory(remoteTrackFactory, createOneToOneParticipantView, createOneToOneParticipantModel);
+}
+const createParticipantFactory = function (remoteTrackFactory, createParticipantView, createParticipantModel) {
+    return {
+        displayOptions: null,
+        abrFactory: null,
+        createParticipant: function (userId, nickname) {
+            const view = createParticipantView();
+            const model = createParticipantModel(userId, nickname, view, remoteTrackFactory, this.abrFactory, this.displayOptions);
+            const controller = createParticipantController(model);
+            return [model, view, controller];
+        }
+    }
+}
+
+const createParticipantController = function (model) {
+    return {
+        addVideoTrack: function (track) {
+            model.addVideoTrack(track);
+        },
+        removeVideoTrack: function (track) {
+            model.removeVideoTrack(track);
+        },
+        addAudioTrack: function (track) {
+            model.addAudioTrack(track);
+        },
+        removeAudioTrack: function (track) {
+            model.removeAudioTrack(track);
+        },
+        updateQualityInfo: function (qualityInfo) {
+            model.updateQualityInfo(qualityInfo);
+        },
+        setNickname: function (nickname) {
+            model.setNickname(nickname);
+        },
+        dispose: function () {
+            model.dispose();
+        }
+    }
+}
+
+const createOneToManyParticipantView = function () {
+
+    const participantDiv = createContainer(null);
+
+    const audioDisplay = createContainer(participantDiv);
+
+    const participantNicknameDisplay = createInfoDisplay(participantDiv, "Name: ")
+
+    const audioElements = new Map();
+    const player = createVideoPlayer(participantDiv);
+
+    return {
+        rootDiv: participantDiv,
+        currentTrack: null,
+        dispose: function () {
+            player.dispose();
+            for (const element of audioElements.values()) {
+                element.remove();
+            }
+            audioElements.clear();
+        },
+        addVideoTrack: function (track, requestVideoTrack) {
+            player.addVideoTrack(track, async () => {
+                return requestVideoTrack();
+            });
+        },
+        removeVideoTrack: function (track) {
+            player.removeVideoTrack(track);
+        },
+        addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler) {
+            this.currentTrack = track;
+            player.setVideoSource(remoteVideoTrack, onResize, muteHandler);
+        },
+        removeVideoSource: function (track) {
+            if (this.currentTrack && this.currentTrack.mid === track.mid) {
+                player.removeVideoSource();
+            }
+        },
+        showVideoTrack: function (track) {
+            player.showVideoTrack(track);
+        },
+        addAudioTrack: function (track, audioTrack, show) {
+            const stream = new MediaStream();
+            stream.addTrack(audioTrack);
+            const audioElement = document.createElement("audio");
+            if (!show) {
+                hideItem(audioElement);
+            }
+            audioElement.controls = "controls";
+            audioElement.muted = true;
+            audioElement.autoplay = true;
+            audioElement.onloadedmetadata = function (e) {
+                audioElement.play().then(function () {
+                    if (Browser().isSafariWebRTC() && Browser().isiOS()) {
+                        console.warn("Audio track should be manually unmuted in iOS Safari");
+                    } else {
+                        audioElement.muted = false;
                     }
-                    break;
-                }
+                });
+            };
+            audioElements.set(track.mid, audioElement);
+            audioDisplay.appendChild(audioElement);
+            audioElement.srcObject = stream;
+        },
+        removeAudioTrack: function (track) {
+            const audioElement = audioElements.get(track.mid);
+            if (audioElement) {
+                audioElement.remove();
+                audioElements.delete(track.mid);
             }
+        },
+        setNickname: function (userId, nickname) {
+            const additionalUserId = userId ? "#" + getShortUserId(userId) : "";
+            participantNicknameDisplay.innerText = "Name: " + nickname + additionalUserId;
+        },
+        updateQuality: function (track, qualityName, available) {
+            player.updateQuality(qualityName, available);
+        },
+        addQuality: function (track, qualityName, available, onQualityPick) {
+            player.addQuality(qualityName, available, onQualityPick);
+        },
+        clearQualityState: function (track) {
+            player.clearQualityState();
+        },
+        pickQuality: function (track, qualityName) {
+            player.pickQuality(qualityName);
         }
-    }).on(constants.SFU_ROOM_EVENT.LEFT, function(e) {
-        console.log("Received LEFT");
-        let participant = remoteParticipants[e.name];
-        if (!participant) {
-            return;
+    }
+}
+
+const createVideoPlayer = function (participantDiv) {
+
+    const streamDisplay = createContainer(participantDiv);
+
+    const resolutionLabel = createInfoDisplay(streamDisplay, "0x0");
+    hideItem(resolutionLabel);
+
+    const trackNameDisplay = createInfoDisplay(streamDisplay, "track not set");
+    hideItem(trackNameDisplay);
+
+    const videoMuteDisplay = createContainer(streamDisplay);
+
+    const qualityDisplay = createContainer(streamDisplay);
+
+    const trackDisplay = createContainer(streamDisplay);
+
+    let videoElement;
+
+    const trackButtons = new Map();
+    const qualityButtons = new Map();
+
+    const lock = function () {
+        for (const btn of trackButtons.values()) {
+            btn.disabled = true;
         }
-        participant.displays.forEach(function(display){
-            display.dispose();
-        })
-        delete remoteParticipants[e.name];
-    }).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 state of qualityButtons.values()) {
+            state.btn.disabled = true;
+        }
+    }
+
+    const unlock = function () {
+        for (const btn of trackButtons.values()) {
+            btn.disabled = false;
+        }
+        for (const state of qualityButtons.values()) {
+            state.btn.disabled = false;
         }
+    }
+
+    const setWebkitEventHandlers = function (video) {
+        let needRestart = false;
+        let isFullscreen = false;
+        // Use webkitbeginfullscreen event to detect full screen mode in iOS Safari
+        video.addEventListener("webkitbeginfullscreen", function () {
+            isFullscreen = true;
+        });
+        video.addEventListener("pause", function () {
+            if (needRestart) {
+                console.log("Media paused after fullscreen, continue...");
+                video.play();
+                needRestart = false;
+            } else {
+                console.log("Media paused by click, continue...");
+                video.play();
+            }
+        });
+        video.addEventListener("webkitendfullscreen", function () {
+            video.play();
+            needRestart = true;
+            isFullscreen = false;
+        });
+    }
+    const setEventHandlers = function (video) {
+        // Ignore play/pause button
+        video.addEventListener("pause", function () {
+            console.log("Media paused by click, continue...");
+            video.play();
+        });
+    }
 
-        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;
+    const repickQuality = function (qualityName) {
+        for (const [quality, state] of qualityButtons.entries()) {
+            if (quality === qualityName) {
+                state.btn.style.color = QUALITY_COLORS.SELECTED;
+            } else if (state.btn.style.color === QUALITY_COLORS.SELECTED) {
+                if (state.available) {
+                    state.btn.style.color = QUALITY_COLORS.AVAILABLE;
+                } else {
+                    state.btn.style.color = QUALITY_COLORS.UNAVAILABLE;
                 }
             }
         }
-    });
+    }
 
-    const createRemoteDisplay = function(id, name, mainDiv, displayOptions) {
-        const cell = document.createElement("div");
-        cell.setAttribute("class", "text-center");
-        cell.id = id;
-        mainDiv.appendChild(cell);
-        let publisherNameDisplay;
-        let currentQualityDisplay;
-        let videoTypeDisplay;
-        let abrQualityCheckPeriod = ABR_QUALITY_CHECK_PERIOD;
-        let abrKeepOnGoodQuality = ABR_KEEP_ON_QUALITY;
-        let abrTryForUpperQuality = ABR_TRY_UPPER_QUALITY;
-        if (displayOptions.abrQualityCheckPeriod !== undefined) {
-            abrQualityCheckPeriod = displayOptions.abrQualityCheckPeriod;
-        }
-        if (displayOptions.abrKeepOnGoodQuality !== undefined) {
-            abrKeepOnGoodQuality = displayOptions.abrKeepOnGoodQuality;
-        }
-        if (displayOptions.abrTryForUpperQuality !== undefined) {
-            abrTryForUpperQuality = displayOptions.abrTryForUpperQuality;
-        }
-        if (!displayOptions.abr) {
-            abrQualityCheckPeriod = 0;
-            abrKeepOnGoodQuality = 0;
-            abrTryForUpperQuality = 0;
-        }
-        if (displayOptions.publisher) {
-            publisherNameDisplay = createInfoDisplay(cell, "Published by: " + name);
-        }
-        if (displayOptions.quality) {
-            currentQualityDisplay = createInfoDisplay(cell, "");
-        }
-        if (displayOptions.type) {
-            videoTypeDisplay = createInfoDisplay(cell, "");
-        }
-        const qualitySwitchDisplay = createInfoDisplay(cell, "");
-
-        let qualityDivs = [];
-        let contentType = "";
-
-        const rootDisplay = createContainer(cell);
-        const streamDisplay = createContainer(rootDisplay);
-        const audioDisplay = createContainer(rootDisplay);
-        const audioTypeDisplay = createInfoDisplay(audioDisplay);
-        const audioTrackDisplay = createContainer(audioDisplay);
-        const audioStateButton = AudioStateButton();
-
-        hideItem(streamDisplay);
-        hideItem(audioDisplay);
-        hideItem(publisherNameDisplay);
-        hideItem(currentQualityDisplay);
-        hideItem(videoTypeDisplay);
-        hideItem(qualitySwitchDisplay);
-
-        let audio = null;
-        let video = null;
-
-        const abr = ABR(abrQualityCheckPeriod, [
-            {parameter: "nackCount", maxLeap: 10},
-            {parameter: "freezeCount", maxLeap: 10},
-            {parameter: "packetsLost", maxLeap: 10}
-        ], abrKeepOnGoodQuality, abrTryForUpperQuality);
-
-        return {
-            dispose: function() {
-                abr.stop();
-                cell.remove();
-            },
-            hide: function(value) {
-                if (value) {
-                    cell.style.display = "none";
-                } else {
-                    cell.style.display = "block";
+    return {
+        rootDiv: streamDisplay,
+        muteButton: null,
+        autoButton: null,
+        dispose: function () {
+            streamDisplay.remove();
+        },
+        clearQualityState: function () {
+            qualityButtons.forEach((state, qName) => {
+                state.btn.remove();
+            });
+            qualityButtons.clear();
+        },
+        addVideoTrack: function (track, asyncCallback) {
+            const trackButton = document.createElement("button");
+            trackButtons.set(track.mid, trackButton);
+            trackButton.innerText = "Track №" + track.mid + ": " + track.contentType;
+            trackButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+            trackButton.style.color = QUALITY_COLORS.AVAILABLE;
+            const self = this;
+            trackButton.addEventListener('click', async function () {
+                console.log("Clicked on track button track.mid " + track.mid);
+                if (trackButton.style.color === QUALITY_COLORS.SELECTED) {
+                    return
+                }
+
+                lock();
+                asyncCallback().then(() => {
+                    self.showVideoTrack(track);
+                }).finally(() => {
+                    unlock();
+                });
+            });
+            trackDisplay.appendChild(trackButton);
+        },
+        removeVideoTrack: function (track) {
+            const trackButton = trackButtons.get(track.mid);
+            if (trackButton) {
+                trackButton.remove();
+                trackButtons.delete(track.mid);
+            }
+        },
+        setVideoSource: function (remoteVideoTrack, onResize, onMute) {
+            if (!this.muteButton) {
+                const newVideoMuteBtn = document.createElement("button");
+                this.muteButton = newVideoMuteBtn;
+                newVideoMuteBtn.innerText = "mute";
+                newVideoMuteBtn.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+                newVideoMuteBtn.addEventListener('click', async function () {
+                    newVideoMuteBtn.disabled = true;
+                    try {
+                        if (newVideoMuteBtn.innerText === "mute") {
+                            await onMute(true);
+                            newVideoMuteBtn.innerText = "unmute";
+                        } else if (newVideoMuteBtn.innerText === "unmute") {
+                            await onMute(false);
+                            newVideoMuteBtn.innerText = "mute";
+                        }
+                    } finally {
+                        newVideoMuteBtn.disabled = false;
+                    }
+                });
+                videoMuteDisplay.appendChild(newVideoMuteBtn);
+            }
+
+            if (videoElement) {
+                videoElement.remove();
+                videoElement = null;
+            }
+
+            if (!remoteVideoTrack) {
+                return;
+            }
+
+            videoElement = document.createElement("video");
+            hideItem(videoElement);
+            videoElement.setAttribute("style", "display:none; border: solid; border-width: 1px");
+
+            const stream = new MediaStream();
+
+            streamDisplay.appendChild(videoElement);
+            videoElement.srcObject = stream;
+            videoElement.onloadedmetadata = function (e) {
+                videoElement.play();
+            };
+            videoElement.addEventListener("resize", function (event) {
+                showItem(resolutionLabel);
+                if (videoElement) {
+                    resolutionLabel.innerText = videoElement.videoWidth + "x" + videoElement.videoHeight;
+                    resizeVideo(event.target);
+                    onResize();
                 }
-            },
-            setAudio: function(stream) {
-                if (audio) {
-                    audio.remove();
+            });
+            stream.addTrack(remoteVideoTrack);
+            if (Browser().isSafariWebRTC()) {
+                videoElement.setAttribute("playsinline", "");
+                videoElement.setAttribute("webkit-playsinline", "");
+                setWebkitEventHandlers(videoElement);
+            } else {
+                setEventHandlers(videoElement);
+            }
+        },
+        removeVideoSource: function () {
+            if (videoElement) {
+                videoElement.remove();
+                videoElement = null;
+            }
+            if (this.muteButton) {
+                this.muteButton.remove();
+                this.muteButton = null;
+            }
+            hideItem(resolutionLabel);
+            trackNameDisplay.innerText = "track not set";
+        },
+        showVideoTrack: function (track) {
+            if (videoElement) {
+                showItem(videoElement);
+            }
+            for (const [mid, btn] of trackButtons.entries()) {
+                if (mid === track.mid) {
+                    btn.style.color = QUALITY_COLORS.SELECTED;
+                } else if (btn.style.color === QUALITY_COLORS.SELECTED) {
+                    btn.style.color = QUALITY_COLORS.AVAILABLE;
                 }
-                if (!stream) {
-                    audio = null;
-                    this.audioMid = undefined;
+            }
+            trackNameDisplay.innerText = "Current video track: " + track.mid;
+            showItem(trackNameDisplay);
+        },
+        updateQuality: function (qualityName, available) {
+            const value = qualityButtons.get(qualityName);
+            if (value) {
+                const qualityButton = value.btn;
+                value.available = available;
+                if (qualityButton.style.color === QUALITY_COLORS.SELECTED) {
                     return;
                 }
-                showItem(audioDisplay);
-                audio = document.createElement("audio");
-                audio.controls = "controls";
-                audio.muted = true;
-                audio.autoplay = true;
-                if (Browser().isSafariWebRTC()) {
-                    audio.setAttribute("playsinline", "");
-                    audio.setAttribute("webkit-playsinline", "");
-                    this.setWebkitEventHandlers(audio);
+                if (available) {
+                    qualityButton.style.color = QUALITY_COLORS.AVAILABLE;
                 } else {
-                    this.setEventHandlers(audio);
-                }
-                audioTrackDisplay.appendChild(audio);
-                audioStateButton.makeButton(audioTypeDisplay, audio);
-                audio.srcObject = stream;
-                audio.onloadedmetadata = function (e) {
-                    audio.play().then(function() {
-                        if (Browser().isSafariWebRTC() && Browser().isiOS()) {
-                            console.warn("Audio track should be manually unmuted in iOS Safari");
+                    qualityButton.style.color = QUALITY_COLORS.UNAVAILABLE;
+                }
+            }
+        },
+        addQuality: function (qualityName, available, onPickQuality) {
+            const qualityButton = document.createElement("button");
+            qualityButtons.set(qualityName, {btn: qualityButton, available: available});
+            qualityButton.innerText = qualityName;
+            qualityButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+            if (available) {
+                qualityButton.style.color = QUALITY_COLORS.AVAILABLE;
+            } else {
+                qualityButton.style.color = QUALITY_COLORS.UNAVAILABLE;
+            }
+            qualityDisplay.appendChild(qualityButton);
+            qualityButton.addEventListener('click', async function () {
+                console.log("Clicked on quality button " + qualityName);
+                if (qualityButton.style.color === QUALITY_COLORS.SELECTED || qualityButton.style.color === QUALITY_COLORS.UNAVAILABLE || !videoElement) {
+                    return;
+                }
+                lock();
+                onPickQuality().finally(() => unlock());
+            });
+        },
+        pickQuality: function (qualityName) {
+            repickQuality(qualityName);
+        }
+    }
+}
+
+const createOneToOneParticipantView = function () {
+
+    const participantDiv = createContainer(null);
+
+    const audioDisplay = createContainer(participantDiv);
+
+    const participantNicknameDisplay = createInfoDisplay(participantDiv, "Name: ")
+
+    const videoPlayers = new Map();
+    const audioElements = new Map();
+
+    return {
+        rootDiv: participantDiv,
+        dispose: function () {
+            for (const player of videoPlayers.values()) {
+                player.dispose();
+            }
+            videoPlayers.clear();
+            for (const element of audioElements.values()) {
+                element.remove();
+            }
+            audioElements.clear();
+        },
+        addVideoTrack: function (track) {
+            const player = createVideoPlayer(participantDiv);
+            videoPlayers.set(track.mid, player);
+        },
+        removeVideoTrack: function (track) {
+            const player = videoPlayers.get(track.mid);
+            if (player) {
+                player.dispose();
+            }
+        },
+        addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler) {
+            const player = videoPlayers.get(track.mid);
+            if (player) {
+                player.setVideoSource(remoteVideoTrack, onResize, muteHandler);
+            }
+        },
+        removeVideoSource: function (track) {
+            const player = videoPlayers.get(track.mid);
+            if (player) {
+                player.removeVideoSource();
+            }
+        },
+        showVideoTrack: function (track) {
+            const player = videoPlayers.get(track.mid);
+            if (player) {
+                player.showVideoTrack(track);
+            }
+        },
+        addAudioTrack: function (track, audioTrack, show) {
+            const stream = new MediaStream();
+            stream.addTrack(audioTrack);
+            const audioElement = document.createElement("audio");
+            if (!show) {
+                hideItem(audioElement);
+            }
+            audioElement.controls = "controls";
+            audioElement.muted = true;
+            audioElement.autoplay = true;
+            audioElement.onloadedmetadata = function (e) {
+                audioElement.play().then(function () {
+                    if (Browser().isSafariWebRTC() && Browser().isiOS()) {
+                        console.warn("Audio track should be manually unmuted in iOS Safari");
+                    } else {
+                        audioElement.muted = false;
+                    }
+                });
+            };
+            audioElements.set(track.mid, audioElement);
+            audioDisplay.appendChild(audioElement);
+            audioElement.srcObject = stream;
+        },
+        removeAudioTrack: function (track) {
+            const audioElement = audioElements.get(track.mid);
+            if (audioElement) {
+                audioElement.remove();
+                audioElements.delete(track.mid);
+            }
+        },
+        setNickname: function (userId, nickname) {
+            const additionalUserId = userId ? "#" + getShortUserId(userId) : "";
+            participantNicknameDisplay.innerText = "Name: " + nickname + additionalUserId;
+        },
+        updateQuality: function (track, qualityName, available) {
+            const player = videoPlayers.get(track.mid);
+            if (player) {
+                player.updateQuality(qualityName, available);
+            }
+        },
+        addQuality: function (track, qualityName, available, onQualityPick) {
+            const player = videoPlayers.get(track.mid);
+            if (player) {
+                player.addQuality(qualityName, available, onQualityPick);
+            }
+        },
+        pickQuality: function (track, qualityName) {
+            const player = videoPlayers.get(track.mid);
+            if (player) {
+                player.pickQuality(qualityName);
+            }
+        }
+    }
+}
+const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) {
+    const instance = {
+        userId: userId,
+        nickname: nickname,
+        remoteVideoTracks: new Map(),
+        remoteAudioTracks: new Map(),
+        audioTracks: new Map(),
+        videoTracks: new Map(),
+        abrManagers: new Map(),
+        disposed: false,
+        dispose: async function () {
+            this.disposed = true;
+            participantView.dispose();
+            this.remoteVideoTracks.forEach((track, id) => {
+                track.dispose();
+            })
+            this.remoteVideoTracks.clear();
+
+            this.remoteAudioTracks.forEach((track, id) => {
+                track.dispose();
+            })
+            this.remoteAudioTracks.clear();
+
+            this.abrManagers.forEach((abrManager, id) => {
+                abrManager.stop();
+            })
+            this.abrManagers.clear();
+
+        },
+        addVideoTrack: function (track) {
+            this.videoTracks.set(track.mid, track);
+            if (!track.quality) {
+                track.quality = [];
+            }
+            participantView.addVideoTrack(track);
+            const self = this;
+            remoteTrackFactory.getVideoTrack().then((remoteTrack) => {
+                if (remoteTrack) {
+                    if (self.disposed || !self.videoTracks.get(track.mid)) {
+                        remoteTrack.dispose();
+                        return;
+                    }
+
+                    participantView.addVideoSource(remoteTrack.track, track, () => {
+                        const abrManager = self.abrManagers.get(track.id);
+                        if (!abrManager) {
+                            return;
+                        }
+                        if (abrManager.isAuto()) {
+                            abrManager.resume();
+                        }
+                    }, (mute) => {
+                        if (mute) {
+                            return self.muteVideo(track);
                         } else {
-                            audio.muted = false;
-                            audioStateButton.setButtonState();
+                            return self.unmuteVideo(track);
                         }
                     });
-                };
-            },
-            hasAudio: function() {
-                return audio !== null || this.audioMid !== undefined;
-            },
-            setVideo: function(stream) {
-                if (video) {
-                    video.remove();
-                }
-
-                if (stream == null) {
-                    video = null;
-                    this.videoMid = undefined;
-                    qualityDivs.forEach(function(div) {
-                        div.remove();
+                    self.requestVideoTrack(track, remoteTrack).then(() => {
+                        participantView.showVideoTrack(track);
+                    }, (ex) => {
+                        participantView.removeVideoSource(track);
+                        remoteTrack.dispose();
                     });
-                    qualityDivs = [];
-                    return;
                 }
-                showItem(streamDisplay);
-                video = document.createElement("video");
-                video.controls = "controls";
-                video.muted = true;
-                video.autoplay = true;
-                if (Browser().isSafariWebRTC()) {
-                    video.setAttribute("playsinline", "");
-                    video.setAttribute("webkit-playsinline", "");
-                    this.setWebkitEventHandlers(video);
-                } else {
-                    this.setEventHandlers(video);
-                }
-                streamDisplay.appendChild(video);
-                video.srcObject = stream;
-                this.setResizeHandler(video);
-                abr.start();
-            },
-            setTrackInfo: function(trackInfo) {
-                if (trackInfo) { 
-                    if (trackInfo.quality) {
-                        showItem(qualitySwitchDisplay);
-                        if (abr.isEnabled()) {
-                            const autoDiv = createQualityButton("Auto", qualityDivs, qualitySwitchDisplay);
-                            autoDiv.style.color = QUALITY_COLORS.SELECTED;
-                            autoDiv.addEventListener('click', function() {
-                                setQualityButtonsColor(qualityDivs);
-                                autoDiv.style.color = QUALITY_COLORS.SELECTED;
-                                abr.setAuto();
-                            });
-                        }
-                        for (let i = 0; i < trackInfo.quality.length; i++) {
-                            abr.addQuality(trackInfo.quality[i]);
-                            const qualityDiv = createQualityButton(trackInfo.quality[i], qualityDivs, qualitySwitchDisplay);
-                            qualityDiv.addEventListener('click', function() {
-                                console.log("Clicked on quality " + trackInfo.quality[i] + " trackId " + trackInfo.id);
-                                if (qualityDiv.style.color === QUALITY_COLORS.UNAVAILABLE) {
-                                    return;
-                                }
-                                setQualityButtonsColor(qualityDivs);
-                                qualityDiv.style.color = QUALITY_COLORS.SELECTED;
-                                abr.setManual();
-                                abr.setQuality(trackInfo.quality[i]);
-                            });
-                        }
-                    } else {
-                        hideItem(qualitySwitchDisplay);
+            }, (ex) => {
+                console.log("Failed to get remote track " + ex);
+            });
+        },
+        removeVideoTrack: function (track) {
+            if (this.videoTracks.delete(track.mid)) {
+                const remoteTrack = this.remoteVideoTracks.get(track.mid);
+                if (remoteTrack) {
+                    this.remoteVideoTracks.delete(track.mid);
+                    remoteTrack.dispose();
+                }
+                participantView.removeVideoTrack(track);
+
+                const abrManager = this.abrManagers.get(track.id);
+                if (abrManager) {
+                    this.abrManagers.delete(track.id);
+                    abrManager.clearQualityState();
+                    abrManager.stop();
+                }
+            }
+        },
+        addAudioTrack: function (track) {
+            this.audioTracks.set(track.mid, track);
+            const self = this;
+            remoteTrackFactory.getAudioTrack().then((remoteTrack) => {
+                if (remoteTrack) {
+                    if (self.disposed || !self.audioTracks.get(track.mid)) {
+                        remoteTrack.dispose();
+                        return;
                     }
-                    if (trackInfo.type) {
-                        contentType = trackInfo.contentType || "";
-                        if (trackInfo.type == "VIDEO" && displayOptions.type && contentType !== "") {
-                            showItem(videoTypeDisplay);
-                            videoTypeDisplay.innerHTML = contentType;
+                    this.remoteAudioTracks.set(track.mid, remoteTrack);
+                    remoteTrack.demandTrack(track.id).then(() => {
+                        if (!self.audioTracks.get(track.mid)) {
+                            remoteTrack.dispose();
+                            self.remoteAudioTracks.delete(track.mid);
+                            return;
                         }
-                        if (trackInfo.type == "AUDIO") {
-                            audioStateButton.setContentType(contentType);
+                        participantView.addAudioTrack(track, remoteTrack.track, displayOptions.showAudio);
+                    }, (ex) => {
+                        console.log("Failed demand track " + ex);
+                        remoteTrack.dispose();
+                        self.remoteAudioTracks.delete(track.mid);
+                    });
+                }
+            }, (ex) => {
+                console.log("Failed to get audio track " + ex);
+            });
+        },
+        removeAudioTrack: function (track) {
+            if (!this.audioTracks.delete(track.mid)) {
+                return
+            }
+
+            participantView.removeAudioTrack(track);
+            const remoteTrack = this.remoteAudioTracks.get(track.mid);
+            if (remoteTrack) {
+                this.remoteAudioTracks.delete(track.mid);
+                remoteTrack.dispose();
+            }
+        },
+        setUserId: function (userId) {
+            this.userId = userId;
+        },
+        setNickname: function (nickname) {
+            this.nickname = nickname;
+            participantView.setNickname(this.userId ? this.userId : "", nickname);
+        },
+        updateQualityInfo: function (remoteTracks) {
+            for (const remoteTrackQuality of remoteTracks) {
+                const track = this.videoTracks.get(remoteTrackQuality.mid);
+                if (!track) {
+                    continue;
+                }
+                if (!this.remoteVideoTracks.get(track.mid)) {
+                    // update model and return, view not changed
+                    for (const remoteQualityInfo of remoteTrackQuality.quality) {
+                        const quality = track.quality.find((q) => q.quality === remoteQualityInfo.quality);
+                        if (quality) {
+                            quality.available = remoteQualityInfo.available;
+                        } else {
+                            track.quality.push(remoteQualityInfo);
                         }
                     }
+                    return;
                 }
-            },
-            updateQualityInfo: function(videoQuality) {
-                showItem(qualitySwitchDisplay);
-                for (const qualityInfo of videoQuality) {
-                    let qualityColor = QUALITY_COLORS.UNAVAILABLE;
-                    if (qualityInfo.available === true) {
-                        qualityColor = QUALITY_COLORS.AVAILABLE;
+                let abrManager = this.abrManagers.get(track.id);
+                if (abrManager && track.quality.length === 0 && remoteTrackQuality.quality.length > 0) {
+                    const self = this;
+                    participantView.addQuality(track, "Auto", true, async () => {
+                        const manager = self.abrManagers.get(track.id);
+                        if (!manager) {
+                            return;
+                        }
+                        manager.start();
+                        manager.setAuto();
+                        participantView.pickQuality(track, "Auto");
+                    })
+                    if (displayOptions.autoAbr) {
+                        abrManager.setAuto();
+                        abrManager.start();
+                        participantView.pickQuality(track, "Auto");
                     }
-                    for (const qualityDiv of qualityDivs) {
-                        if (qualityDiv.innerText === qualityInfo.quality){
-                            qualityDiv.style.color = qualityColor;
-                            break;
+                }
+                for (const remoteQualityInfo of remoteTrackQuality.quality) {
+                    const localQuality = track.quality.find((q) => q.quality === remoteQualityInfo.quality);
+                    if (localQuality) {
+                        localQuality.available = remoteQualityInfo.available;
+                        if (abrManager) {
+                            abrManager.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available);
+                        }
+                        if (displayOptions.quality) {
+                            participantView.updateQuality(track, localQuality.quality, localQuality.available);
+                        }
+                    } else {
+                        track.quality.push(remoteQualityInfo);
+                        if (abrManager) {
+                            abrManager.addQuality(remoteQualityInfo.quality);
+                            abrManager.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available)
+                        }
+                        if (displayOptions.quality) {
+                            const self = this;
+                            participantView.addQuality(track, remoteQualityInfo.quality, remoteQualityInfo.available, async () => {
+                                const manager = self.abrManagers.get(track.id);
+                                if (manager) {
+                                    manager.setManual();
+                                    manager.setQuality(remoteQualityInfo.quality);
+                                }
+                                return self.pickQuality(track, remoteQualityInfo.quality);
+                            });
                         }
                     }
-                    abr.setQualityAvailable(qualityInfo.quality, qualityInfo.available);
                 }
-            },
-            hasVideo: function() {
-                return video !== null || this.videoMid !== undefined;
-            },
-            setResizeHandler: function(video) {
-                video.addEventListener("resize", function (event) {
-                    if (displayOptions.publisher) {
-                        showItem(publisherNameDisplay);
-                        publisherNameDisplay.innerHTML = "Published by: " + name;
+            }
+
+        },
+        requestVideoTrack: async function (track, remoteTrack) {
+            return new Promise((resolve, reject) => {
+                if (!remoteTrack || !track) {
+                    reject(new Error("Remote and local track must be defined"));
+                    return;
+                }
+                const self = this;
+                remoteTrack.demandTrack(track.id).then(() => {
+                    if (!self.videoTracks.get(track.mid)) {
+                        reject(new Error("Video track already removed from model"));
+                        return;
                     }
-                    if (displayOptions.quality) {
-                        showItem(currentQualityDisplay);
-                        currentQualityDisplay.innerHTML = video.videoWidth + "x" + video.videoHeight;
+                    let abrManager = self.abrManagers.get(track.id);
+
+                    if (abrManager) {
+                        abrManager.clearQualityState();
+                    } else if (abrFactory) {
+                        abrManager = abrFactory.createAbrManager();
+                        self.abrManagers.set(track.id, abrManager);
                     }
-                    resizeVideo(event.target);
-                    // Received a new quality, resume ABR is enabled
-                    if (abr.isAuto()) {
-                        abr.resume();
+
+                    if (abrManager) {
+                        abrManager.setTrack(remoteTrack);
+                        abrManager.stop();
+                        if (track.quality.length > 0) {
+                            participantView.addQuality(track, "Auto", true, async () => {
+                                const manager = self.abrManagers.get(track.id);
+                                if (!manager) {
+                                    return;
+                                }
+                                manager.start();
+                                manager.setAuto();
+                                participantView.pickQuality(track, "Auto");
+                            });
+                            if (displayOptions.autoAbr) {
+                                abrManager.setAuto();
+                                abrManager.start();
+                                participantView.pickQuality(track, "Auto");
+                            }
+                        }
                     }
+                    for (const qualityDescriptor of track.quality) {
+                        if (abrManager) {
+                            abrManager.addQuality(qualityDescriptor.quality);
+                            abrManager.setQualityAvailable(qualityDescriptor.quality, qualityDescriptor.available);
+                        }
+                        if (displayOptions.quality) {
+                            participantView.addQuality(track, qualityDescriptor.quality, qualityDescriptor.available, async () => {
+                                const manager = self.abrManagers.get(track.id);
+                                if (manager) {
+                                    manager.setManual();
+                                    manager.setQuality(qualityDescriptor.quality);
+                                }
+                                return self.pickQuality(track, qualityDescriptor.quality);
+                            });
+                        }
+                    }
+                    self.remoteVideoTracks.delete(track.mid);
+                    self.remoteVideoTracks.set(track.mid, remoteTrack);
+                    resolve();
+                }, (ex) => {
+                    reject(ex);
                 });
-            },
-            setEventHandlers: function(video) {
-                // Ignore play/pause button
-                video.addEventListener("pause", function () {
-                    console.log("Media paused by click, continue...");
-                    video.play();
+            });
+        },
+        pickQuality: async function (track, qualityName) {
+            let remoteVideoTrack = this.remoteVideoTracks.get(track.mid);
+            if (remoteVideoTrack) {
+                return remoteVideoTrack.setPreferredQuality(qualityName).then(() => {
+                    participantView.pickQuality(track, qualityName);
                 });
-            },
-            setWebkitEventHandlers: function(video) {
-                let needRestart = false;
-                let isFullscreen = false;
-                // Use webkitbeginfullscreen event to detect full screen mode in iOS Safari
-                video.addEventListener("webkitbeginfullscreen", function () {
-                    isFullscreen = true;
-                });                
-                video.addEventListener("pause", function () {
-                    if (needRestart) {
-                        console.log("Media paused after fullscreen, continue...");
-                        video.play();
-                        needRestart = false;
-                    } else {
-                        console.log("Media paused by click, continue...");
-                        video.play();
-                    }
+            }
+        },
+        muteVideo: async function (track) {
+            const remoteTrack = this.remoteVideoTracks.get(track.mid);
+            if (remoteTrack) {
+                return remoteTrack.mute();
+            } else {
+                return new Promise((resolve, reject) => {
+                    reject(new Error("Remote track not defined"));
                 });
-                video.addEventListener("webkitendfullscreen", function () {
-                    video.play();
-                    needRestart = true;
-                    isFullscreen = false;
+            }
+        },
+        unmuteVideo: async function (track) {
+            const remoteTrack = this.remoteVideoTracks.get(track.mid);
+            if (remoteTrack) {
+                return remoteTrack.unmute();
+            } else {
+                return new Promise((resolve, reject) => {
+                    reject(new Error("Remote track not defined"));
                 });
-            },
-            setVideoABRTrack: function(track) {
-                abr.setTrack(track);
-            },
-            audioMid: undefined,
-            videoMid: undefined
-        };
-    }
+            }
+        }
+    };
+    instance.setUserId(userId);
+    instance.setNickname(nickname);
+    return instance;
+}
 
-    const stop = function() {
-        for (const [nickName, participant] of Object.entries(remoteParticipants)) {
-            participant.displays.forEach(function(display){
-                display.dispose();
-            });
-            delete remoteParticipants[nickName];
+const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) {
+    // reject may received before track removed from model.
+    // If a new rejection reason is added in addition to track deletion,
+    // a rejection reason analysis must be added
+    const repickTrack = function (model, failedTrack) {
+        if (!model.remoteVideoTrack) {
+            return;
+        }
+        const tracks = new Map(model.videoTracks);
+        if (failedTrack) {
+            tracks.delete(failedTrack.mid);
+            participantView.removeVideoSource(failedTrack);
         }
-    }
 
-    peerConnection.ontrack = ({transceiver}) => {
-        let rParticipant;
-        console.log("Attach remote track " + transceiver.receiver.track.id + " kind " + transceiver.receiver.track.kind + " mid " + transceiver.mid);
-        for (const [nickName, participant] of Object.entries(remoteParticipants)) {
-            for (const pTrack of participant.tracks) {
-                console.log("Participant " + participant.nickName + " track " + pTrack.id + " mid " + pTrack.mid);
-                if (pTrack.mid === transceiver.mid) {
-                    rParticipant = participant;
-                    break;
+        if (tracks.size > 0) {
+            const anotherTrack = tracks.values().next().value;
+            participantView.addVideoSource(model.remoteVideoTrack.track, anotherTrack, () => {
+                if (!model.abr) {
+                    return;
+                }
+                if (model.abr.isAuto()) {
+                    model.abr.resume();
                 }
+            }, (mute) => {
+                if (mute) {
+                    return model.muteVideo(anotherTrack);
+                } else {
+                    return model.unmuteVideo(anotherTrack);
+                }
+            });
+            model.requestVideoTrack(anotherTrack, model.remoteVideoTrack).then(() => {
+                participantView.showVideoTrack(anotherTrack)
+            }, (ex) => {
+                console.log("Failed to request track " + anotherTrack.mid + " " + ex);
+                repickTrack(model, anotherTrack);
+            });
+        } else {
+            if (model.abr) {
+                model.abr.stop();
             }
-            if (rParticipant) {
-                break;
+            participantView.clearQualityState();
+            if (model.remoteVideoTrack) {
+                model.remoteVideoTrack.dispose();
+                model.remoteVideoTrack = null;
+                model.videoEnabled = false;
             }
         }
-        if (rParticipant) {
-            for (const display of rParticipant.displays) {
-                if (transceiver.receiver.track.kind === "video") {
-                    if (display.videoMid === transceiver.mid) {
-                        let stream = new MediaStream();
-                        stream.addTrack(transceiver.receiver.track);
-                        display.setVideoABRTrack(transceiver.receiver.track);
-                        display.setVideo(stream);
-                        break;
-                    }
-                } else if (transceiver.receiver.track.kind === "audio") {
-                    if (display.audioMid === transceiver.mid) {
-                        let stream = new MediaStream();
-                        stream.addTrack(transceiver.receiver.track);
-                        display.setAudio(stream);
-                        break;
-                    }
-                }
-            }
-        } else {
-            console.warn("Failed to find participant for track " + transceiver.receiver.track.id);
-        }
-    }
-
-    const AudioStateButton = function() {
-        let button = {
-            audio: null,
-            contentType: "",
-            displayButton: null,
-            makeButton: function(parent, audio) {
-                button.setAudio(audio);
-                button.displayButton = document.createElement("button");
-                button.displayButton.innerHTML = button.audioState();
-                button.displayButton.addEventListener("click", function() {
-                    button.audio.muted = !button.audio.muted;
-                    button.displayButton.innerHTML = button.audioState();
-                });
-                parent.appendChild(button.displayButton);
-
-            },
-            setAudio: function(audio) {
-                button.audio = audio;
-            },
-            setButtonState: function() {
-                if (button.displayButton) {
-                    button.displayButton.innerHTML = button.audioState();
-                }
-            },
-            setContentType: function(type) {
-                button.contentType = type;
-                button.setButtonState();
-            },
-            audioState: function() {
-                let state = "";
-                if (button.audio) {
-                    if (button.audio.muted) {
-                        state = "Unmute";
-                    } else {
-                        state = "Mute";
-                    }
-                    if (button.contentType) {
-                        state = state + " " + button.contentType;
-                    }
+    }
+
+    const requestTrackAndPick = function (model, targetTrack) {
+        if (model.videoTracks.size === 0) {
+            return;
+        }
+        if (!targetTrack) {
+            targetTrack = model.videoTracks.values().next().value
+        }
+        if (!model.videoTracks.get(targetTrack.mid)) {
+            return;
+        }
+        if (!model.videoEnabled) {
+            model.videoEnabled = true;
+            remoteTrackFactory.getVideoTrack().then((remoteTrack) => {
+                if (!remoteTrack) {
+                    model.videoEnabled = false;
+                    return;
                 }
-                return (state);
-            }
-        };
-        return button;
-    }
-
-    const ABR = function(interval, thresholds, keepGoodTimeout, tryUpperTimeout) {
-        let abr = {
-            track: null,
-            interval: interval,
-            thresholds: thresholds,
-            qualities: [],
-            currentQualityName: null,
-            statTimer: null,
-            paused: false,
-            manual: false,
-            keepGoodTimeout: keepGoodTimeout,
-            keepGoodTimer: null,
-            tryUpperTimeout: tryUpperTimeout,
-            tryUpperTimer: null,
-            start: function() {
-                if (abr.interval) {
-                    const thresholds = Thresholds();
-                    for (const threshold of abr.thresholds) {
-                        thresholds.add(threshold.parameter, threshold.maxLeap);
-                    }
-                    abr.statsTimer = setInterval(() => {
-                        if (abr.track) {
-                            room.getStats(abr.track, constants.SFU_RTC_STATS_TYPE.INBOUND, (stats) => {
-                                if (thresholds.isReached(stats)) {
-                                    abr.shiftDown();
-                                } else {
-                                    abr.useGoodQuality();
-                                }
-                            });
-                        }
-                    }, abr.interval);
-                }
-            },
-            stop: function() {
-                abr.stopKeeping();
-                abr.stopTrying();
-                if (abr.statsTimer) {
-                    clearInterval(abr.statsTimer);
-                    abr.statsTimer = null;
-                }
-            },
-            isEnabled: function () {
-                return (abr.interval > 0);
-            },
-            pause: function() {
-                abr.paused = true;
-            },
-            resume: function() {
-                abr.paused = false;
-            },
-            setAuto: function() {
-                abr.manual = false;
-                abr.resume();
-            },
-            setManual: function() {
-                abr.manual = true;
-                abr.pause();
-            },
-            isAuto: function() {
-                return !abr.manual;
-            },
-            setTrack: function(track) {
-                abr.track = track;
-            },
-            setQualitiesList: function(qualities) {
-                abr.qualities = qualities;
-            },
-            addQuality: function(name) {
-                abr.qualities.push({name: name, available: false, good: true});
-            },
-            setQualityAvailable: function(name, available) {
-                for (let i = 0; i < abr.qualities.length; i++) {
-                    if (name === abr.qualities[i].name) {
-                        abr.qualities[i].available = available;
-                    }
-                }
-            },
-            setQualityGood: function(name, good) {
-                if (name) {
-                    for (let i = 0; i < abr.qualities.length; i++) {
-                        if (name === abr.qualities[i].name) {
-                            abr.qualities[i].good = good;
-                        }
-                    }
+                if (model.disposed || model.videoTracks.size === 0) {
+                    remoteTrack.dispose();
+                    model.videoEnabled = false;
+                    return;
                 }
-            },
-            getFirstAvailableQuality: function() {
-                for (let i = 0; i < abr.qualities.length; i++) {
-                    if (abr.qualities[i].available) {
-                        return abr.qualities[i];
-                    }
+                model.remoteVideoTrack = remoteTrack;
+                if (!model.videoTracks.get(targetTrack.mid)) {
+                    repickTrack(model, targetTrack);
+                } else {
+                    repickTrack(model, null);
                 }
-                return null;
-            },
-            getLowerQuality: function(name) {
-                let quality = null;
-                if (!name) {
-                    // There were no switching yet, return a first available quality
-                    return abr.getFirstAvailableQuality();
+            }, (ex) => {
+                model.videoEnabled = false;
+                console.log("Failed to get remote track " + ex);
+            });
+        }
+    }
+    const instance = {
+        userId: userId,
+        nickname: nickname,
+        videoEnabled: false,
+        currentTrack: null,
+        remoteVideoTrack: null,
+        remoteAudioTracks: new Map(),
+        audioTracks: new Map(),
+        videoTracks: new Map(),
+        abr: null,
+        disposed: false,
+        dispose: async function () {
+            this.disposed = true;
+            participantView.dispose();
+            if (this.remoteVideoTrack) {
+                const remoteTrack = this.remoteVideoTrack;
+                this.remoteVideoTrack = null;
+                remoteTrack.dispose();
+            }
+            this.remoteAudioTracks.forEach((track, id) => {
+                track.dispose();
+            })
+            if (this.abr) {
+                this.abr.stop();
+            }
+            this.remoteAudioTracks.clear();
+        },
+        addVideoTrack: function (track) {
+            this.videoTracks.set(track.mid, track);
+            if (!track.quality) {
+                track.quality = [];
+            }
+            const self = this;
+            participantView.addVideoTrack(track, () => {
+                if (self.disposed) {
+                    return new Promise((resolve, reject) => {
+                        reject(new Error("Model disposed"));
+                    });
                 }
-                let currentIndex = abr.qualities.map(item => item.name).indexOf(name);
-                for (let i = 0; i < currentIndex; i++) {
-                    if (abr.qualities[i].available) {
-                        quality = abr.qualities[i];
-                    }
+
+                if (self.remoteVideoTrack) {
+                    return new Promise((resolve, reject) => {
+                        self.requestVideoTrack(track, self.remoteVideoTrack).then(() => {
+                            resolve();
+                        }, (ex) => {
+                            reject(ex);
+                        });
+                    });
+                } else {
+                    return new Promise((resolve, reject) => {
+                        reject(new Error("Remote track is null"));
+                        requestTrackAndPick(self, track);
+                    });
                 }
-                return quality;
-            },
-            getUpperQuality: function(name) {
-                let quality = null;
-                if (!name) {
-                    // There were no switching yet, return a first available quality
-                    return abr.getFirstAvailableQuality();
+            });
+            requestTrackAndPick(this, track);
+        },
+        removeVideoTrack: function (track) {
+            this.videoTracks.delete(track.mid);
+            participantView.removeVideoTrack(track);
+            if (this.currentTrack && this.currentTrack.mid === track.mid) {
+                repickTrack(this, track);
+            }
+        },
+        addAudioTrack: async function (track) {
+            this.audioTracks.set(track.mid, track);
+            const self = this;
+            remoteTrackFactory.getAudioTrack().then((remoteTrack) => {
+                if (!remoteTrack) {
+                    return;
                 }
-                let currentIndex = abr.qualities.map(item => item.name).indexOf(name);
-                for (let i = currentIndex + 1; i < abr.qualities.length; i++) {
-                    if (abr.qualities[i].available) {
-                        quality = abr.qualities[i];
-                        break;
-                    }
+                if (self.disposed || !self.audioTracks.get(track.mid)) {
+                    remoteTrack.dispose();
+                    return;
                 }
-                return quality;
-            },
-            shiftDown: function() {
-                if (!abr.manual && !abr.paused) {
-                    abr.stopKeeping();
-                    abr.setQualityGood(abr.currentQualityName, false);
-                    let quality = abr.getLowerQuality(abr.currentQualityName);
-                    if (quality) {
-                        console.log("Switching down to " + quality.name + " quality");
-                        abr.setQuality(quality.name);
+                this.remoteAudioTracks.set(track.mid, remoteTrack);
+                remoteTrack.demandTrack(track.id).then(() => {
+                    if (!self.audioTracks.get(track.mid)) {
+                        remoteTrack.dispose();
+                        self.remoteAudioTracks.delete(track.mid);
+                        return;
                     }
+                    participantView.addAudioTrack(track, remoteTrack.track, displayOptions.showAudio);
+                }, (ex) => {
+                    console.log("Failed demand track " + ex);
+                    remoteTrack.dispose();
+                    self.remoteAudioTracks.delete(track.mid);
+                });
+            }, (ex) => {
+                console.log("Failed to get audio track " + ex);
+            });
+
+        },
+        removeAudioTrack: function (track) {
+            if (!this.audioTracks.delete(track.mid)) {
+                return
+            }
+
+            participantView.removeAudioTrack(track);
+            const remoteTrack = this.remoteAudioTracks.get(track.mid);
+            if (remoteTrack) {
+                this.remoteAudioTracks.delete(track.mid);
+                remoteTrack.dispose();
+            }
+
+        },
+        setUserId: function (userId) {
+          this.userId = userId;
+        },
+        setNickname: function (nickname) {
+            this.nickname = nickname;
+            participantView.setNickname(this.userId ? this.userId : "", nickname);
+        },
+        updateQualityInfo: function (remoteTracks) {
+            for (const remoteTrackQuality of remoteTracks) {
+                const track = this.videoTracks.get(remoteTrackQuality.mid);
+                if (!track) {
+                    continue;
                 }
-            },
-            shiftUp: function() {
-                if (!abr.manual && !abr.paused) {
-                    let quality = abr.getUpperQuality(abr.currentQualityName);
-                    if (quality) {
-                        if (quality.good) {
-                            console.log("Switching up to " + quality.name + " quality");
-                            abr.setQuality(quality.name);
+                if (!this.currentTrack || this.currentTrack.mid !== track.mid) {
+                    // update model and return, view not changed
+                    for (const remoteQualityInfo of remoteTrackQuality.quality) {
+                        const quality = track.quality.find((q) => q.quality === remoteQualityInfo.quality);
+                        if (quality) {
+                            quality.available = remoteQualityInfo.available;
                         } else {
-                            abr.tryUpper();
+                            track.quality.push(remoteQualityInfo);
                         }
                     }
+                    return;
                 }
-            },
-            useGoodQuality: function() {
-                if (!abr.manual && !abr.paused) {
-                    if (!abr.currentQualityName) {
-                        let quality = abr.getFirstAvailableQuality();
-                        abr.currentQualityName = quality.name;
+                if (this.abr && track.quality.length === 0 && remoteTrackQuality.quality.length > 0) {
+                    const self = this;
+                    participantView.addQuality(track, "Auto", true, async () => {
+                        if (!self.abr) {
+                            return;
+                        }
+                        self.abr.start();
+                        self.abr.setAuto();
+                        participantView.pickQuality(track, "Auto");
+                    })
+                    if (displayOptions.autoAbr && this.abr) {
+                        this.abr.setAuto();
+                        this.abr.start();
+                        participantView.pickQuality(track, "Auto");
                     }
-                    abr.setQualityGood(abr.currentQualityName, true);
-                    abr.keepGoodQuality();
-                }
-            },
-            keepGoodQuality: function() {
-                if (abr.keepGoodTimeout && !abr.keepGoodTimer && abr.getUpperQuality(abr.currentQualityName)) {
-                    abr.keepGoodTimer = setTimeout(() => {
-                        abr.shiftUp();
-                        abr.stopKeeping();
-                    }, abr.keepGoodTimeout);
-                }
-            },
-            stopKeeping: function() {
-                if (abr.keepGoodTimer) {
-                    clearTimeout(abr.keepGoodTimer);
-                    abr.keepGoodTimer = null;
                 }
-            },
-            tryUpper: function() {
-                let quality = abr.getUpperQuality(abr.currentQualityName);
-                if (abr.tryUpperTimeout && !abr.tryUpperTimer && quality) {
-                    abr.tryUpperTimer = setTimeout(() => {
-                        abr.setQualityGood(quality.name, true);
-                        abr.stopTrying();
-                    }, abr.tryUpperTimeout);
+                for (const remoteQualityInfo of remoteTrackQuality.quality) {
+                    const localQuality = track.quality.find((q) => q.quality === remoteQualityInfo.quality);
+                    if (localQuality) {
+                        localQuality.available = remoteQualityInfo.available;
+                        if (this.abr) {
+                            this.abr.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available)
+                        }
+                        if (displayOptions.quality) {
+                            participantView.updateQuality(track, localQuality.quality, localQuality.available);
+                        }
+                    } else {
+                        track.quality.push(remoteQualityInfo);
+                        if (this.abr) {
+                            this.abr.addQuality(remoteQualityInfo.quality);
+                            this.abr.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available)
+                        }
+                        if (displayOptions.quality) {
+                            const self = this;
+                            participantView.addQuality(track, remoteQualityInfo.quality, remoteQualityInfo.available, async () => {
+                                if (self.abr) {
+                                    self.abr.setManual();
+                                    self.abr.setQuality(remoteQualityInfo.quality);
+                                }
+                                return self.pickQuality(track, remoteQualityInfo.quality);
+                            });
+                        }
+                    }
                 }
-            },
-            stopTrying: function() {
-                if (abr.tryUpperTimer) {
-                    clearTimeout(abr.tryUpperTimer);
-                    abr.tryUpperTimer = null;
+            }
+        },
+        requestVideoTrack: async function (track, remoteTrack) {
+            return new Promise((resolve, reject) => {
+                if (!remoteTrack || !track) {
+                    reject(new Error("Remote and local track must be defined"));
+                    return;
                 }
-            },
-            setQuality: async function(name) {
-                // Pause switching until a new quality is received
-                abr.pause();
-                abr.currentQualityName = name;
-                await room.changeQuality(abr.track.id, abr.currentQualityName);
+                const self = this;
+                remoteTrack.demandTrack(track.id).then(() => {
+                    // channels reordering case, must be removed after channels unification
+                    if (!self.videoTracks.get(track.mid)) {
+                        reject(new Error("Video track already removed from model"));
+                        return;
+                    }
+                    self.currentTrack = track;
+                    participantView.clearQualityState(track);
+                    if (self.abr) {
+                        self.abr.stop();
+                        self.abr.clearQualityState();
+                        self.abr.setTrack(remoteTrack);
+
+                        if (track.quality.length > 0) {
+                            participantView.addQuality(track, "Auto", true, async () => {
+                                if (!self.abr) {
+                                    return;
+                                }
+                                self.abr.start();
+                                self.abr.setAuto();
+                                participantView.pickQuality(track, "Auto");
+                            })
+                        }
+                        if (displayOptions.autoAbr) {
+                            self.abr.setAuto();
+                            self.abr.start();
+                            participantView.pickQuality(track, "Auto");
+                        }
+                    }
+                    for (const qualityDescriptor of track.quality) {
+                        if (self.abr) {
+                            self.abr.addQuality(qualityDescriptor.quality);
+                            self.abr.setQualityAvailable(qualityDescriptor.quality, qualityDescriptor.available);
+                        }
+                        if (displayOptions.quality) {
+                            participantView.addQuality(track, qualityDescriptor.quality, qualityDescriptor.available, async () => {
+                                if (self.abr) {
+                                    self.abr.setManual();
+                                    self.abr.setQuality(qualityDescriptor.quality);
+                                }
+                                return self.pickQuality(track, qualityDescriptor.quality);
+                            });
+                        }
+                    }
+                    resolve();
+                }, (ex) => reject(ex));
+            });
+        },
+        pickQuality: async function (track, qualityName) {
+            if (this.remoteVideoTrack) {
+                return this.remoteVideoTrack.setPreferredQuality(qualityName).then(() => participantView.pickQuality(track, qualityName));
+            }
+        },
+        muteVideo: async function (track) {
+            if (this.remoteVideoTrack) {
+                return this.remoteVideoTrack.mute();
+            } else {
+                return new Promise((resolve, reject) => {
+                    reject(new Error("Remote track not defined"));
+                });
+            }
+        },
+        unmuteVideo: async function (track) {
+            if (this.remoteVideoTrack) {
+                return this.remoteVideoTrack.unmute();
+            } else {
+                return new Promise((resolve, reject) => {
+                    reject(new Error("Remote track not defined"));
+                });
             }
         }
-        return abr;
+    };
+    instance.setUserId(userId);
+    instance.setNickname(nickname);
+    if (abrFactory) {
+        instance.abr = abrFactory.createAbrManager();
     }
+    return instance;
+}
+
+
+const createDefaultMeetingController = function (room, meetingModel) {
+    const constants = SFU.constants;
+    room.on(constants.SFU_ROOM_EVENT.PARTICIPANT_LIST, async function (e) {
+        for (const idName of e.participants) {
+            meetingModel.addParticipant(idName.userId, idName.name);
+        }
+    }).on(constants.SFU_ROOM_EVENT.JOINED, async function (e) {
+        meetingModel.addParticipant(e.userId, e.name);
+    }).on(constants.SFU_ROOM_EVENT.LEFT, function (e) {
+        meetingModel.removeParticipant(e.userId);
+    }).on(constants.SFU_ROOM_EVENT.ADD_TRACKS, async function (e) {
+        meetingModel.addTracks(e.info.userId, e.info.info);
+    }).on(constants.SFU_ROOM_EVENT.REMOVE_TRACKS, async function (e) {
+        meetingModel.removeTracks(e.info.userId, e.info.info);
+    }).on(constants.SFU_ROOM_EVENT.TRACK_QUALITY_STATE, async function (e) {
+        meetingModel.updateQualityInfo(e.info.userId, e.info.tracks);
+    }).on(constants.SFU_ROOM_EVENT.ENDED, function (e) {
+        meetingModel.end();
+    });
+    meetingModel.setMeetingName(room.id());
+
+
+    const stop = function () {
+        meetingModel.end();
+    };
 
     return {
         stop: stop
     }
 }
 
-const resizeVideo = function(video, width, height) {
+const remoteTrackProvider = function (room) {
+    return {
+        getVideoTrack: async function () {
+            return await room.getRemoteTrack("VIDEO", false);
+        },
+        getAudioTrack: async function () {
+            return await room.getRemoteTrack("AUDIO", true);
+        }
+    }
+}
+const initDefaultRemoteDisplay = function (room, div, displayOptions, abrOptions) {
+    const participantFactory = createParticipantFactory(remoteTrackProvider(room), createOneToManyParticipantView, createOneToManyParticipantModel);
+    return initRemoteDisplay(room, div, displayOptions, abrOptions, createDefaultMeetingController, createDefaultMeetingModel, createDefaultMeetingView, participantFactory)
+}
+/*
+display options:
+autoAbr     - choose abr by default
+quality     - show quality buttons
+showAudio   - show audio elements
+ */
+const initRemoteDisplay = function (room, div, displayOptions, abrOptions, meetingController, meetingModel, meetingView, participantFactory) {
+    // Validate options first
+    if (!div) {
+        throw new Error("Main div to place all the media tag is not defined");
+    }
+    if (!room) {
+        throw new Error("Room is not defined");
+    }
+
+    const dOptions = displayOptions || {quality: true, type: true, showAudio: false};
+    let abrFactory;
+    if (abrOptions) {
+        abrFactory = abrManagerFactory(room, abrOptions);
+    }
+    participantFactory.abrFactory = abrFactory;
+    participantFactory.displayOptions = dOptions;
+    return meetingController(room, meetingModel(meetingView(div), participantFactory));
+}
+
+const resizeVideo = function (video, width, height) {
+    // TODO: fix
+    if (video) {
+        return;
+    }
     if (!video.parentNode) {
         return;
     }
@@ -836,12 +1682,12 @@ const resizeVideo = function(video, width, height) {
         video.videoWidth = video.width;
         video.videoHeight = video.height;
     }
-    var display = video.parentNode;
-    var parentSize = {
+    const display = video.parentNode;
+    const parentSize = {
         w: display.parentNode.clientWidth,
         h: display.parentNode.clientHeight
     };
-    var newSize;
+    let newSize;
     if (width && height) {
         newSize = downScaleToFitSize(width, height, parentSize.w, parentSize.h);
     } else {
@@ -851,7 +1697,7 @@ const resizeVideo = function(video, width, height) {
     display.style.height = newSize.h + "px";
 
     //vertical align
-    var margin = 0;
+    let margin = 0;
     if (parentSize.h - newSize.h > 1) {
         margin = Math.floor((parentSize.h - newSize.h) / 2);
     }
@@ -859,7 +1705,7 @@ const resizeVideo = function(video, width, height) {
     console.log("Resize from " + video.videoWidth + "x" + video.videoHeight + " to " + display.offsetWidth + "x" + display.offsetHeight);
 }
 
-const downScaleToFitSize = function(videoWidth, videoHeight, dstWidth, dstHeight) {
+const downScaleToFitSize = function (videoWidth, videoHeight, dstWidth, dstHeight) {
     var newWidth, newHeight;
     var videoRatio = videoWidth / videoHeight;
     var dstRatio = dstWidth / dstHeight;
@@ -876,30 +1722,30 @@ const downScaleToFitSize = function(videoWidth, videoHeight, dstWidth, dstHeight
     };
 }
 
-const createInfoDisplay = function(parent, text) {
+const createInfoDisplay = function (parent, text) {
     const div = document.createElement("div");
     if (text) {
         div.innerHTML = text;
     }
-    div.setAttribute("style","width:auto; height:30px;");
-    div.setAttribute("class","text-center");
+    div.setAttribute("style", "width:auto; height:30px;");
+    div.setAttribute("class", "text-center");
     if (parent) {
         parent.appendChild(div);
     }
     return div;
 }
 
-const createContainer = function(parent) {
+const createContainer = function (parent) {
     const div = document.createElement("div");
-    div.setAttribute("style","width:auto; height:auto;");
-    div.setAttribute("class","text-center");
+    div.setAttribute("style", "width:auto; height:auto;");
+    div.setAttribute("class", "text-center");
     if (parent) {
         parent.appendChild(div);
     }
     return div;
 }
 
-const createQualityButton = function(qualityName, buttonsList, parent) {
+const createQualityButton = function (qualityName, buttonsList, parent) {
     const div = document.createElement("button");
     div.innerText = qualityName;
     div.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
@@ -913,7 +1759,7 @@ const createQualityButton = function(qualityName, buttonsList, parent) {
     return div;
 }
 
-const setQualityButtonsColor = function(qualityDivs) {
+const setQualityButtonsColor = function (qualityDivs) {
     for (let c = 0; c < qualityDivs.length; c++) {
         if (qualityDivs[c].style.color !== QUALITY_COLORS.UNAVAILABLE) {
             qualityDivs[c].style.color = QUALITY_COLORS.AVAILABLE;
@@ -922,13 +1768,13 @@ const setQualityButtonsColor = function(qualityDivs) {
 }
 
 // Helper functions to display/hide an element
-const showItem = function(tag) {
+const showItem = function (tag) {
     if (tag) {
         tag.style.display = "block";
     }
 }
 
-const hideItem = function(tag) {
+const hideItem = function (tag) {
     if (tag) {
         tag.style.display = "none";
     }