@flashphoner/sfusdk-examples 2.0.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +43 -0
  2. package/package.json +32 -0
  3. package/src/client/chat.js +67 -0
  4. package/src/client/config.json +26 -0
  5. package/src/client/controls.js +314 -0
  6. package/src/client/display.js +502 -0
  7. package/src/client/main.css +45 -0
  8. package/src/client/main.html +220 -0
  9. package/src/client/main.js +157 -0
  10. package/src/client/resources/details_close.png +0 -0
  11. package/src/client/resources/details_open.png +0 -0
  12. package/src/client/util.js +67 -0
  13. package/src/commons/js/config.js +81 -0
  14. package/src/commons/js/display.js +484 -0
  15. package/src/commons/js/util.js +202 -0
  16. package/src/commons/media/silence.mp3 +0 -0
  17. package/src/controller/dependencies/sigma/sigma.renderers.edgeLabels.min.js +1 -0
  18. package/src/controller/dependencies/sigma/sigma.renderers.parallelEdges.min.js +1 -0
  19. package/src/controller/dependencies/sigma/sigma.require.js +12076 -0
  20. package/src/controller/graph-view.js +32 -0
  21. package/src/controller/main.css +45 -0
  22. package/src/controller/main.html +79 -0
  23. package/src/controller/main.js +65 -0
  24. package/src/controller/parser.js +202 -0
  25. package/src/controller/resources/details_close.png +0 -0
  26. package/src/controller/resources/details_open.png +0 -0
  27. package/src/controller/rest.js +56 -0
  28. package/src/controller/table-view.js +64 -0
  29. package/src/controller/test-data.js +382 -0
  30. package/src/player/config.json +8 -0
  31. package/src/player/player.css +19 -0
  32. package/src/player/player.html +54 -0
  33. package/src/player/player.js +209 -0
  34. package/src/sfu.ts +28 -0
  35. package/src/two-way-streaming/config.json +34 -0
  36. package/src/two-way-streaming/two-way-streaming.css +26 -0
  37. package/src/two-way-streaming/two-way-streaming.html +72 -0
  38. package/src/two-way-streaming/two-way-streaming.js +375 -0
  39. package/tsconfig.json +15 -0
  40. package/webpack.config.js +40 -0
package/src/controller/graph-view.js ADDED
@@ -0,0 +1,32 @@
1
+ const createGraphView = function(container) {
2
+ //setup sigma
3
+ const s = new sigma({
4
+ renderer: {
5
+ container: container,
6
+ type: 'canvas'
7
+ },
8
+ settings: {
9
+ minArrowSize: 3,
10
+ edgeLabelSize: 'fixed'
11
+ }
12
+ });
13
+
14
+ const refreshSigma = function(model) {
15
+ s.graph.clear();
16
+ s.refresh();
17
+
18
+ s.graph.read(model);
19
+ s.refresh();
20
+ }
21
+
22
+ const bindNodeClickEvents = function (handler) {
23
+ const eventList = 'clickNode doubleClickNode rightClickNode';
24
+ s.bind(eventList, handler);
25
+ };
26
+
27
+ return {
28
+ s: s,
29
+ bindNodeClickEvents: bindNodeClickEvents,
30
+ refreshSigma: refreshSigma
31
+ }
32
+ }
package/src/controller/main.css ADDED
@@ -0,0 +1,45 @@
1
+ .grid-container {
2
+ display: grid;
3
+ grid-template-columns: auto auto auto;
4
+ width: 1284px;
5
+ height: auto;
6
+ }
7
+ .grid-container-local {
8
+ display: grid;
9
+ grid-template-columns: auto auto;
10
+ width: 1284px;
11
+ height: auto;
12
+ }
13
+ .grid-item {
14
+ border: 1px solid rgba(0, 0, 0, 0.8);
15
+ text-align: center;
16
+ width: 428px;
17
+ height: auto;
18
+ }
19
+
20
+ video, object {
21
+ width: 100%;
22
+ height: 100%;
23
+ }
24
+
25
+ #messages {
26
+ height: 300px;
27
+ overflow-y: auto;
28
+ }
29
+
30
+ .display {
31
+ width: 100%;
32
+ height: 100%;
33
+ display: inline-block;
34
+ }
35
+ caption {
36
+ caption-side:top;
37
+ }
38
+
39
+ td.details-control {
40
+ background: url('resources/details_open.png') no-repeat center center;
41
+ cursor: pointer;
42
+ }
43
+ tr.shown td.details-control {
44
+ background: url('resources/details_close.png') no-repeat center center;
45
+ }
package/src/controller/main.html ADDED
@@ -0,0 +1,79 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
7
+ <!-- JavaScript Bundle with Popper -->
8
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
10
+ <link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"></link>
11
+ <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
12
+
13
+ <script type="text/javascript" src="dependencies/sigma/sigma.require.js"></script>
14
+ <script type="text/javascript" src="dependencies/sigma/sigma.renderers.edgeLabels.min.js"></script>
15
+ <script type="text/javascript" src="dependencies/sigma/sigma.renderers.parallelEdges.min.js"></script>
16
+
17
+ <title>SFU Room Controller</title>
18
+ <link rel="stylesheet" href="main.css">
19
+ <script type="text/javascript" src="parser.js"></script>
20
+ <script type="text/javascript" src="graph-view.js"></script>
21
+ <script type="text/javascript" src="table-view.js"></script>
22
+ <script type="text/javascript" src="rest.js"></script>
23
+ <script type="text/javascript" src="main.js"></script>
24
+ </head>
25
+ <body>
26
+ <div class="container-fluid" id="main">
27
+ <input id="url" type="text" value="http://127.0.0.1:8081">
28
+ <input id="roomName" type="text" value="ROOM1">
29
+ <button id="startButton" onclick="connect()">Connect</button>
30
+ <button id="freeze" disabled>Freeze</button>
31
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
32
+ <li class="nav-item" role="presentation">
33
+ <button class="nav-link active" id="raw-tab" data-bs-toggle="tab" data-bs-target="#raw" type="button" role="tab" aria-controls="raw" aria-selected="true">Raw</button>
34
+ </li>
35
+ <li class="nav-item" role="presentation">
36
+ <button class="nav-link" id="map-tab" data-bs-toggle="tab" data-bs-target="#map" type="button" role="tab" aria-controls="map" aria-selected="false">Map</button>
37
+ </li>
38
+ <li class="nav-item" role="presentation">
39
+ <button class="nav-link" id="config-tab" data-bs-toggle="tab" data-bs-target="#config" type="button" role="tab" aria-controls="config" aria-selected="false">Config</button>
40
+ </li>
41
+ </ul>
42
+ <div class="tab-content" id="myTabContent">
43
+ <div class="tab-pane fade show active" id="raw" role="tabpanel" aria-labelledby="raw-tab">
44
+ <pre id="rawContent"></pre>
45
+ </div>
46
+ <div class="tab-pane fade" id="map" role="tabpanel" aria-labelledby="map-tab">
47
+ <div class="row">
48
+ <div class="col-sm-6">
49
+ <div id="sigmaContainer" style="width: 900px; height: 800px">
50
+ </div>
51
+ </div>
52
+ <div class="col-sm-6">
53
+ <table id="metricTable" class="display">
54
+ <thead>
55
+ <tr>
56
+ <th></th>
57
+ <th>METRIC</th>
58
+ <th>TYPE</th>
59
+ <th>PARTICIPANT</th>>
60
+ <th>ID</th>
61
+ <th>QUALITY</th>
62
+ </tr>
63
+ </thead>
64
+ <tbody id="metricTableBody"></tbody>
65
+ </table>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ <div class="tab-pane fade" id="config" role="tabpanel" aria-labelledby="config-tab">
70
+ <div class="form-group form-inline">
71
+ <label for="pollIntervalInput">Poll interval</label>
72
+ <input type="text" class="form-control" id="pollIntervalInput">
73
+ </div>
74
+ <button id="settingsButton" type="submit" class="btn btn-primary">Submit</button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </body>
79
+ </html>
package/src/controller/main.js ADDED
@@ -0,0 +1,65 @@
1
+ const config = {
2
+ intervals: {
3
+ poll: 3000
4
+ }
5
+ };
6
+
7
+ const connect = function() {
8
+ let freeze = false;
9
+ const urlElem = document.getElementById("url");
10
+ const roomNameElem = document.getElementById("roomName");
11
+ const rawDisplay = document.getElementById("rawContent");
12
+ const startButtonElem = document.getElementById("startButton");
13
+ const freezeButtonElem = document.getElementById("freeze");
14
+ startButtonElem.disabled = true;
15
+ urlElem.disabled = true;
16
+ roomNameElem.disabled = true;
17
+ const url = urlElem.value;
18
+ const roomName = roomNameElem.value;
19
+ const api = createConnection(url, roomName);
20
+ let pollTimeout;
21
+ const pollStats = function() {
22
+ api.stats().then(function(stats){
23
+ if (!freeze) {
24
+ processAndDisplay(stats);
25
+ pollTimeout = setTimeout(pollStats, config.intervals.poll);
26
+ }
27
+ }, function(e) {
28
+ console.log("Failed to poll stats " + e);
29
+ if (!freeze) {
30
+ rawDisplay.innerHTML = "Failed to poll stats " + e;
31
+ pollTimeout = setTimeout(pollStats, config.intervals.poll);
32
+ }
33
+ })
34
+ }
35
+
36
+ freezeButtonElem.addEventListener("click", function(){
37
+ if (freezeButtonElem.innerText === "Freeze") {
38
+ freeze = true;
39
+ clearTimeout(pollTimeout);
40
+ freezeButtonElem.innerText = "Unfreeze";
41
+ } else {
42
+ freeze = false;
43
+ pollStats();
44
+ freezeButtonElem.innerText = "Freeze";
45
+ }
46
+ });
47
+ freezeButtonElem.disabled = false;
48
+
49
+ const gView = createGraphView('sigmaContainer');
50
+ const tView = createMetricTable();
51
+ let tData, gData;
52
+ const processAndDisplay = function(stats) {
53
+ rawDisplay.innerHTML = JSON.stringify(stats, null, 2);
54
+ tData = statsToTable(stats);
55
+ gData = statsToGraph(stats);
56
+ gView.refreshSigma(gData);
57
+ tView.updateMetricTable(tData.WCS, "WCS");
58
+ }
59
+
60
+ gView.bindNodeClickEvents(function(e){
61
+ tView.updateMetricTable(tData[e.data.node.id], e.data.node.id);
62
+ });
63
+ //kick off stats polling
64
+ pollStats();
65
+ }
package/src/controller/parser.js ADDED
@@ -0,0 +1,202 @@
1
+ const statsToGraph = function(stats) {
2
+ let g = {
3
+ nodes: [],
4
+ edges: []
5
+ }
6
+
7
+ const wcsId = "WCS";
8
+ const edgeType = 'curvedArrow';
9
+ let eIndex = 0;
10
+ const fromServerColour = '#00ff40';
11
+ const fromParticipantColour = '#3a8dc6';
12
+ const deadTrackColour = '#ff2800';
13
+ const nodeSize = 5;
14
+ const edgeSize = 2;
15
+
16
+ g.nodes.push({
17
+ id: wcsId,
18
+ label: wcsId,
19
+ // Display attributes:
20
+ x: 0,
21
+ y: 0,
22
+ size: nodeSize,
23
+ color: fromServerColour
24
+ });
25
+
26
+ const calcPoints = function(radius, qty) {
27
+ const ret = [];
28
+ const stepRad = 360/qty * Math.PI / 180;
29
+ for (let i = 0; i < qty; i++) {
30
+ let angle = i * stepRad;
31
+ let x = Math.cos(angle) * radius;
32
+ let y = Math.sin(angle) * radius;
33
+ ret.push({
34
+ x: x,
35
+ y: y
36
+ });
37
+ }
38
+ return ret;
39
+ }
40
+
41
+ const points = calcPoints(800, stats.participants.length);
42
+ stats.participants.forEach(function(participant){
43
+ let count = 0;
44
+ let point = points.pop();
45
+ g.nodes.push({
46
+ id: participant.nickName,
47
+ label: participant.nickName,
48
+ // Display attributes:
49
+ x: point.x,
50
+ y: point.y,
51
+ size: nodeSize,
52
+ color: fromParticipantColour
53
+ });
54
+ participant.outgoingTracks.forEach(function(track){
55
+ if (track.composite) {
56
+ for (const [key, value] of Object.entries(track.tracks)) {
57
+ g.edges.push({
58
+ id: 'e' + eIndex,
59
+ // Reference extremities:
60
+ source: participant.nickName,
61
+ target: wcsId,
62
+ label: value.id + "-" + key,
63
+ count: count++,
64
+ size: edgeSize,
65
+ type: edgeType,
66
+ color: value.alive ? fromParticipantColour : deadTrackColour
67
+ });
68
+ eIndex++;
69
+ }
70
+ } else {
71
+ g.edges.push({
72
+ id: 'e' + eIndex,
73
+ // Reference extremities:
74
+ source: participant.nickName,
75
+ target: wcsId,
76
+ label: track.id,
77
+ count: count++,
78
+ size: edgeSize,
79
+ type: edgeType,
80
+ color: track.alive ? fromParticipantColour : deadTrackColour
81
+ });
82
+ eIndex++;
83
+ }
84
+ });
85
+ for (const [key, value] of Object.entries(participant.incomingTracks)) {
86
+ g.edges.push({
87
+ id: 'e' + eIndex,
88
+ // Reference extremities:
89
+ source: wcsId,
90
+ target: participant.nickName,
91
+ label: value ? key + "-" + value : key,
92
+ count: count++,
93
+ size: edgeSize,
94
+ type: edgeType,
95
+ color: fromServerColour
96
+ });
97
+ eIndex++;
98
+ }
99
+ });
100
+ return g;
101
+ }
102
+
103
+ const statsToTable = function(stats) {
104
+ const NA = "NA";
105
+ const tKey = function(str1, str2) {
106
+ if (str1 && str2) {
107
+ return str1.replaceAll(" ", "") + str2.replaceAll(" ", "");
108
+ }
109
+ return str1;
110
+ }
111
+ const trackToTable = function(track, nickName, quality) {
112
+ return {
113
+ metric: "track",
114
+ type: track.type,
115
+ participant: nickName,
116
+ id: track.id,
117
+ quality: quality,
118
+ details: track
119
+ }
120
+ }
121
+ const metricToTable = function(name, value, nickName) {
122
+ return {
123
+ metric: name,
124
+ type: value,
125
+ participant: nickName,
126
+ id: NA,
127
+ quality: NA,
128
+ details: {}
129
+ }
130
+ }
131
+
132
+ const metrics = {};
133
+ metrics.WCS = [];
134
+ let bitrate_in = 0;
135
+ let tracks_in = 0;
136
+
137
+ const src = {};
138
+ stats.participants.forEach(function(participant){
139
+ participant.outgoingTracks.forEach(function(track){
140
+ if (track.composite) {
141
+ for (const [key, value] of Object.entries(track.tracks)) {
142
+ src[tKey(value.id, key)] = value;
143
+ value.nickName = participant.nickName;
144
+ bitrate_in += value.bitrate;
145
+ tracks_in++;
146
+ }
147
+ } else {
148
+ src[tKey(track.id)] = track;
149
+ track.nickName = participant.nickName;
150
+ bitrate_in += track.bitrate;
151
+ tracks_in++;
152
+ }
153
+ });
154
+ });
155
+ let bitrate_out = 0;
156
+ let tracks_out = 0;
157
+ stats.participants.forEach(function(participant){
158
+ for (const [key, value] of Object.entries(participant.incomingTracks)) {
159
+ const srcTrack = src[tKey(key, value)];
160
+ bitrate_out += srcTrack.bitrate;
161
+ tracks_out++;
162
+ }
163
+ });
164
+ metrics.WCS.push(metricToTable("participants", stats.participants.length, NA));
165
+ metrics.WCS.push(metricToTable("bitrate_in", bitrate_in, NA));
166
+ metrics.WCS.push(metricToTable("bitrate_out", bitrate_out, NA));
167
+ metrics.WCS.push(metricToTable("tracks_in", tracks_in, NA));
168
+ metrics.WCS.push(metricToTable("tracks_out", tracks_out, NA));
169
+ stats.participants.forEach(function(participant){
170
+ const pStats = [];
171
+ let tracksIn = 0;
172
+ let tracksOut = 0;
173
+ let bitrateIn = 0;
174
+ let bitrateOut = 0;
175
+ participant.outgoingTracks.forEach(function(track){
176
+ if (track.composite) {
177
+ for (const [key, value] of Object.entries(track.tracks)) {
178
+ pStats.push(trackToTable(value, participant.nickName, key));
179
+ tracksOut++;
180
+ bitrateOut += value.bitrate;
181
+ }
182
+ } else {
183
+ pStats.push(trackToTable(track, participant.nickName, "NA"));
184
+ tracksOut++;
185
+ bitrateOut += track.bitrate;
186
+ }
187
+ });
188
+ for (const [key, value] of Object.entries(participant.incomingTracks)) {
189
+ const srcTrack = src[tKey(key, value)];
190
+ pStats.push(trackToTable(srcTrack, srcTrack.nickName, value));
191
+ tracksIn++;
192
+ bitrateIn += srcTrack.bitrate;
193
+ }
194
+ pStats.push(metricToTable("tracks_in", tracksIn, participant.nickName));
195
+ pStats.push(metricToTable("bitrate_in", bitrateIn, participant.nickName));
196
+ pStats.push(metricToTable("tracks_out", tracksOut, participant.nickName));
197
+ pStats.push(metricToTable("bitrate_out", bitrateOut, participant.nickName));
198
+ metrics[participant.nickName] = pStats;
199
+ });
200
+
201
+ return metrics;
202
+ }
package/src/controller/rest.js ADDED
@@ -0,0 +1,56 @@
1
+ const SFU_PATH = "/rest-api/sfu/";
2
+
3
+ const createConnection = function(url, roomName) {
4
+ const stats = function() {
5
+ return send(url + SFU_PATH + "stats", {
6
+ roomName: roomName
7
+ });
8
+ }
9
+ return {
10
+ stats: stats
11
+ }
12
+ }
13
+
14
+
15
+ /** XHR WRAPPER **/
16
+ const send = function(uri, data, responseIsText) {
17
+ return new Promise(function(resolve, reject) {
18
+ var xhr = new XMLHttpRequest();
19
+ if (data) {
20
+ xhr.open('POST', uri, true);
21
+ xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
22
+ } else {
23
+ xhr.open('GET', uri, true);
24
+ }
25
+ xhr.responseType = 'text';
26
+ xhr.onload = function (e) {
27
+ if (this.status === 200) {
28
+ if (this.response) {
29
+ if (!responseIsText) {
30
+ resolve(JSON.parse(this.response));
31
+ } else {
32
+ resolve(this.response);
33
+ }
34
+ } else {
35
+ resolve();
36
+ }
37
+ } else {
38
+ reject(this);
39
+ }
40
+ };
41
+ xhr.onreadystatechange = function () {
42
+ if (xhr.readyState === 4){
43
+ if(xhr.status === 200){
44
+ //success
45
+ } else {
46
+ reject();
47
+ }
48
+ }
49
+ };
50
+ if (data) {
51
+ xhr.send(JSON.stringify(data));
52
+ } else {
53
+ xhr.send();
54
+ }
55
+ });
56
+ };
package/src/controller/table-view.js ADDED
@@ -0,0 +1,64 @@
1
+ const createMetricTable = function() {
2
+ const updateMetricTable = function(data, caption) {
3
+ metricTableCaption.innerHTML = caption;
4
+ metricTable.clear();
5
+ data.forEach(function(value) {
6
+ metricTable.row.add(value);
7
+ });
8
+ metricTable.draw();
9
+ }
10
+
11
+ //setup table
12
+ const metricTable = $('#metricTable').DataTable({
13
+ "columns": [
14
+ {
15
+ "className": 'details-control',
16
+ "orderable": false,
17
+ "data": null,
18
+ "defaultContent": ''
19
+ },
20
+ {"data": "metric"},
21
+ {"data": "type"},
22
+ {"data": "participant"},
23
+ {"data": "id"},
24
+ {"data": "quality"}
25
+ ]
26
+ });
27
+
28
+ const format = function(d) {
29
+ let details = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
30
+ for (const [key, value] of Object.entries(d.details)) {
31
+ details += '<tr>'+
32
+ '<td>'+ key + '</td>'+
33
+ '<td>'+ value + '</td>'+
34
+ '</tr>';
35
+ }
36
+ details +='</table>';
37
+ return details;
38
+ }
39
+
40
+ // Add event listener for opening and closing details
41
+ $('#metricTableBody').on('click', 'td.details-control', function () {
42
+ var tr = $(this).closest('tr');
43
+ var row = metricTable.row( tr );
44
+
45
+ if ( row.child.isShown() ) {
46
+ // This row is already open - close it
47
+ row.child.hide();
48
+ tr.removeClass('shown');
49
+ }
50
+ else {
51
+ // Open this row
52
+ row.child( format(row.data()) ).show();
53
+ tr.addClass('shown');
54
+ }
55
+ });
56
+
57
+ const metricTableCaption = document.getElementById("metricTable").createCaption();
58
+
59
+
60
+
61
+ return {
62
+ updateMetricTable: updateMetricTable
63
+ }
64
+ }