@flashphoner/sfusdk-examples 2.0.264 → 2.0.269

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flashphoner/sfusdk-examples",
-  "version": "2.0.264",
+  "version": "2.0.269",
   "description": "Official Flashphoner WebCallServer SFU SDK usage examples",
   "main": "dist/sfu.js",
   "types": "src/sfu.ts",

package/src/client/config.json

@@ -15,10 +15,13 @@
         "source": "camera",
         "width": 1280,
         "height": 720,
-        "codec": "H264",
+        "codec": "vp9",
         "encodings": [
-          { "rid": "m", "active": true, "maxBitrate": 300000, "scaleResolutionDownBy": 2 },
-          { "rid": "h", "active": true, "maxBitrate": 900000 }
+          {
+            "rid": "nonsense",
+            "active": true,
+            "scalabilityMode": "L1T3"
+          }
         ]
       }]
     }

package/src/client/controls.js

@@ -1,6 +1,7 @@
-const createControls = function(config) {
+const createControls = function (config) {
 
-    let trackCallback = function(){};
+    let trackCallback = function () {
+    };
 
     const controls = {
         entrance: {
@@ -24,16 +25,17 @@ const createControls = function(config) {
             rid: document.getElementById("addVideoTrackEncodingRid"),
             active: document.getElementById("addVideoTrackEncodingActive"),
             maxBitrate: document.getElementById("addVideoTrackEncodingMaxBitrate"),
-            resolutionScale: document.getElementById("addVideoTrackEncodingResolutionScale")
+            resolutionScale: document.getElementById("addVideoTrackEncodingResolutionScale"),
+            scalabilityMode: document.getElementById("addVideoTrackScalabilityMode")
         },
         tables: {
             video: $('#videoTracksTable').DataTable({
                 "sDom": 't',
                 "columns": [
                     {
-                        "className":      'details-control',
-                        "orderable":      false,
-                        "data":           null,
+                        "className": 'details-control',
+                        "orderable": false,
+                        "data": null,
                         "defaultContent": ''
                     },
                     {"data": "source"},
@@ -58,6 +60,7 @@ const createControls = function(config) {
                     {"data": "active"},
                     {"data": "maxBitrate"},
                     {"data": "resolutionScale"},
+                    {"data": "scalabilityMode"},
                     {"data": "action"}
                 ]
             })
@@ -70,7 +73,7 @@ const createControls = function(config) {
     controls.entrance.roomPin.value = config.room.pin;
     controls.entrance.nickName.value = config.room.nickName;
 
-    const addAudioTrackRow = async function(track) {
+    const addAudioTrackRow = async function (track) {
         const stream = await getMedia([track]);
         let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
         const row = controls.tables.audio.row.add({
@@ -81,14 +84,14 @@ const createControls = function(config) {
         }).node();
         controls.tables.audio.draw();
 
-        $('#' + stream.id + "-button").on('click', function(){
+        $('#' + stream.id + "-button").on('click', function () {
             //terminate stream
             console.log("terminate audio stream " + stream.id);
             let track = stream.getAudioTracks()[0];
             track.stop();
             track.dispatchEvent(new Event("ended"));
         }).prop('disabled', true);
-        stream.getTracks()[0].onended = function() {
+        stream.getTracks()[0].onended = function () {
             controls.tables.audio.row(row).remove().draw();
         }
         trackCallback({
@@ -99,7 +102,7 @@ const createControls = function(config) {
         });
     }
 
-    const addVideoTrackRow = async function(track) {
+    const addVideoTrackRow = async function (track) {
         const stream = await getMedia([track]);
         let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
         const row = controls.tables.video.row.add({
@@ -113,14 +116,14 @@ const createControls = function(config) {
         }).node();
         controls.tables.video.draw();
 
-        $('#' + stream.id + "-button").on('click', function(){
+        $('#' + stream.id + "-button").on('click', function () {
             //terminate stream
             console.log("terminate video stream " + stream.id);
             let track = stream.getVideoTracks()[0];
             track.stop();
             track.dispatchEvent(new Event("ended"));
         }).prop('disabled', true);
-        stream.getTracks()[0].addEventListener("ended", function() {
+        stream.getTracks()[0].addEventListener("ended", function () {
             controls.tables.video.row(row).remove().draw();
         });
         trackCallback({
@@ -130,40 +133,40 @@ const createControls = function(config) {
         });
     }
 
-    const format = function(d) {
+    const format = function (d) {
         if (!d.encodings) {
             return;
         }
-        let details =  '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
-        d.encodings.forEach(function(encoding){
+        let details = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
+        d.encodings.forEach(function (encoding) {
             details += '<tr>';
             for (const [key, value] of Object.entries(encoding)) {
-                details += '<td>'+ key + '</td>'+
-                    '<td>'+ value + '</td>';
+                details += '<td>' + key + '</td>' +
+                    '<td>' + value + '</td>';
             }
             details += '</tr>';
         });
-        details +='</table>';
+        details += '</table>';
         return details;
     }
 
-    const muteForm = function(form) {
+    const muteForm = function (form) {
         for (const [key, value] of Object.entries(form)) {
             value.disabled = true;
         }
     }
 
-    const unmuteForm = function(form) {
+    const unmuteForm = function (form) {
         for (const [key, value] of Object.entries(form)) {
             value.disabled = false;
         }
     }
 
-    const muteInput = function() {
+    const muteInput = function () {
         muteForm(controls.entrance);
     }
 
-    const roomConfig = function() {
+    const roomConfig = function () {
         let roomConfig = {
             url: controls.entrance.url.value,
             roomName: controls.entrance.roomName.value,
@@ -179,9 +182,9 @@ const createControls = function(config) {
         return roomConfig;
     }
 
-    const getVideoStreams = function() {
+    const getVideoStreams = function () {
         let streams = [];
-        controls.tables.video.rows().every(function(rowIdx, tableLoop, rowLoop) {
+        controls.tables.video.rows().every(function (rowIdx, tableLoop, rowLoop) {
             let data = this.data();
             streams.push({
                 stream: data.stream,
@@ -192,9 +195,9 @@ const createControls = function(config) {
         });
         return streams;
     }
-    const getAudioStreams = function() {
+    const getAudioStreams = function () {
         let streams = [];
-        controls.tables.audio.rows().every(function(rowIdx, tableLoop, rowLoop) {
+        controls.tables.audio.rows().every(function (rowIdx, tableLoop, rowLoop) {
             let data = this.data();
             streams.push({
                 stream: data.stream,
@@ -205,11 +208,11 @@ const createControls = function(config) {
         return streams;
     }
 
-    const onTrack = function(callback) {
+    const onTrack = function (callback) {
         trackCallback = callback;
     }
 
-    const displayTables = async function() {
+    const displayTables = async function () {
         // Add event listener for opening and closing details
         $('#videoTracksTableBody').on('click', 'td.details-control', function () {
             let tr = $(this).closest('tr');
@@ -234,15 +237,16 @@ const createControls = function(config) {
         }
 
         // Click event listener to add a new video track
-        document.getElementById("addVideoTrack").addEventListener("click", function(e){
+        document.getElementById("addVideoTrack").addEventListener("click", function (e) {
             let encodings = [];
-            controls.tables.encodings.rows().every(function() {
+            controls.tables.encodings.rows().every(function () {
                 let encoding = this.data();
                 encodings.push({
                     rid: encoding.rid,
                     active: encoding.active,
                     maxBitrate: encoding.maxBitrate,
-                    scaleResolutionDownBy: encoding.resolutionScale
+                    scaleResolutionDownBy: encoding.resolutionScale,
+                    scalabilityMode: encoding.scalabilityMode
                 })
             });
             let track = {
@@ -254,26 +258,27 @@ const createControls = function(config) {
             }
             addVideoTrackRow(track);
         });
-    
+
         // Click event listener to remove video quality
-        $("#videoTrackEncodingsTable").on("click", ".remove", function(){
+        $("#videoTrackEncodingsTable").on("click", ".remove", function () {
             controls.tables.encodings.row($(this).parents('tr')).remove().draw();
         });
-    
+
         // Click event listener to add video quality
-        document.getElementById("addVideoTrackEncoding").addEventListener("click", function(){
+        document.getElementById("addVideoTrackEncoding").addEventListener("click", function () {
             let button = '<button class="btn btn-primary remove">Delete</button>';
             controls.tables.encodings.row.add({
                 rid: controls.addVideoEncoding.rid.value,
                 active: controls.addVideoEncoding.active.value,
                 maxBitrate: controls.addVideoEncoding.maxBitrate.value,
                 resolutionScale: controls.addVideoEncoding.resolutionScale.value,
+                scalabilityMode: controls.addVideoEncoding.scalabilityMode.value,
                 action: button
             }).draw();
         });
 
         // Click event listener to add a new audio track
-        document.getElementById("addAudioTrack").addEventListener("click", function(e){
+        document.getElementById("addAudioTrack").addEventListener("click", function (e) {
             let encodings = [];
             let track = {
                 source: controls.addAudioTrack.source.value,
@@ -282,10 +287,10 @@ const createControls = function(config) {
             }
             addAudioTrackRow(track);
         });
-    
+
     }
 
-    const cleanTables = function() {
+    const cleanTables = function () {
         controls.tables.video.rows().remove().draw();
         controls.tables.audio.rows().remove().draw();
         controls.tables.encodings.rows().remove().draw();
@@ -298,15 +303,16 @@ const createControls = function(config) {
         getAudioStreams: getAudioStreams,
         getVideoStreams: getVideoStreams,
         onTrack: onTrack,
-        cleanTables: cleanTables
+        cleanTables: cleanTables,
+        controls: controls
     }
 }
 
-const getMedia = async function(tracks) {
+const getMedia = async function (tracks) {
     //convert to constraints
     let screen = false;
-    const constraints= {};
-    tracks.forEach(function(track){
+    const constraints = {};
+    tracks.forEach(function (track) {
         if (track.source === "mic") {
             //audio
             constraints.audio = {};

package/src/client/main.html

@@ -71,6 +71,7 @@
                                     <select class="form-select-sm" id="addVideoTrackCodec">
                                         <option value="H264" selected>H264</option>
                                         <option value="VP8">VP8</option>
+                                        <option value="VP9">VP9</option>
                                     </select>
                                 </th>
                                 <th>
@@ -90,6 +91,7 @@
                                         <th>Active</th>
                                         <th>MaxBitrate</th>
                                         <th>ResolutionScale</th>
+                                        <th>Scalability Mode</th>
                                         <th>Action</th>
                                     </tr>
                                 </thead>
@@ -119,6 +121,11 @@
                                                 <option value="6">6</option>
                                             </select>
                                         </th>
+                                        <th>
+                                            <select class="form-select-sm" id="addVideoTrackScalabilityMode">
+                                                <option selected value="">NONE</option>
+                                            </select>
+                                        </th>
                                         <th>
                                             <button class="btn btn-primary" id="addVideoTrackEncoding">Add</button>
                                         </th>

package/src/client/main.js

@@ -36,6 +36,37 @@ const defaultConfig = {
     }
 };
 
+const scalabilityModes = [
+    'L1T1',
+    'L1T2',
+    'L1T3',
+    'L2T1',
+    'L2T2',
+    'L2T3',
+    'L3T1',
+    'L3T2',
+    'L3T3',
+    'L2T1h',
+    'L2T2h',
+    'L2T3h',
+    'S2T1',
+    'S2T2',
+    'S2T3',
+    'S2T1h',
+    'S2T2h',
+    'S2T3h',
+    'S3T1',
+    'S3T2',
+    'S3T3',
+    'S3T1h',
+    'S3T2h',
+    'S3T3h',
+    'L2T2_KEY',
+    'L2T3_KEY',
+    'L3T2_KEY',
+    'L3T3_KEY'
+];
+
 /**
  * Load track configuration and show entrance modal
  */
@@ -171,11 +202,51 @@ const publishPreconfiguredStreams = async function (room, pc, streams) {
             localDisplay.add(s.stream.id, "local", s.stream, contentType);
         });
         //join room
-        await room.join(pc, null, config, 10);
+        await room.join(pc, null, config, 1);
         // Enable Delete button for each preconfigured stream #WCS-3689
         streams.forEach(function (s) {
             $('#' + s.stream.id + "-button").prop('disabled', false);
         });
+        cControls.controls.addVideoTrack.codec.addEventListener('change', async (event) => {
+            const mimeType = "video/" + event.target.value;
+            while (cControls.controls.addVideoEncoding.scalabilityMode.firstChild) {
+                cControls.controls.addVideoEncoding.scalabilityMode.firstChild.remove();
+            }
+            const option = document.createElement('option');
+            option.value = '';
+            option.innerText = 'NONE';
+            cControls.controls.addVideoEncoding.scalabilityMode.appendChild(option);
+
+            const capabilityPromises = [];
+            for (const mode of scalabilityModes) {
+                capabilityPromises.push(navigator.mediaCapabilities.encodingInfo({
+                    type: 'webrtc',
+                    video: {
+                        contentType: mimeType,
+                        width: 640,
+                        height: 480,
+                        bitrate: 10000,
+                        framerate: 29.97,
+                        scalabilityMode: mode
+                    }
+                }));
+            }
+            const capabilityResults = await Promise.all(capabilityPromises);
+            for (let i = 0; i < scalabilityModes.length; ++i) {
+                if (capabilityResults[i].supported) {
+                    const option = document.createElement('option');
+                    option.value = scalabilityModes[i];
+                    option.innerText = scalabilityModes[i];
+                    cControls.controls.addVideoEncoding.scalabilityMode.appendChild(option);
+                }
+            }
+
+            if (cControls.controls.addVideoEncoding.scalabilityMode.childElementCount > 1) {
+                cControls.controls.addVideoEncoding.scalabilityMode.disabled = false;
+            } else {
+                cControls.controls.addVideoEncoding.scalabilityMode.disabled = true;
+            }
+        });
     } catch (e) {
         onOperationFailed("Failed to publish a preconfigured streams", e);
         // Enable Delete button for each preconfigured stream #WCS-3689
@@ -259,6 +330,13 @@ const subscribeTrackToEndedEvent = function (room, track, pc) {
  * @param {*} encodings
  */
 const addTrackToPeerConnection = function (pc, stream, track, encodings) {
+    if (encodings) {
+        for (const encoding of encodings) {
+            if (encoding.scalabilityMode === "") {
+                delete encoding.scalabilityMode;
+            }
+        }
+    }
     pc.addTransceiver(track, {
         direction: "sendonly",
         streams: [stream],

package/src/commons/js/display.js

@@ -534,9 +534,9 @@ const createOneToManyParticipantView = function () {
         removeVideoTrack: function (track) {
             player.removeVideoTrack(track);
         },
-        addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler) {
+        addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler, onSidClick, onTidClick) {
             this.currentTrack = track;
-            player.setVideoSource(remoteVideoTrack, onResize, muteHandler);
+            player.setVideoSource(remoteVideoTrack, onResize, muteHandler, onSidClick, onTidClick);
         },
         removeVideoSource: function (track) {
             if (this.currentTrack && this.currentTrack.mid === track.mid) {
@@ -561,11 +561,11 @@ const createOneToManyParticipantView = function () {
             const additionalUserId = userId ? "#" + getShortUserId(userId) : "";
             participantNicknameDisplay.innerText = "Name: " + nickname + additionalUserId;
         },
-        updateQuality: function (track, qualityName, available) {
-            player.updateQuality(qualityName, available);
+        updateQuality: function (track, quality) {
+            player.updateQuality(quality);
         },
-        addQuality: function (track, qualityName, available, onQualityPick) {
-            player.addQuality(qualityName, available, onQualityPick);
+        addQuality: function (track, quality, onQualityPick) {
+            player.addQuality(quality, onQualityPick);
         },
         clearQualityState: function (track) {
             player.clearQualityState();
@@ -593,25 +593,54 @@ const createVideoPlayer = function (participantDiv) {
     const trackDisplay = createContainer(streamDisplay);
 
     let videoElement;
-
-    const trackButtons = new Map();
+    // traciId/
+    // {btn: button,
+    // qualities:Map{quality
+    //      {name:string,
+    //      available:boolean,
+    //      btn: button,
+    //             spatialLayersInfo:Map{
+    //                  available:boolean,
+    //                  resolution{width:number,height:number},
+    //                  sid:number,
+    //                  btn: button},
+    //                  temporalLayersInfo:Map{
+    //                  available:boolean,
+    //                  tid:number,
+    //                  btn: button}
+    //                  }
+    //      }
+
+    const tracksInfo = new Map();
     const qualityButtons = new Map();
 
     const lock = function () {
-        for (const btn of trackButtons.values()) {
+        for (const btn of tracksInfo.values()) {
             btn.disabled = true;
         }
         for (const state of qualityButtons.values()) {
             state.btn.disabled = true;
+            for (const [sid, spatialLayerButton] of state.layerButtons.spatialLayerButtons) {
+                spatialLayerButton.btn.disabled = true;
+            }
+            for (const [sid, temporalLayerButton] of state.layerButtons.temporalLayerButtons) {
+                temporalLayerButton.btn.disabled = true;
+            }
         }
     }
 
     const unlock = function () {
-        for (const btn of trackButtons.values()) {
+        for (const btn of tracksInfo.values()) {
             btn.disabled = false;
         }
         for (const state of qualityButtons.values()) {
             state.btn.disabled = false;
+            for (const [sid, spatialLayerButton] of state.layerButtons.spatialLayerButtons) {
+                spatialLayerButton.btn.disabled = false;
+            }
+            for (const [sid, temporalLayerButton] of state.layerButtons.temporalLayerButtons) {
+                temporalLayerButton.btn.disabled = false;
+            }
         }
     }
 
@@ -648,9 +677,24 @@ const createVideoPlayer = function (participantDiv) {
 
     const repickQuality = function (qualityName) {
         for (const [quality, state] of qualityButtons.entries()) {
+            state.layerButtons.temporalLayerButtons.forEach((lState, __) => {
+                if(lState.btn.style.color === QUALITY_COLORS.SELECTED) {
+                    lState.btn.style.color = QUALITY_COLORS.AVAILABLE;
+                }
+            });
+            state.layerButtons.spatialLayerButtons.forEach((lState, __) => {
+                if(lState.btn.style.color === QUALITY_COLORS.SELECTED) {
+                    lState.btn.style.color = QUALITY_COLORS.AVAILABLE;
+                }
+            });
             if (quality === qualityName) {
+                state.layerButtons.temporalLayerButtons.forEach((lState, __) => showItem(lState.btn));
+                state.layerButtons.spatialLayerButtons.forEach((lState, __) => showItem(lState.btn));
+
                 state.btn.style.color = QUALITY_COLORS.SELECTED;
             } else if (state.btn.style.color === QUALITY_COLORS.SELECTED) {
+                state.layerButtons.temporalLayerButtons.forEach((lState, __) => hideItem(lState.btn));
+                state.layerButtons.spatialLayerButtons.forEach((lState, __) => hideItem(lState.btn));
                 if (state.available) {
                     state.btn.style.color = QUALITY_COLORS.AVAILABLE;
                 } else {
@@ -660,22 +704,52 @@ const createVideoPlayer = function (participantDiv) {
         }
     }
 
+    const repickSid = function (qualityName, sid) {
+        const qualityState = qualityButtons.get(qualityName);
+        for (const [__, state] of qualityState.layerButtons.spatialLayerButtons.entries()) {
+            if (state.layerInfo.sid === sid) {
+                state.btn.style.color = QUALITY_COLORS.SELECTED;
+            } else if (state.layerInfo.available) {
+                state.btn.style.color = QUALITY_COLORS.AVAILABLE;
+            } else {
+                state.btn.style.color = QUALITY_COLORS.UNAVAILABLE;
+            }
+        }
+    }
+
+    const repickTid = function (qualityName, tid) {
+        const qualityState = qualityButtons.get(qualityName);
+        for (const [__, state] of qualityState.layerButtons.temporalLayerButtons.entries()) {
+            if (state.layerInfo.tid === tid) {
+                state.btn.style.color = QUALITY_COLORS.SELECTED;
+            } else if (state.layerInfo.available) {
+                state.btn.style.color = QUALITY_COLORS.AVAILABLE;
+            } else {
+                state.btn.style.color = QUALITY_COLORS.UNAVAILABLE;
+            }
+        }
+    }
+
     return {
         rootDiv: streamDisplay,
         muteButton: null,
         autoButton: null,
+        tidListener: null,
+        sidListener: null,
         dispose: function () {
             streamDisplay.remove();
         },
         clearQualityState: function () {
             qualityButtons.forEach((state, qName) => {
                 state.btn.remove();
+                state.layerButtons.temporalLayerButtons.forEach((lState, __) => lState.btn.remove());
+                state.layerButtons.spatialLayerButtons.forEach((lState, __) => lState.btn.remove());
             });
             qualityButtons.clear();
         },
         addVideoTrack: function (track, asyncCallback) {
             const trackButton = document.createElement("button");
-            trackButtons.set(track.mid, trackButton);
+            tracksInfo.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;
@@ -696,13 +770,13 @@ const createVideoPlayer = function (participantDiv) {
             trackDisplay.appendChild(trackButton);
         },
         removeVideoTrack: function (track) {
-            const trackButton = trackButtons.get(track.mid);
+            const trackButton = tracksInfo.get(track.mid);
             if (trackButton) {
                 trackButton.remove();
-                trackButtons.delete(track.mid);
+                tracksInfo.delete(track.mid);
             }
         },
-        setVideoSource: function (remoteVideoTrack, onResize, onMute) {
+        setVideoSource: function (remoteVideoTrack, onResize, onMute, onSidClick, onTidClick) {
             if (!this.muteButton) {
                 const newVideoMuteBtn = document.createElement("button");
                 this.muteButton = newVideoMuteBtn;
@@ -724,6 +798,8 @@ const createVideoPlayer = function (participantDiv) {
                 });
                 videoMuteDisplay.appendChild(newVideoMuteBtn);
             }
+            this.sidListener = onSidClick;
+            this.tidListener = onTidClick;
 
             if (videoElement) {
                 videoElement.remove();
@@ -778,7 +854,7 @@ const createVideoPlayer = function (participantDiv) {
             if (videoElement) {
                 showItem(videoElement);
             }
-            for (const [mid, btn] of trackButtons.entries()) {
+            for (const [mid, btn] of tracksInfo.entries()) {
                 if (mid === track.mid) {
                     btn.style.color = QUALITY_COLORS.SELECTED;
                 } else if (btn.style.color === QUALITY_COLORS.SELECTED) {
@@ -788,39 +864,191 @@ const createVideoPlayer = function (participantDiv) {
             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;
-                }
-                if (available) {
-                    qualityButton.style.color = QUALITY_COLORS.AVAILABLE;
+        updateQuality: function (quality) {
+            console.log("updateQuality" + quality.available);
+            const qualityInfo = qualityButtons.get(quality.quality);
+            if (qualityInfo) {
+                const qualityButton = qualityInfo.btn;
+                qualityInfo.available = quality.available;
+                const isSelectedQuality = qualityButton.style.color === QUALITY_COLORS.SELECTED;
+
+                if (quality.available) {
+                    if(!isSelectedQuality) {
+                        qualityButton.style.color = QUALITY_COLORS.AVAILABLE;
+                    }
                 } else {
                     qualityButton.style.color = QUALITY_COLORS.UNAVAILABLE;
                 }
+                const self = this;
+                for (const spatialLayer of quality.layersInfo.spatialLayers) {
+                    const localLayerInfo = qualityInfo.layerButtons.spatialLayerButtons.get(spatialLayer.sid);
+                    if (localLayerInfo) {
+                        if (spatialLayer.available) {
+                            localLayerInfo.btn.style.color = QUALITY_COLORS.AVAILABLE;
+                        } else {
+                            localLayerInfo.btn.style.color = QUALITY_COLORS.UNAVAILABLE;
+                        }
+                        localLayerInfo.btn.innerText = "sid-" + spatialLayer.sid + " | " + spatialLayer.resolution.width + "x" + spatialLayer.resolution.height;
+                    } else {
+                        const layerButton = document.createElement("button");
+                        layerButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+                        if (!isSelectedQuality) {
+                            hideItem(layerButton);
+                        }
+                        layerButton.innerText = "sid-" + spatialLayer.sid + " | " + spatialLayer.resolution.width + "x" + spatialLayer.resolution.height;
+                        layerButton.addEventListener('click', async function () {
+                            console.log("Clicked on sid button " + spatialLayer.sid);
+                            if (layerButton.style.color === QUALITY_COLORS.SELECTED || layerButton.style.color === QUALITY_COLORS.UNAVAILABLE || !videoElement) {
+                                return;
+                            }
+                            if (self.sidListener) {
+                                lock();
+                                self.sidListener(spatialLayer.sid).finally(() => {
+                                    unlock();
+                                    repickSid(quality.quality, spatialLayer.sid);
+                                });
+                            }
+                        });
+                        if (spatialLayer.available) {
+                            layerButton.style.color = QUALITY_COLORS.AVAILABLE;
+                        } else {
+                            layerButton.style.color = QUALITY_COLORS.UNAVAILABLE;
+                        }
+                        qualityInfo.layerButtons.spatialLayerButtons.set(spatialLayer.sid, {
+                            btn: layerButton,
+                            layerInfo: spatialLayer
+                        });
+                        qualityDisplay.appendChild(layerButton);
+                    }
+                }
+
+                for (const temporalLayer of quality.layersInfo.temporalLayers) {
+                    const localLayerInfo = qualityInfo.layerButtons.temporalLayerButtons.get(temporalLayer.tid);
+                    if (localLayerInfo) {
+                        if (temporalLayer.available) {
+                            localLayerInfo.btn.style.color = QUALITY_COLORS.AVAILABLE;
+                        } else {
+                            localLayerInfo.btn.style.color = QUALITY_COLORS.UNAVAILABLE;
+                        }
+                        localLayerInfo.btn.innerText = "tid-" + temporalLayer.tid;
+                    } else {
+                        const layerButton = document.createElement("button");
+                        layerButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+                        if (!isSelectedQuality) {
+                            hideItem(layerButton);
+                        }
+                        layerButton.innerText = "tid-" + temporalLayer.tid;
+                        layerButton.addEventListener('click', async function () {
+                            console.log("Clicked on tid button " + temporalLayer.tid);
+                            if (layerButton.style.color === QUALITY_COLORS.SELECTED || layerButton.style.color === QUALITY_COLORS.UNAVAILABLE || !videoElement) {
+                                return;
+                            }
+                            if (self.tidListener) {
+                                lock();
+                                self.tidListener(temporalLayer.tid).finally(() => {
+                                    unlock();
+                                    repickTid(quality.quality, temporalLayer.tid);
+                                });
+                            }
+                        });
+                        if (temporalLayer.available) {
+                            layerButton.style.color = QUALITY_COLORS.AVAILABLE;
+                        } else {
+                            layerButton.style.color = QUALITY_COLORS.UNAVAILABLE;
+                        }
+                        qualityInfo.layerButtons.temporalLayerButtons.set(temporalLayer.tid, {
+                            btn: layerButton,
+                            layerInfo: temporalLayer
+                        })
+                        qualityDisplay.appendChild(layerButton);
+                    }
+                }
             }
         },
-        addQuality: function (qualityName, available, onPickQuality) {
+        addQuality: function (quality, onQualityClick) {
+            console.log("addQuality" + quality.available);
+
             const qualityButton = document.createElement("button");
-            qualityButtons.set(qualityName, {btn: qualityButton, available: available});
-            qualityButton.innerText = qualityName;
+            qualityButton.innerText = quality.quality;
             qualityButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
-            if (available) {
+            if (quality.available) {
                 qualityButton.style.color = QUALITY_COLORS.AVAILABLE;
             } else {
                 qualityButton.style.color = QUALITY_COLORS.UNAVAILABLE;
             }
             qualityDisplay.appendChild(qualityButton);
+            const self = this;
             qualityButton.addEventListener('click', async function () {
-                console.log("Clicked on quality button " + qualityName);
+                console.log("Clicked on quality button " + quality.quality);
                 if (qualityButton.style.color === QUALITY_COLORS.SELECTED || qualityButton.style.color === QUALITY_COLORS.UNAVAILABLE || !videoElement) {
                     return;
                 }
                 lock();
-                onPickQuality().finally(() => unlock());
+                onQualityClick().finally(() => {
+                    unlock();
+                    repickQuality(quality.quality);
+                });
+            });
+
+            const spatialLayers = new Map();
+            for (const spatialLayer of quality.layersInfo.spatialLayers) {
+                const layerButton = document.createElement("button");
+                layerButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+                hideItem(layerButton);
+                layerButton.innerText = "sid-" + spatialLayer.sid + " | " + spatialLayer.resolution.width + "x" + spatialLayer.resolution.height;
+                layerButton.addEventListener('click', async function () {
+                    console.log("Clicked on sid button " + spatialLayer.sid);
+                    if (layerButton.style.color === QUALITY_COLORS.SELECTED || layerButton.style.color === QUALITY_COLORS.UNAVAILABLE || !videoElement) {
+                        return;
+                    }
+                    if (self.sidListener) {
+                        lock();
+                        self.sidListener(spatialLayer.sid).finally(() => {
+                            unlock();
+                            repickSid(quality.quality, spatialLayer.sid);
+                        });
+                    }
+                });
+                if (spatialLayer.available) {
+                    layerButton.style.color = QUALITY_COLORS.AVAILABLE;
+                } else {
+                    layerButton.style.color = QUALITY_COLORS.UNAVAILABLE;
+                }
+                spatialLayers.set(spatialLayer.sid, {btn: layerButton, layerInfo: spatialLayer});
+                qualityDisplay.appendChild(layerButton);
+            }
+
+            const temporalLayers = new Map();
+            for (const temporalLayer of quality.layersInfo.temporalLayers) {
+                const layerButton = document.createElement("button");
+                layerButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+                hideItem(layerButton);
+                layerButton.innerText = "tid-" + temporalLayer.tid;
+                layerButton.addEventListener('click', async function () {
+                    console.log("Clicked on tid button " + temporalLayer.tid);
+                    if (layerButton.style.color === QUALITY_COLORS.SELECTED || layerButton.style.color === QUALITY_COLORS.UNAVAILABLE || !videoElement) {
+                        return;
+                    }
+                    if (self.tidListener) {
+                        lock();
+                        self.tidListener(temporalLayer.tid).finally(() => {
+                            unlock();
+                            repickTid(quality.quality, temporalLayer.tid);
+                        });
+                    }
+                });
+                if (temporalLayer.available) {
+                    layerButton.style.color = QUALITY_COLORS.AVAILABLE;
+                } else {
+                    layerButton.style.color = QUALITY_COLORS.UNAVAILABLE;
+                }
+                temporalLayers.set(temporalLayer.tid, {btn: layerButton, layerInfo: temporalLayer})
+                qualityDisplay.appendChild(layerButton);
+            }
+            qualityButtons.set(quality.quality, {
+                btn: qualityButton,
+                available: quality.available,
+                layerButtons: {spatialLayerButtons: spatialLayers, temporalLayerButtons: temporalLayers}
             });
         },
         pickQuality: function (qualityName) {
@@ -930,10 +1158,10 @@ const createOneToOneParticipantView = function () {
                 player.dispose();
             }
         },
-        addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler) {
+        addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler, onSidClick, onTidClick) {
             const player = videoPlayers.get(track.mid);
             if (player) {
-                player.setVideoSource(remoteVideoTrack, onResize, muteHandler);
+                player.setVideoSource(remoteVideoTrack, onResize, muteHandler, onSidClick, onTidClick);
             }
         },
         removeVideoSource: function (track) {
@@ -969,10 +1197,10 @@ const createOneToOneParticipantView = function () {
                 player.updateQuality(qualityName, available);
             }
         },
-        addQuality: function (track, qualityName, available, onQualityPick) {
+        addQuality: function (track, quality, onQualityPick) {
             const player = videoPlayers.get(track.mid);
             if (player) {
-                player.addQuality(qualityName, available, onQualityPick);
+                player.addQuality(quality, onQualityPick);
             }
         },
         pickQuality: function (track, qualityName) {
@@ -1040,6 +1268,10 @@ const createOneToOneParticipantModel = function (userId, nickname, participantVi
                         } else {
                             return self.unmuteVideo(track);
                         }
+                    }, (sid) => {
+                        return remoteTrack.setSid(sid)
+                    }, (tid) => {
+                        return remoteTrack.setTid(tid)
                     });
                     self.requestVideoTrack(track, remoteTrack).then(() => {
                         participantView.showVideoTrack(track);
@@ -1127,6 +1359,23 @@ const createOneToOneParticipantModel = function (userId, nickname, participantVi
                         const quality = track.quality.find((q) => q.quality === remoteQualityInfo.quality);
                         if (quality) {
                             quality.available = remoteQualityInfo.available;
+                            for(const info of remoteQualityInfo.layersInfo.temporalLayers) {
+                                const localTidInfo = quality.layersInfo.temporalLayers.find((t) => t.tid === info.tid);
+                                if(localTidInfo) {
+                                    localTidInfo.available = info.available;
+                                } else {
+                                    quality.layersInfo.temporalLayers.push(info);
+                                }
+                            }
+                            for(const info of remoteQualityInfo.layersInfo.spatialLayers) {
+                                const localSidInfo = quality.layersInfo.spatialLayers.find((s) => s.sid === info.sid);
+                                if(localSidInfo) {
+                                    localSidInfo.available = info.available;
+                                    localSidInfo.resolution = info.resolution;
+                                } else {
+                                    quality.layersInfo.spatialLayers.push(info);
+                                }
+                            }
                         } else {
                             track.quality.push(remoteQualityInfo);
                         }
@@ -1136,7 +1385,7 @@ const createOneToOneParticipantModel = function (userId, nickname, participantVi
                 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 () => {
+                    participantView.addQuality(track, {quality:"Auto",available:true,layersInfo:{spatialLayers:[],temporalLayers:[]}}, async () => {
                         const manager = self.abrManagers.get(track.id);
                         if (!manager) {
                             return;
@@ -1155,6 +1404,23 @@ const createOneToOneParticipantModel = function (userId, nickname, participantVi
                     const localQuality = track.quality.find((q) => q.quality === remoteQualityInfo.quality);
                     if (localQuality) {
                         localQuality.available = remoteQualityInfo.available;
+                        for(const info of remoteQualityInfo.layersInfo.temporalLayers) {
+                            const localTidInfo = localQuality.layersInfo.temporalLayers.find((t) => t.tid === info.tid);
+                            if(localTidInfo) {
+                                localTidInfo.available = info.available;
+                            } else {
+                                localQuality.layersInfo.temporalLayers.push(info);
+                            }
+                        }
+                        for(const info of remoteQualityInfo.layersInfo.spatialLayers) {
+                            const localSidInfo = localQuality.layersInfo.spatialLayers.find((s) => s.sid === info.sid);
+                            if(localSidInfo) {
+                                localSidInfo.available = info.available;
+                                localSidInfo.resolution = info.resolution;
+                            } else {
+                                localQuality.layersInfo.spatialLayers.push(info);
+                            }
+                        }
                         if (abrManager) {
                             abrManager.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available);
                         }
@@ -1169,13 +1435,13 @@ const createOneToOneParticipantModel = function (userId, nickname, participantVi
                         }
                         if (displayOptions.quality) {
                             const self = this;
-                            participantView.addQuality(track, remoteQualityInfo.quality, remoteQualityInfo.available, async () => {
+                            participantView.addQuality(track, remoteQualityInfo, async (sid, tid) => {
                                 const manager = self.abrManagers.get(track.id);
                                 if (manager) {
                                     manager.setManual();
                                     manager.setQuality(remoteQualityInfo.quality);
                                 }
-                                return self.pickQuality(track, remoteQualityInfo.quality);
+                                return self.pickQuality(track, remoteQualityInfo.quality, sid, tid);
                             });
                         }
                     }
@@ -1208,7 +1474,7 @@ const createOneToOneParticipantModel = function (userId, nickname, participantVi
                         abrManager.setTrack(remoteTrack);
                         abrManager.stop();
                         if (track.quality.length > 0) {
-                            participantView.addQuality(track, "Auto", true, async () => {
+                            participantView.addQuality(track, {quality:"Auto",available:true, layersInfo:{spatialLayers:[],temporalLayers:[]}}, async () => {
                                 const manager = self.abrManagers.get(track.id);
                                 if (!manager) {
                                     return;
@@ -1230,7 +1496,7 @@ const createOneToOneParticipantModel = function (userId, nickname, participantVi
                             abrManager.setQualityAvailable(qualityDescriptor.quality, qualityDescriptor.available);
                         }
                         if (displayOptions.quality) {
-                            participantView.addQuality(track, qualityDescriptor.quality, qualityDescriptor.available, async () => {
+                            participantView.addQuality(track, qualityDescriptor, async () => {
                                 const manager = self.abrManagers.get(track.id);
                                 if (manager) {
                                     manager.setManual();
@@ -1248,11 +1514,11 @@ const createOneToOneParticipantModel = function (userId, nickname, participantVi
                 });
             });
         },
-        pickQuality: async function (track, qualityName) {
+        pickQuality: async function (track, qualityName, tid, sid) {
             let remoteVideoTrack = this.remoteVideoTracks.get(track.mid);
             if (remoteVideoTrack) {
-                return remoteVideoTrack.setPreferredQuality(qualityName).then(() => {
-                    participantView.pickQuality(track, qualityName);
+                return remoteVideoTrack.setPreferredQuality(qualityName, sid, tid).then(() => {
+                    participantView.pickQuality(track, qualityName, sid, tid);
                 });
             }
         },
@@ -1311,6 +1577,10 @@ const createOneToManyParticipantModel = function (userId, nickname, participantV
                 } else {
                     return model.unmuteVideo(anotherTrack);
                 }
+            }, (sid) => {
+                return model.remoteVideoTrack.setSid(sid)
+            }, (tid) => {
+                return model.remoteVideoTrack.setTid(tid)
             });
             model.requestVideoTrack(anotherTrack, model.remoteVideoTrack).then(() => {
                 participantView.showVideoTrack(anotherTrack)
@@ -1472,7 +1742,7 @@ const createOneToManyParticipantModel = function (userId, nickname, participantV
 
         },
         setUserId: function (userId) {
-          this.userId = userId;
+            this.userId = userId;
         },
         setNickname: function (nickname) {
             this.nickname = nickname;
@@ -1490,15 +1760,32 @@ const createOneToManyParticipantModel = function (userId, nickname, participantV
                         const quality = track.quality.find((q) => q.quality === remoteQualityInfo.quality);
                         if (quality) {
                             quality.available = remoteQualityInfo.available;
+                            for(const info of remoteQualityInfo.layersInfo.temporalLayers) {
+                                const localTidInfo = quality.layersInfo.temporalLayers.find((t) => t.tid === info.tid);
+                                if(localTidInfo) {
+                                    localTidInfo.available = info.available;
+                                } else {
+                                    quality.layersInfo.temporalLayers.push(info);
+                                }
+                            }
+                            for(const info of remoteQualityInfo.layersInfo.spatialLayers) {
+                                const localSidInfo = quality.layersInfo.spatialLayers.find((s) => s.sid === info.sid);
+                                if(localSidInfo) {
+                                    localSidInfo.available = info.available;
+                                    localSidInfo.resolution = info.resolution;
+                                } else {
+                                    quality.layersInfo.spatialLayers.push(info);
+                                }
+                            }
                         } else {
                             track.quality.push(remoteQualityInfo);
                         }
                     }
-                    return;
+                    continue;
                 }
                 if (this.abr && track.quality.length === 0 && remoteTrackQuality.quality.length > 0) {
                     const self = this;
-                    participantView.addQuality(track, "Auto", true, async () => {
+                    participantView.addQuality(track, {quality:"Auto",available:true, layersInfo:{spatialLayers:[],temporalLayers:[]}}, async () => {
                         if (!self.abr) {
                             return;
                         }
@@ -1516,11 +1803,28 @@ const createOneToManyParticipantModel = function (userId, nickname, participantV
                     const localQuality = track.quality.find((q) => q.quality === remoteQualityInfo.quality);
                     if (localQuality) {
                         localQuality.available = remoteQualityInfo.available;
+                        for(const info of remoteQualityInfo.layersInfo.temporalLayers) {
+                            const localTidInfo = localQuality.layersInfo.temporalLayers.find((t) => t.tid === info.tid);
+                            if(localTidInfo) {
+                                localTidInfo.available = info.available;
+                            } else {
+                                localQuality.layersInfo.temporalLayers.push(info);
+                            }
+                        }
+                        for(const info of remoteQualityInfo.layersInfo.spatialLayers) {
+                            const localSidInfo = localQuality.layersInfo.spatialLayers.find((s) => s.sid === info.sid);
+                            if(localSidInfo) {
+                                localSidInfo.available = info.available;
+                                localSidInfo.resolution = info.resolution;
+                            } else {
+                                localQuality.layersInfo.spatialLayers.push(info);
+                            }
+                        }
                         if (this.abr) {
                             this.abr.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available)
                         }
                         if (displayOptions.quality) {
-                            participantView.updateQuality(track, localQuality.quality, localQuality.available);
+                            participantView.updateQuality(track, remoteQualityInfo);
                         }
                     } else {
                         track.quality.push(remoteQualityInfo);
@@ -1530,7 +1834,7 @@ const createOneToManyParticipantModel = function (userId, nickname, participantV
                         }
                         if (displayOptions.quality) {
                             const self = this;
-                            participantView.addQuality(track, remoteQualityInfo.quality, remoteQualityInfo.available, async () => {
+                            participantView.addQuality(track, remoteQualityInfo, async () => {
                                 if (self.abr) {
                                     self.abr.setManual();
                                     self.abr.setQuality(remoteQualityInfo.quality);
@@ -1563,7 +1867,7 @@ const createOneToManyParticipantModel = function (userId, nickname, participantV
                         self.abr.setTrack(remoteTrack);
 
                         if (track.quality.length > 0) {
-                            participantView.addQuality(track, "Auto", true, async () => {
+                            participantView.addQuality(track, {quality:"Auto",available:true,layersInfo:{spatialLayers:[],temporalLayers:[]}}, async () => {
                                 if (!self.abr) {
                                     return;
                                 }
@@ -1584,7 +1888,7 @@ const createOneToManyParticipantModel = function (userId, nickname, participantV
                             self.abr.setQualityAvailable(qualityDescriptor.quality, qualityDescriptor.available);
                         }
                         if (displayOptions.quality) {
-                            participantView.addQuality(track, qualityDescriptor.quality, qualityDescriptor.available, async () => {
+                            participantView.addQuality(track, qualityDescriptor, async () => {
                                 if (self.abr) {
                                     self.abr.setManual();
                                     self.abr.setQuality(qualityDescriptor.quality);

package/src/controller/parser.js

@@ -189,9 +189,11 @@ const statsToTable = function(stats) {
                 pStats.push(trackToTable(track, participant.nickName, "NA"));
                 tracksOut++;
                 bitrateOut += track.bitrate;
-                firOut += track.feedbackStats.receivedFIR;
-                pliOut += track.feedbackStats.receivedPLI;
-                nackOut += track.feedbackStats.receivedNACK;
+                if (track.type === 'video' && track.feedbackStats) {
+                    firOut += track.feedbackStats.receivedFIR;
+                    pliOut += track.feedbackStats.receivedPLI;
+                    nackOut += track.feedbackStats.receivedNACK;
+                }
             }
         });
         participant.incomingTracks.forEach(function(track) {