@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.
Files changed (25) hide show
  1. package/package.json +1 -1
  2. package/src/bitrate_test/bitrate_test.html +3 -6
  3. package/src/client/controls.js +5 -3
  4. package/src/client/main.html +118 -107
  5. package/src/client/main.js +14 -1
  6. package/src/commons/dependencies/bootstrap@5.0.0-beta3/css/bootstrap.min.css +7 -0
  7. package/src/commons/dependencies/bootstrap@5.0.0-beta3/js/bootstrap.bundle.min.js +7 -0
  8. package/src/commons/dependencies/datatables@1.10.24/css/jquery.dataTables.min.css +1 -0
  9. package/src/commons/dependencies/datatables@1.10.24/images/Sorting icons.psd +0 -0
  10. package/src/commons/dependencies/datatables@1.10.24/images/favicon.ico +0 -0
  11. package/src/commons/dependencies/datatables@1.10.24/images/sort_asc.png +0 -0
  12. package/src/commons/dependencies/datatables@1.10.24/images/sort_asc_disabled.png +0 -0
  13. package/src/commons/dependencies/datatables@1.10.24/images/sort_both.png +0 -0
  14. package/src/commons/dependencies/datatables@1.10.24/images/sort_desc.png +0 -0
  15. package/src/commons/dependencies/datatables@1.10.24/images/sort_desc_disabled.png +0 -0
  16. package/src/commons/dependencies/datatables@1.10.24/js/jquery.dataTables.min.js +184 -0
  17. package/src/commons/dependencies/jquery@3.6.0/jquery.min.js +2 -0
  18. package/src/commons/js/display.js +54 -27
  19. package/src/controller/main.html +7 -6
  20. package/src/controller/main.js +6 -0
  21. package/src/player/player.html +3 -6
  22. package/src/player/player.js +1 -1
  23. package/src/track-test/track-test.html +3 -6
  24. package/src/two-way-streaming/two-way-streaming.html +3 -6
  25. package/src/webrtc-abr-player/player.html +3 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flashphoner/sfusdk-examples",
3
- "version": "2.0.323",
3
+ "version": "2.0.330",
4
4
  "description": "Official Flashphoner WebCallServer SFU SDK usage examples",
5
5
  "main": "dist/sfu.js",
6
6
  "types": "src/sfu.ts",
package/src/bitrate_test/bitrate_test.html 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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
11
- integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
11
- integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
12
- crossorigin="anonymous"></script>
13
- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
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" data-bs-target="#videoTracks" type="button" role="tab" aria-controls="videoTracks" aria-selected="true">VideoTracks</button>
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" type="button" role="tab" aria-controls="audioTracks" aria-selected="false">AudioTracks</button>
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
- <tr>
47
- <th></th>
48
- <th>Source</th>
49
- <th>Width</th>
50
- <th>Height</th>
51
- <th>Codec</th>
52
- <th>Action</th>
53
- </tr>
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
- <tr>
57
- <th></th>
58
- <th>
59
- <select class="form-select-sm" id="addVideoTrackSource">
60
- <option value="camera" selected>camera</option>
61
- <option value="screen">screen</option>
62
- </select>
63
- </th>
64
- <th>
65
- <input class="form-control-sm" id="addVideoTrackWidth" type="number" value="1280">
66
- </th>
67
- <th>
68
- <input class="form-control-sm" id="addVideoTrackHeight" type="number" value="720">
69
- </th>
70
- <th>
71
- <select class="form-select-sm" id="addVideoTrackCodec">
72
- <option value="H264" selected>H264</option>
73
- <option value="VP8">VP8</option>
74
- <option value="VP9">VP9</option>
75
- </select>
76
- </th>
77
- <th>
78
- <button class="btn btn-primary" id="addVideoTrack">Add</button>
79
- </th>
80
- </tr>
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
- <tr>
90
- <th>RID</th>
91
- <th>Active</th>
92
- <th>MaxBitrate</th>
93
- <th>ResolutionScale</th>
94
- <th>Scalability Mode</th>
95
- <th>Action</th>
96
- </tr>
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
- <tr>
100
- <th>
101
- <select class="form-select-sm" id="addVideoTrackEncodingRid">
102
- <option value="h" selected>h</option>
103
- <option value="m">m</option>
104
- <option value="l">l</option>
105
- </select>
106
- </th>
107
- <th>
108
- <select class="form-select-sm" id="addVideoTrackEncodingActive">
109
- <option value="true" selected>true</option>
110
- <option value="false">false</option>
111
- </select>
112
- </th>
113
- <th>
114
- <input class="form-control-sm" id="addVideoTrackEncodingMaxBitrate" type="number" value="900000">
115
- </th>
116
- <th>
117
- <select class="form-select-sm" id="addVideoTrackEncodingResolutionScale">
118
- <option value="1" selected>1</option>
119
- <option value="2">2</option>
120
- <option value="4">4</option>
121
- <option value="6">6</option>
122
- </select>
123
- </th>
124
- <th>
125
- <select class="form-select-sm" id="addVideoTrackScalabilityMode">
126
- <option selected value="">NONE</option>
127
- </select>
128
- </th>
129
- <th>
130
- <button class="btn btn-primary" id="addVideoTrackEncoding">Add</button>
131
- </th>
132
- </tr>
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
- <tr>
144
- <th>Source</th>
145
- <th>Channels</th>
146
- <th>Action</th>
147
- </tr>
146
+ <tr>
147
+ <th>Source</th>
148
+ <th>Channels</th>
149
+ <th>Action</th>
150
+ </tr>
148
151
  </thead>
149
152
  <tfoot>
150
- <tr>
151
- <th>
152
- <select class="form-select-sm" id="addAudioTrackSource">
153
- <option value="mic" selected>mic</option>
154
- </select>
155
- </th>
156
- <th>
157
- <select class="form-select-sm" id="addAudioTrackChannels">
158
- <option value="1" selected>1</option>
159
- <option value="2">2</option>
160
- </select>
161
- </th>
162
- <th>
163
- <button id="addAudioTrack" class="btn btn-primary form-control-sm">Add</button>
164
- </th>
165
- </tr>
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</button>
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);