livekit-client 0.14.1 → 0.15.1

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 (104) hide show
  1. package/.github/workflows/{lint.yaml → test.yaml} +7 -4
  2. package/.gitmodules +3 -0
  3. package/README.md +46 -14
  4. package/dist/api/SignalClient.d.ts +7 -32
  5. package/dist/api/SignalClient.js +37 -8
  6. package/dist/api/SignalClient.js.map +1 -1
  7. package/dist/connect.d.ts +1 -1
  8. package/dist/connect.js +73 -59
  9. package/dist/connect.js.map +1 -1
  10. package/dist/index.d.ts +3 -3
  11. package/dist/index.js +4 -3
  12. package/dist/index.js.map +1 -1
  13. package/dist/logger.d.ts +10 -0
  14. package/dist/logger.js +15 -0
  15. package/dist/logger.js.map +1 -1
  16. package/dist/options.d.ts +83 -19
  17. package/dist/options.js +0 -10
  18. package/dist/options.js.map +1 -1
  19. package/dist/proto/livekit_models.d.ts +27 -1
  20. package/dist/proto/livekit_models.js +188 -3
  21. package/dist/proto/livekit_models.js.map +1 -1
  22. package/dist/proto/livekit_rtc.d.ts +114 -7
  23. package/dist/proto/livekit_rtc.js +783 -30
  24. package/dist/proto/livekit_rtc.js.map +1 -1
  25. package/dist/room/RTCEngine.d.ts +4 -2
  26. package/dist/room/RTCEngine.js +31 -35
  27. package/dist/room/RTCEngine.js.map +1 -1
  28. package/dist/room/Room.d.ts +16 -17
  29. package/dist/room/Room.js +125 -77
  30. package/dist/room/Room.js.map +1 -1
  31. package/dist/room/events.d.ts +115 -6
  32. package/dist/room/events.js +114 -5
  33. package/dist/room/events.js.map +1 -1
  34. package/dist/room/participant/LocalParticipant.d.ts +29 -9
  35. package/dist/room/participant/LocalParticipant.js +220 -160
  36. package/dist/room/participant/LocalParticipant.js.map +1 -1
  37. package/dist/room/participant/Participant.js +2 -1
  38. package/dist/room/participant/Participant.js.map +1 -1
  39. package/dist/room/participant/RemoteParticipant.d.ts +1 -1
  40. package/dist/room/participant/RemoteParticipant.js +8 -5
  41. package/dist/room/participant/RemoteParticipant.js.map +1 -1
  42. package/dist/room/participant/publishUtils.d.ts +11 -0
  43. package/dist/room/participant/publishUtils.js +148 -0
  44. package/dist/room/participant/publishUtils.js.map +1 -0
  45. package/dist/room/participant/publishUtils.test.d.ts +1 -0
  46. package/dist/room/participant/publishUtils.test.js +79 -0
  47. package/dist/room/participant/publishUtils.test.js.map +1 -0
  48. package/dist/room/stats.d.ts +21 -6
  49. package/dist/room/stats.js +22 -1
  50. package/dist/room/stats.js.map +1 -1
  51. package/dist/room/track/LocalAudioTrack.d.ts +8 -3
  52. package/dist/room/track/LocalAudioTrack.js +49 -3
  53. package/dist/room/track/LocalAudioTrack.js.map +1 -1
  54. package/dist/room/track/LocalTrack.d.ts +4 -3
  55. package/dist/room/track/LocalTrack.js +6 -48
  56. package/dist/room/track/LocalTrack.js.map +1 -1
  57. package/dist/room/track/LocalVideoTrack.d.ts +13 -4
  58. package/dist/room/track/LocalVideoTrack.js +150 -57
  59. package/dist/room/track/LocalVideoTrack.js.map +1 -1
  60. package/dist/room/track/LocalVideoTrack.test.d.ts +1 -0
  61. package/dist/room/track/LocalVideoTrack.test.js +68 -0
  62. package/dist/room/track/LocalVideoTrack.test.js.map +1 -0
  63. package/dist/room/track/RemoteAudioTrack.d.ts +7 -0
  64. package/dist/room/track/RemoteAudioTrack.js +61 -0
  65. package/dist/room/track/RemoteAudioTrack.js.map +1 -1
  66. package/dist/room/track/RemoteTrackPublication.d.ts +2 -3
  67. package/dist/room/track/RemoteTrackPublication.js +11 -10
  68. package/dist/room/track/RemoteTrackPublication.js.map +1 -1
  69. package/dist/room/track/RemoteVideoTrack.d.ts +10 -6
  70. package/dist/room/track/RemoteVideoTrack.js +97 -44
  71. package/dist/room/track/RemoteVideoTrack.js.map +1 -1
  72. package/dist/room/track/Track.d.ts +10 -2
  73. package/dist/room/track/Track.js +29 -2
  74. package/dist/room/track/Track.js.map +1 -1
  75. package/dist/room/track/create.d.ts +4 -6
  76. package/dist/room/track/create.js +10 -57
  77. package/dist/room/track/create.js.map +1 -1
  78. package/dist/room/track/defaults.d.ts +4 -0
  79. package/dist/room/track/defaults.js +21 -0
  80. package/dist/room/track/defaults.js.map +1 -0
  81. package/dist/room/track/options.d.ts +15 -65
  82. package/dist/room/track/options.js +14 -13
  83. package/dist/room/track/options.js.map +1 -1
  84. package/dist/room/track/utils.d.ts +3 -0
  85. package/dist/room/track/utils.js +68 -0
  86. package/dist/room/track/utils.js.map +1 -0
  87. package/dist/room/track/utils.test.d.ts +1 -0
  88. package/dist/room/track/utils.test.js +85 -0
  89. package/dist/room/track/utils.test.js.map +1 -0
  90. package/dist/room/utils.d.ts +7 -1
  91. package/dist/room/utils.js +29 -6
  92. package/dist/room/utils.js.map +1 -1
  93. package/dist/version.d.ts +1 -1
  94. package/dist/version.js +1 -1
  95. package/example/index.html +194 -178
  96. package/example/sample.ts +454 -325
  97. package/example/styles.css +144 -0
  98. package/example/webpack.config.js +1 -1
  99. package/jest.config.js +6 -0
  100. package/package.json +10 -7
  101. package/tsconfig.eslint.json +8 -1
  102. package/dist/room/defaults.d.ts +0 -5
  103. package/dist/room/defaults.js +0 -32
  104. package/dist/room/defaults.js.map +0 -1
package/example/index.html CHANGED
@@ -15,16 +15,7 @@
15
15
  crossorigin="anonymous"
16
16
  />
17
17
 
18
- <style>
19
- .video-container {
20
- display: inline-block;
21
- border-radius: 5px;
22
- }
23
-
24
- .video-container video.speaking {
25
- border: 4px solid rgba(94, 166, 190, 0.7);
26
- }
27
- </style>
18
+ <link rel="stylesheet" href="styles.css">
28
19
  </head>
29
20
 
30
21
  <body>
@@ -33,200 +24,225 @@
33
24
  <div class="col-md-8">
34
25
  <h2>Livekit Sample App</h2>
35
26
  <br/>
36
- <form>
37
- <div class="form-group row">
38
- <label for="url" class="col-md-3 col-form-label"
39
- >LiveKit URL</label
40
- >
27
+ <div id="connect-area">
28
+ <div>
29
+ <b>LiveKit URL</b>
30
+ </div>
31
+ <div>
41
32
  <input
42
33
  type="text"
43
- class="form-control col-md-5"
34
+ class="form-control"
44
35
  id="url"
45
36
  value="ws://localhost:7880"
46
37
  />
47
38
  </div>
48
-
49
- <div class="form-group row">
50
- <label for="token" class="col-md-3 col-form-label">Token</label>
51
- <input type="text" class="form-control col-md-5" id="token" />
39
+ <div>
40
+ <b>Token</b>
52
41
  </div>
53
-
54
- <div class="form-group row">
55
- <div class="col-md-2 offset-md-1">
56
- <div class="form-check">
57
- <input
58
- type="checkbox"
59
- class="form-check-input"
60
- id="publish-option"
61
- checked
62
- />
63
- <label for="checkbox" class="form-check-label">
64
- Publish
65
- </label>
66
- </div>
67
- </div>
68
- <div class="col-md-2">
69
- <div class="form-check">
70
- <input
71
- type="checkbox"
72
- class="form-check-input"
73
- id="simulcast"
74
- checked
75
- />
76
- <label for="checkbox" class="form-check-label">
77
- Simulcast
78
- </label>
79
- </div>
80
- </div>
81
- <div class="col-md-3">
82
- <div class="form-check">
83
- <input
84
- type="checkbox"
85
- class="form-check-input"
86
- id="force-turn"
87
- />
88
- <label for="checkbox" class="form-check-label">
89
- Force TURN
90
- </label>
91
- </div>
92
- </div>
42
+ <div>
43
+ <input type="text" class="form-control" id="token" />
93
44
  </div>
45
+ </div>
94
46
 
95
- <div class="form-group row">
96
- <div class="col-md-2">
97
- <button
98
- id="connect-button"
99
- class="btn btn-primary mt-1"
100
- type="button"
101
- onclick="connectWithFormInput()"
102
- >
103
- Connect
104
- </button>
105
- </div>
106
- <div class="col-md-10">
107
- <button
108
- id="toggle-audio-button"
109
- class="btn btn-secondary mt-1"
110
- disabled
111
- type="button"
112
- onclick="toggleAudio()"
113
- >
114
- Enable Audio
115
- </button>
116
- <button
117
- id="toggle-video-button"
118
- class="btn btn-secondary mt-1"
119
- disabled
120
- type="button"
121
- onclick="toggleVideo()"
122
- >
123
- Enable Video
124
- </button>
125
- <button
126
- id="flip-video-button"
127
- class="btn btn-secondary mt-1"
128
- disabled
129
- type="button"
130
- onclick="flipVideo()"
131
- >
132
- Back Camera
133
- </button>
134
- <button
135
- id="share-screen-button"
136
- class="btn btn-secondary mt-1"
137
- disabled
138
- type="button"
139
- onclick="shareScreen()"
140
- >
141
- Share Screen
142
- </button>
143
- <button
144
- id="disconnect-ws-button"
145
- class="btn btn-warning mt-1"
146
- disabled
147
- type="button"
148
- onclick="disconnectSignal()"
149
- >
150
- WS Reconnect
151
- </button>
152
- <button
153
- id="disconnect-room-button"
154
- class="btn btn-danger mt-1"
155
- disabled
156
- type="button"
157
- onclick="disconnectRoom()"
158
- >
159
- Disconnect
160
- </button>
161
- <button
162
- id="start-audio-button"
163
- class="btn btn-secondary mt-1"
164
- disabled
165
- type="button"
166
- onclick="startAudio()"
167
- >
168
- Enable Audio
169
- </button>
170
- </div>
47
+ <!-- connect options -->
48
+ <div id="options-area">
49
+ <div>
50
+ <input
51
+ type="checkbox"
52
+ class="form-check-input"
53
+ id="publish-option"
54
+ checked
55
+ />
56
+ <label for="publish-option" class="form-check-label">
57
+ Publish
58
+ </label>
171
59
  </div>
172
-
173
- <!-- video devices -->
174
- <div class="form-group row">
175
- <div class="col-md-4">
176
- <select id="video-input" class="custom-select" onchange="handleDeviceSelected(event)">
177
- <option selected>Video Input (default)</option>
178
- </select>
179
- </div>
180
- <div class="col-md-4">
181
- <select id="audio-input" class="custom-select" onchange="handleDeviceSelected(event)">
182
- <option selected>Audio Input (default)</option>
183
- </select>
184
- </div>
185
- <div class="col-md-4">
186
- <select id="audio-output" class="custom-select" onchange="handleDeviceSelected(event)">
187
- <option selected>Audio Output (default)</option>
188
- </select>
189
- </div>
60
+ <div>
61
+ <input
62
+ type="checkbox"
63
+ class="form-check-input"
64
+ id="simulcast"
65
+ checked
66
+ />
67
+ <label for="simulcast" class="form-check-label">
68
+ Simulcast
69
+ </label>
190
70
  </div>
191
-
192
- <div class="form-group row">
193
- <textarea
194
- class="form-control col-md-12"
195
- id="log"
196
- rows="5"
197
- ></textarea>
71
+ <div>
72
+ <input
73
+ type="checkbox"
74
+ class="form-check-input"
75
+ id="dynacast"
76
+ checked
77
+ />
78
+ <label for="dynacast" class="form-check-label">
79
+ Dynacast
80
+ </label>
198
81
  </div>
199
- </form>
200
- </div>
201
- <div class="col-md-4">
202
- <h3>Chat</h3>
203
- <div class="row">
204
- <div class="col-md-12">
205
- <textarea class="form-control" id="chat" rows="15"></textarea>
82
+ <div>
83
+ <input
84
+ type="checkbox"
85
+ class="form-check-input"
86
+ id="adaptive-stream"
87
+ checked
88
+ />
89
+ <label for="adaptive-stream" class="form-check-label">
90
+ AdaptiveStream
91
+ </label>
92
+ </div>
93
+ <div>
94
+ <input
95
+ type="checkbox"
96
+ class="form-check-input"
97
+ id="force-turn"
98
+ />
99
+ <label for="force-turn" class="form-check-label">
100
+ Force TURN
101
+ </label>
206
102
  </div>
207
103
  </div>
208
- <div class="row mt-1">
209
- <div class="col-md-10">
210
- <input type="text" class="form-control" id="entry" />
104
+
105
+ <!-- actions -->
106
+ <div id="actions-area">
107
+ <div>
108
+ <button
109
+ id="connect-button"
110
+ class="btn btn-primary mt-1"
111
+ type="button"
112
+ onclick="appActions.connectWithFormInput()"
113
+ >
114
+ Connect
115
+ </button>
211
116
  </div>
212
- <div class="col-md-1">
117
+ <div>
118
+ <button
119
+ id="toggle-audio-button"
120
+ class="btn btn-secondary mt-1"
121
+ disabled
122
+ type="button"
123
+ onclick="appActions.toggleAudio()"
124
+ >
125
+ Enable Mic
126
+ </button>
127
+ <button
128
+ id="toggle-video-button"
129
+ class="btn btn-secondary mt-1"
130
+ disabled
131
+ type="button"
132
+ onclick="appActions.toggleVideo()"
133
+ >
134
+ Enable Camera
135
+ </button>
136
+ <button
137
+ id="flip-video-button"
138
+ class="btn btn-secondary mt-1"
139
+ disabled
140
+ type="button"
141
+ onclick="appActions.flipVideo()"
142
+ >
143
+ Flip Camera
144
+ </button>
145
+ <button
146
+ id="share-screen-button"
147
+ class="btn btn-secondary mt-1"
148
+ disabled
149
+ type="button"
150
+ onclick="appActions.shareScreen()"
151
+ >
152
+ Share Screen
153
+ </button>
213
154
  <button
214
- class="btn btn-primary"
155
+ id="disconnect-ws-button"
156
+ class="btn btn-warning mt-1"
157
+ disabled
215
158
  type="button"
216
- onclick="enterText()"
159
+ onclick="appActions.disconnectSignal()"
217
160
  >
218
- Enter
161
+ Signal Reconnect
219
162
  </button>
163
+ <button
164
+ id="disconnect-room-button"
165
+ class="btn btn-danger mt-1"
166
+ disabled
167
+ type="button"
168
+ onclick="appActions.disconnectRoom()"
169
+ >
170
+ Disconnect
171
+ </button>
172
+ <button
173
+ id="start-audio-button"
174
+ class="btn btn-secondary mt-1"
175
+ disabled
176
+ type="button"
177
+ onclick="appActions.startAudio()"
178
+ >
179
+ Start Audio
180
+ </button>
181
+ </div>
182
+ </div>
183
+
184
+ <div id="inputs-area">
185
+ <div>
186
+ <select id="video-input" class="custom-select" onchange="appActions.handleDeviceSelected(event)">
187
+ <option selected>Video Input (default)</option>
188
+ </select>
189
+ </div>
190
+ <div>
191
+ <select id="audio-input" class="custom-select" onchange="appActions.handleDeviceSelected(event)">
192
+ <option selected>Audio Input (default)</option>
193
+ </select>
194
+ </div>
195
+ <div>
196
+ <select id="audio-output" class="custom-select" onchange="appActions.handleDeviceSelected(event)">
197
+ <option selected>Audio Output (default)</option>
198
+ </select>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ <div class="col-md-4">
203
+ <h3>Chat</h3>
204
+ <div id="chat-area">
205
+ <textarea class="form-control" id="chat" rows="9"></textarea>
206
+ <div id="chat-input-area">
207
+ <div>
208
+ <input type="text" class="form-control" id="entry"
209
+ placeholder="Type your message here" />
210
+ </div>
211
+ <div>
212
+ <button
213
+ id="send-button"
214
+ class="btn btn-primary"
215
+ type="button"
216
+ onclick="appActions.enterText()"
217
+ disabled
218
+ >
219
+ Send
220
+ </button>
221
+ </div>
220
222
  </div>
221
223
  </div>
222
224
  </div>
223
225
  </div>
224
226
 
225
- <div class="row" id="remote-area"></div>
226
- <div class="row" id="local-area">
227
- <div class="col-md-6 video-container" id="local-video"></div>
227
+ <div id="screenshare-area">
228
+ <div>
229
+ <span id="screenshare-info">
230
+ </span>
231
+ <span id="screenshare-resolution">
232
+ </span>
233
+ </div>
234
+ <video id="screenshare-video" autoplay playsinline></video>
235
+ </div>
236
+
237
+ <div id="participants-area">
238
+ </div>
239
+
240
+ <div id="log-area">
241
+ <textarea id="log"></textarea>
228
242
  </div>
229
243
  </div>
230
244
  <script src="bundle.js"></script>
245
+ <!-- for icons -->
246
+ <script src="https://kit.fontawesome.com/7c1c4c7e9c.js" crossorigin="anonymous"></script>
231
247
  </body>
232
248
  </html>