@flashphoner/sfusdk-examples 2.0.323 → 2.0.330
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.
- package/package.json +1 -1
- package/src/bitrate_test/bitrate_test.html +3 -6
- package/src/client/controls.js +5 -3
- package/src/client/main.html +118 -107
- package/src/client/main.js +14 -1
- package/src/commons/dependencies/bootstrap@5.0.0-beta3/css/bootstrap.min.css +7 -0
- package/src/commons/dependencies/bootstrap@5.0.0-beta3/js/bootstrap.bundle.min.js +7 -0
- package/src/commons/dependencies/datatables@1.10.24/css/jquery.dataTables.min.css +1 -0
- package/src/commons/dependencies/datatables@1.10.24/images/Sorting icons.psd +0 -0
- package/src/commons/dependencies/datatables@1.10.24/images/favicon.ico +0 -0
- package/src/commons/dependencies/datatables@1.10.24/images/sort_asc.png +0 -0
- package/src/commons/dependencies/datatables@1.10.24/images/sort_asc_disabled.png +0 -0
- package/src/commons/dependencies/datatables@1.10.24/images/sort_both.png +0 -0
- package/src/commons/dependencies/datatables@1.10.24/images/sort_desc.png +0 -0
- package/src/commons/dependencies/datatables@1.10.24/images/sort_desc_disabled.png +0 -0
- package/src/commons/dependencies/datatables@1.10.24/js/jquery.dataTables.min.js +184 -0
- package/src/commons/dependencies/jquery@3.6.0/jquery.min.js +2 -0
- package/src/commons/js/display.js +54 -27
- package/src/controller/main.html +7 -6
- package/src/controller/main.js +6 -0
- package/src/player/player.html +3 -6
- package/src/player/player.js +1 -1
- package/src/track-test/track-test.html +3 -6
- package/src/two-way-streaming/two-way-streaming.html +3 -6
- package/src/webrtc-abr-player/player.html +3 -6
package/package.json
CHANGED
|
@@ -4,13 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
6
|
<title>Bitrate test</title>
|
|
7
|
-
<link href="
|
|
8
|
-
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
|
7
|
+
<link href="../commons/dependencies/bootstrap@5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">
|
|
9
8
|
<!-- JavaScript Bundle with Popper -->
|
|
10
|
-
<script src="
|
|
11
|
-
|
|
12
|
-
crossorigin="anonymous"></script>
|
|
13
|
-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
|
9
|
+
<script src="../commons/dependencies/bootstrap@5.0.0-beta3/js/bootstrap.bundle.min.js"></script>
|
|
10
|
+
<script src="../commons/dependencies/jquery@3.6.0/jquery.min.js"></script>
|
|
14
11
|
<link rel="stylesheet" href="bitrate_test.css">
|
|
15
12
|
<script type="text/javascript" src="../sfu.js"></script>
|
|
16
13
|
<script type="text/javascript" src="../commons/js/util.js"></script>
|
package/src/client/controls.js
CHANGED
|
@@ -10,7 +10,8 @@ const createControls = function (config) {
|
|
|
10
10
|
roomPin: document.getElementById("roomPin"),
|
|
11
11
|
nickName: document.getElementById("nickName"),
|
|
12
12
|
enter: document.getElementById("startButton"),
|
|
13
|
-
transport: document.getElementById("transport")
|
|
13
|
+
transport: document.getElementById("transport"),
|
|
14
|
+
participantViewType: document.getElementById("participantViewType"),
|
|
14
15
|
},
|
|
15
16
|
addVideoTrack: {
|
|
16
17
|
source: document.getElementById("addVideoTrackSource"),
|
|
@@ -69,7 +70,7 @@ const createControls = function (config) {
|
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
//apply room config
|
|
72
|
-
controls.entrance.url.value = config.room.url;
|
|
73
|
+
controls.entrance.url.value = (config.room.url && config.room.url.indexOf("127.0.0.1") === -1) ? config.room.url : setURL();
|
|
73
74
|
controls.entrance.roomName.value = config.room.name;
|
|
74
75
|
controls.entrance.roomPin.value = config.room.pin;
|
|
75
76
|
controls.entrance.nickName.value = config.room.nickName;
|
|
@@ -173,7 +174,8 @@ const createControls = function (config) {
|
|
|
173
174
|
roomName: controls.entrance.roomName.value,
|
|
174
175
|
pin: controls.entrance.roomPin.value,
|
|
175
176
|
nickname: controls.entrance.nickName.value,
|
|
176
|
-
transport: controls.entrance.transport.value
|
|
177
|
+
transport: controls.entrance.transport.value,
|
|
178
|
+
participantViewType: controls.entrance.participantViewType.value,
|
|
177
179
|
};
|
|
178
180
|
if (config.room.failedProbesThreshold !== undefined) {
|
|
179
181
|
roomConfig.failedProbesThreshold = config.room.failedProbesThreshold;
|
package/src/client/main.html
CHANGED
|
@@ -4,15 +4,12 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
6
|
<title>SFU Client</title>
|
|
7
|
-
<link href="
|
|
8
|
-
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
|
7
|
+
<link href="../commons/dependencies/bootstrap@5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">
|
|
9
8
|
<!-- JavaScript Bundle with Popper -->
|
|
10
|
-
<script src="
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<script src="
|
|
14
|
-
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
|
|
15
|
-
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
|
|
9
|
+
<script src="../commons/dependencies/bootstrap@5.0.0-beta3/js/bootstrap.bundle.min.js"></script>
|
|
10
|
+
<script src="../commons/dependencies/jquery@3.6.0/jquery.min.js"></script>
|
|
11
|
+
<link href="../commons/dependencies/datatables@1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
|
|
12
|
+
<script src="../commons/dependencies/datatables@1.10.24/js/jquery.dataTables.min.js"></script>
|
|
16
13
|
<link rel="stylesheet" href="main.css">
|
|
17
14
|
<script type="text/javascript" src="../sfu.js"></script>
|
|
18
15
|
<script type="text/javascript" src="chat.js"></script>
|
|
@@ -33,51 +30,56 @@
|
|
|
33
30
|
<!-- Tracks console -->
|
|
34
31
|
<ul class="nav nav-tabs" id="tracksTablist" role="tablist">
|
|
35
32
|
<li class="nav-item" role="presentation">
|
|
36
|
-
<button class="nav-link active" id="videoTracksTab" data-bs-toggle="tab"
|
|
33
|
+
<button class="nav-link active" id="videoTracksTab" data-bs-toggle="tab"
|
|
34
|
+
data-bs-target="#videoTracks" type="button" role="tab" aria-controls="videoTracks"
|
|
35
|
+
aria-selected="true">VideoTracks
|
|
36
|
+
</button>
|
|
37
37
|
</li>
|
|
38
38
|
<li class="nav-item" role="presentation">
|
|
39
|
-
<button class="nav-link" id="audioTracksTab" data-bs-toggle="tab" data-bs-target="#audioTracks"
|
|
39
|
+
<button class="nav-link" id="audioTracksTab" data-bs-toggle="tab" data-bs-target="#audioTracks"
|
|
40
|
+
type="button" role="tab" aria-controls="audioTracks" aria-selected="false">AudioTracks
|
|
41
|
+
</button>
|
|
40
42
|
</li>
|
|
41
43
|
</ul>
|
|
42
44
|
<div class="tab-content" id="tracksTabContent">
|
|
43
45
|
<div class="tab-pane fade show active mt-2" id="videoTracks" role="tabpanel" aria-labelledby="raw-tab">
|
|
44
46
|
<table class="table" id="videoTracksTable">
|
|
45
47
|
<thead>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
<tr>
|
|
49
|
+
<th></th>
|
|
50
|
+
<th>Source</th>
|
|
51
|
+
<th>Width</th>
|
|
52
|
+
<th>Height</th>
|
|
53
|
+
<th>Codec</th>
|
|
54
|
+
<th>Action</th>
|
|
55
|
+
</tr>
|
|
54
56
|
</thead>
|
|
55
57
|
<tfoot>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
58
|
+
<tr>
|
|
59
|
+
<th></th>
|
|
60
|
+
<th>
|
|
61
|
+
<select class="form-select-sm" id="addVideoTrackSource">
|
|
62
|
+
<option value="camera" selected>camera</option>
|
|
63
|
+
<option value="screen">screen</option>
|
|
64
|
+
</select>
|
|
65
|
+
</th>
|
|
66
|
+
<th>
|
|
67
|
+
<input class="form-control-sm" id="addVideoTrackWidth" type="number" value="1280">
|
|
68
|
+
</th>
|
|
69
|
+
<th>
|
|
70
|
+
<input class="form-control-sm" id="addVideoTrackHeight" type="number" value="720">
|
|
71
|
+
</th>
|
|
72
|
+
<th>
|
|
73
|
+
<select class="form-select-sm" id="addVideoTrackCodec">
|
|
74
|
+
<option value="H264" selected>H264</option>
|
|
75
|
+
<option value="VP8">VP8</option>
|
|
76
|
+
<option value="VP9">VP9</option>
|
|
77
|
+
</select>
|
|
78
|
+
</th>
|
|
79
|
+
<th>
|
|
80
|
+
<button class="btn btn-primary" id="addVideoTrack">Add</button>
|
|
81
|
+
</th>
|
|
82
|
+
</tr>
|
|
81
83
|
</tfoot>
|
|
82
84
|
<tbody id="videoTracksTableBody"></tbody>
|
|
83
85
|
</table>
|
|
@@ -86,50 +88,51 @@
|
|
|
86
88
|
<div class="col">
|
|
87
89
|
<table class="table" id="videoTrackEncodingsTable">
|
|
88
90
|
<thead>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
91
|
+
<tr>
|
|
92
|
+
<th>RID</th>
|
|
93
|
+
<th>Active</th>
|
|
94
|
+
<th>MaxBitrate</th>
|
|
95
|
+
<th>ResolutionScale</th>
|
|
96
|
+
<th>Scalability Mode</th>
|
|
97
|
+
<th>Action</th>
|
|
98
|
+
</tr>
|
|
97
99
|
</thead>
|
|
98
100
|
<tfoot>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
</
|
|
123
|
-
</
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
</
|
|
128
|
-
</
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
</
|
|
132
|
-
</
|
|
101
|
+
<tr>
|
|
102
|
+
<th>
|
|
103
|
+
<select class="form-select-sm" id="addVideoTrackEncodingRid">
|
|
104
|
+
<option value="h" selected>h</option>
|
|
105
|
+
<option value="m">m</option>
|
|
106
|
+
<option value="l">l</option>
|
|
107
|
+
</select>
|
|
108
|
+
</th>
|
|
109
|
+
<th>
|
|
110
|
+
<select class="form-select-sm" id="addVideoTrackEncodingActive">
|
|
111
|
+
<option value="true" selected>true</option>
|
|
112
|
+
<option value="false">false</option>
|
|
113
|
+
</select>
|
|
114
|
+
</th>
|
|
115
|
+
<th>
|
|
116
|
+
<input class="form-control-sm" id="addVideoTrackEncodingMaxBitrate"
|
|
117
|
+
type="number" value="900000">
|
|
118
|
+
</th>
|
|
119
|
+
<th>
|
|
120
|
+
<select class="form-select-sm" id="addVideoTrackEncodingResolutionScale">
|
|
121
|
+
<option value="1" selected>1</option>
|
|
122
|
+
<option value="2">2</option>
|
|
123
|
+
<option value="4">4</option>
|
|
124
|
+
<option value="6">6</option>
|
|
125
|
+
</select>
|
|
126
|
+
</th>
|
|
127
|
+
<th>
|
|
128
|
+
<select class="form-select-sm" id="addVideoTrackScalabilityMode">
|
|
129
|
+
<option selected value="">NONE</option>
|
|
130
|
+
</select>
|
|
131
|
+
</th>
|
|
132
|
+
<th>
|
|
133
|
+
<button class="btn btn-primary" id="addVideoTrackEncoding">Add</button>
|
|
134
|
+
</th>
|
|
135
|
+
</tr>
|
|
133
136
|
</tfoot>
|
|
134
137
|
<tbody id="videoTrackEncodingsTableBody"></tbody>
|
|
135
138
|
</table>
|
|
@@ -140,29 +143,29 @@
|
|
|
140
143
|
<table class="table" id="audioTracksTable">
|
|
141
144
|
<caption class="caption-top">Audio tracks</caption>
|
|
142
145
|
<thead>
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
146
|
+
<tr>
|
|
147
|
+
<th>Source</th>
|
|
148
|
+
<th>Channels</th>
|
|
149
|
+
<th>Action</th>
|
|
150
|
+
</tr>
|
|
148
151
|
</thead>
|
|
149
152
|
<tfoot>
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
153
|
+
<tr>
|
|
154
|
+
<th>
|
|
155
|
+
<select class="form-select-sm" id="addAudioTrackSource">
|
|
156
|
+
<option value="mic" selected>mic</option>
|
|
157
|
+
</select>
|
|
158
|
+
</th>
|
|
159
|
+
<th>
|
|
160
|
+
<select class="form-select-sm" id="addAudioTrackChannels">
|
|
161
|
+
<option value="1" selected>1</option>
|
|
162
|
+
<option value="2">2</option>
|
|
163
|
+
</select>
|
|
164
|
+
</th>
|
|
165
|
+
<th>
|
|
166
|
+
<button id="addAudioTrack" class="btn btn-primary form-control-sm">Add</button>
|
|
167
|
+
</th>
|
|
168
|
+
</tr>
|
|
166
169
|
</tfoot>
|
|
167
170
|
<tbody></tbody>
|
|
168
171
|
</table>
|
|
@@ -224,9 +227,17 @@
|
|
|
224
227
|
<!-- Other options are populated dynamically by init() in main.js -->
|
|
225
228
|
</select>
|
|
226
229
|
</div>
|
|
230
|
+
|
|
231
|
+
<div class="row">
|
|
232
|
+
<label for="participantViewType">Participant View</label>
|
|
233
|
+
<select class="form-select" id="participantViewType">
|
|
234
|
+
<!-- Other options are populated dynamically by init() in main.js -->
|
|
235
|
+
</select>
|
|
236
|
+
</div>
|
|
227
237
|
</div>
|
|
228
238
|
<div class="modal-footer">
|
|
229
|
-
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="cancel()">Close
|
|
239
|
+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="cancel()">Close
|
|
240
|
+
</button>
|
|
230
241
|
<button class="btn btn-primary" id="startButton" onclick="connect()">Enter</button>
|
|
231
242
|
</div>
|
|
232
243
|
</div>
|
package/src/client/main.js
CHANGED
|
@@ -87,6 +87,14 @@ const init = function () {
|
|
|
87
87
|
option.textContent = value;
|
|
88
88
|
transportSelect.appendChild(option);
|
|
89
89
|
});
|
|
90
|
+
// insert participant view types in entrance modal
|
|
91
|
+
const participantViewTypeSelect = document.getElementById("participantViewType");
|
|
92
|
+
Object.values(PARTICIPANT_VIEW_TYPE).forEach(value => {
|
|
93
|
+
const option = document.createElement('option');
|
|
94
|
+
option.value = value;
|
|
95
|
+
option.textContent = value;
|
|
96
|
+
participantViewTypeSelect.appendChild(option);
|
|
97
|
+
})
|
|
90
98
|
//open entrance modal
|
|
91
99
|
$('#entranceModal').modal('show');
|
|
92
100
|
}
|
|
@@ -154,7 +162,7 @@ async function connect() {
|
|
|
154
162
|
abrTryForUpperQuality: ABR_TRY_UPPER_QUALITY,
|
|
155
163
|
interval: ABR_QUALITY_CHECK_PERIOD
|
|
156
164
|
};
|
|
157
|
-
initDefaultRemoteDisplay(room, remoteDisplay, displayOptions, abrOptions);
|
|
165
|
+
initDefaultRemoteDisplay(room, remoteDisplay, displayOptions, abrOptions, roomConfig.participantViewType);
|
|
158
166
|
|
|
159
167
|
//get configured local video streams
|
|
160
168
|
let streams = cControls.getVideoStreams();
|
|
@@ -316,6 +324,10 @@ const subscribeTrackToEndedEvent = function (room, track, pc) {
|
|
|
316
324
|
pc.removeTrack(sender);
|
|
317
325
|
//track found, set renegotiation flag
|
|
318
326
|
negotiate = true;
|
|
327
|
+
if (sender.track) {
|
|
328
|
+
sender.track.stop();
|
|
329
|
+
sender.track.active = false;
|
|
330
|
+
}
|
|
319
331
|
break;
|
|
320
332
|
}
|
|
321
333
|
}
|
|
@@ -324,6 +336,7 @@ const subscribeTrackToEndedEvent = function (room, track, pc) {
|
|
|
324
336
|
if (negotiate) {
|
|
325
337
|
//kickoff renegotiation
|
|
326
338
|
await room.updateState();
|
|
339
|
+
pc.restartIce();
|
|
327
340
|
}
|
|
328
341
|
} catch (e) {
|
|
329
342
|
onOperationFailed("Failed to update room state", e);
|