@signageos/front-applet 6.3.0 → 6.4.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.
- package/CHANGELOG.md +9 -0
- package/dist/bundle.js +2 -2
- package/dist/bundle.js.map +1 -1
- package/docs/content/js-video-stream.md +264 -173
- package/es6/FrontApplet/Stream/Stream.d.ts +7 -3
- package/es6/FrontApplet/Stream/Stream.js +234 -63
- package/es6/FrontApplet/Stream/Stream.js.map +1 -1
- package/es6/FrontApplet/Stream/streamEvents.d.ts +1 -1
- package/package.json +2 -2
|
@@ -1,192 +1,257 @@
|
|
|
1
1
|
---
|
|
2
|
-
title:
|
|
2
|
+
title: Video Streams
|
|
3
3
|
author: Miroslav Behina
|
|
4
|
-
date:
|
|
5
|
-
type:
|
|
4
|
+
date: 22.11.2018
|
|
5
|
+
type: js-api
|
|
6
6
|
tags:
|
|
7
|
-
- applet
|
|
8
|
-
- applet_api
|
|
9
|
-
- api
|
|
10
|
-
- js_api
|
|
11
|
-
description:
|
|
7
|
+
- applet
|
|
8
|
+
- applet_api
|
|
9
|
+
- api
|
|
10
|
+
- js_api
|
|
11
|
+
description: '[Content JS API] Methods to play or stop video streams.'
|
|
12
12
|
---
|
|
13
13
|
|
|
14
14
|
# Video streams
|
|
15
|
+
|
|
15
16
|
Methods to play or stop video streams.
|
|
16
17
|
|
|
17
18
|
## All methods
|
|
18
19
|
|
|
19
|
-
| Methods
|
|
20
|
-
|
|
|
21
|
-
| `prepare()`
|
|
22
|
-
| `play()`
|
|
23
|
-
| `stop()`
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
20
|
+
| Methods | Description | Supported since |
|
|
21
|
+
| ------------------- | ---------------------------------------------------------------- | --------------- |
|
|
22
|
+
| `prepare()` | Prepare video stream in the background | 4.7.0 |
|
|
23
|
+
| `play()` | Start playing video stream | 1.0.18 |
|
|
24
|
+
| `stop()` | Stop video stream | 1.0.18 |
|
|
25
|
+
| `pause()` | Pause video stream | 6.4.0 |
|
|
26
|
+
| `resume()` | Resume video stream | 6.4.0 |
|
|
27
|
+
| `getTracks()` | Get all tracks of the stream | 6.1.0 |
|
|
28
|
+
| `selectTrack()` | Select track of the stream | 6.1.0 |
|
|
29
|
+
| `resetTrack()` | Reset track of the stream | 6.1.0 |
|
|
30
|
+
| `onConnected()` | Calls a listener callback when stream connects | 1.0.20 |
|
|
31
|
+
| `onDisconnected()` | Calls a listener callback when stream disconnects | 1.0.20 |
|
|
32
|
+
| `onError()` | Calls a listener callback when an unexpected stream error occurs | 1.0.20 |
|
|
33
|
+
| `onPlay()` | Calls a listener callback when stream starts playing | 5.12.0 |
|
|
34
|
+
| `onStop()` | Calls a listener callback when stream stops | 5.12.0 |
|
|
35
|
+
| `onPrepare()` | Calls a listener callback when stream prepares | 5.12.0 |
|
|
36
|
+
| `onTracksChanged()` | Calls a listener callback when stream tracks change | 6.1.0 |
|
|
34
37
|
|
|
35
38
|
:::warning
|
|
36
|
-
|
|
39
|
+
|
|
40
|
+
Are you using **Samsung Tizen** to play streams?
|
|
41
|
+
[Read more about limitation and Tizen-specific details](https://docs.signageos.io/hc/en-us/articles/4405387373458).
|
|
42
|
+
|
|
37
43
|
:::
|
|
38
44
|
|
|
39
45
|
:::danger
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
|
|
47
|
+
Be aware version of JS API (v6.0.0+) changed how stream functions `play()` and `prepare()` work. For using an options object you need to our
|
|
48
|
+
latest core app versions. If you are using older core app versions, you need to use deprecated format.
|
|
49
|
+
|
|
42
50
|
:::
|
|
43
51
|
|
|
44
52
|
## prepare()
|
|
53
|
+
|
|
45
54
|
Calls the internal player and prepares a video stream in memory, so it can later start playing instantaneously.
|
|
46
55
|
|
|
47
56
|
:::info
|
|
48
|
-
|
|
57
|
+
|
|
58
|
+
If you want to play a video stream in full screen mode, use x = y = 0 and width = document.documentElement.clientWidth and height =
|
|
59
|
+
document.documentElement.clientHeight as setup parameters.
|
|
60
|
+
|
|
49
61
|
:::
|
|
50
62
|
|
|
51
63
|
### Parameters
|
|
52
64
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
| `uri`
|
|
56
|
-
| `x`
|
|
57
|
-
| `y`
|
|
58
|
-
| `width`
|
|
59
|
-
| `height`
|
|
60
|
-
| `options`
|
|
65
|
+
| Param | Type | Required | Description |
|
|
66
|
+
| --------- | ------ | :------------------------: | --------------------------------------------- |
|
|
67
|
+
| `uri` | String | <div class="red">Yes</div> | Network address where the stream is available |
|
|
68
|
+
| `x` | Number | <div class="red">Yes</div> | Stream x-position on the screen |
|
|
69
|
+
| `y` | Number | <div class="red">Yes</div> | Stream y-position on the screen |
|
|
70
|
+
| `width` | Number | <div class="red">Yes</div> | Stream width on the screen |
|
|
71
|
+
| `height` | Number | <div class="red">Yes</div> | Stream height on the screen |
|
|
72
|
+
| `options` | Object | <div class="red">Yes</div> | Additional options for the stream |
|
|
61
73
|
|
|
62
74
|
### Options object
|
|
63
75
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
| `protocol`
|
|
67
|
-
|
|
68
|
-
| `background`
|
|
69
|
-
| `trackSelection
|
|
70
|
-
| `drm`
|
|
76
|
+
| Key | Type | Required | Description |
|
|
77
|
+
| ---------------- | ------- | :--------------------------: | --------------------------------------------------- |
|
|
78
|
+
| `protocol` | String | <div class="red">Yes</div> | Protocol that the stream is using |
|
|
79
|
+
| ^^ | ^^ | ^^ | Types: `HLS`, `RTP`, `HTTP`, `UDP`, `RTMP`, `RTSP`. |
|
|
80
|
+
| `background` | Boolean | <div class="yellow">No</div> | Prepare stream in the background |
|
|
81
|
+
| `trackSelection` | Object | <div class="yellow">No</div> | Track selection options |
|
|
82
|
+
| `drm` | Object | <div class="yellow">No</div> | DRM options |
|
|
71
83
|
|
|
72
84
|
### Track selection object
|
|
73
85
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
| `maxAudioChannelCount`
|
|
77
|
-
| `minVideoSize`
|
|
78
|
-
|
|
79
|
-
| `maxVideoSize`
|
|
80
|
-
|
|
81
|
-
| `preferredAudioLanguages` | Array of strings | <div class="yellow">No</div>
|
|
82
|
-
| `preferredTextLanguages`
|
|
86
|
+
| Key | Type | Required | Description |
|
|
87
|
+
| ------------------------- | ---------------- | :--------------------------: | ------------------------------------------- |
|
|
88
|
+
| `maxAudioChannelCount` | Number | <div class="yellow">No</div> | Maximum number of audio channels to play |
|
|
89
|
+
| `minVideoSize` | Object | <div class="yellow">No</div> | Minimum video size to play |
|
|
90
|
+
| ^^ | ^^ | ^^ | Object with `width` and `height` properties |
|
|
91
|
+
| `maxVideoSize` | Object | <div class="yellow">No</div> | Maximum video size to play |
|
|
92
|
+
| ^^ | ^^ | ^^ | Object with `width` and `height` properties |
|
|
93
|
+
| `preferredAudioLanguages` | Array of strings | <div class="yellow">No</div> | Preferred audio languages to play |
|
|
94
|
+
| `preferredTextLanguages` | Array of strings | <div class="yellow">No</div> | Preferred text languages to play |
|
|
83
95
|
|
|
84
96
|
### DRM object
|
|
85
97
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
| `scheme`
|
|
89
|
-
|
|
90
|
-
| `licenseUri`
|
|
91
|
-
| `licenseRequestHeaders` | Object
|
|
92
|
-
|
|
98
|
+
| Key | Type | Required | Description |
|
|
99
|
+
| ----------------------- | ------ | :--------------------------: | --------------------------------------------------------------------- |
|
|
100
|
+
| `scheme` | String | <div class="red">Yes</div> | DRM scheme |
|
|
101
|
+
| ^^ | ^^ | ^^ | Types: `CommonPSSH`, `ClearKey`, `Widevine`, `PlayReady` or own value |
|
|
102
|
+
| `licenseUri` | String | <div class="red">Yes</div> | DRM license URI |
|
|
103
|
+
| `licenseRequestHeaders` | Object | <div class="yellow">No</div> | DRM license request headers |
|
|
93
104
|
|
|
94
105
|
### Javascript syntax
|
|
106
|
+
|
|
95
107
|
```javascript
|
|
96
108
|
// Example with specific protocol type
|
|
97
109
|
await sos.stream.prepare(uri, x, y, width, height, { protocol: 'HTTP' });
|
|
98
110
|
|
|
99
111
|
// Example with options - prepare stream in the background
|
|
100
|
-
await sos.stream.prepare(uri,
|
|
112
|
+
await sos.stream.prepare(uri, x, y, width, height, { protocol: 'HTTP', background: true });
|
|
101
113
|
|
|
102
114
|
// Deprecated format
|
|
103
|
-
await sos.stream.prepare(uri,
|
|
115
|
+
await sos.stream.prepare(uri, x, y, width, height, 'HTTP');
|
|
104
116
|
```
|
|
105
117
|
|
|
106
118
|
:::note[GitHub Example]
|
|
119
|
+
|
|
107
120
|
[Stream video Applet example](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/stream)
|
|
121
|
+
|
|
108
122
|
:::
|
|
109
123
|
|
|
110
124
|
## play()
|
|
125
|
+
|
|
111
126
|
Calls the internal player and starts a video stream in correct position.
|
|
112
127
|
|
|
113
128
|
:::info
|
|
114
|
-
|
|
129
|
+
|
|
130
|
+
If you want to play a video stream in full screen mode, use x = y = 0 and width = document.documentElement.clientWidth and height =
|
|
131
|
+
document.documentElement.clientHeight as setup parameters.
|
|
132
|
+
|
|
115
133
|
:::
|
|
116
134
|
|
|
117
135
|
### Parameters
|
|
118
136
|
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
| `uri`
|
|
122
|
-
| `x`
|
|
123
|
-
| `y`
|
|
124
|
-
| `width`
|
|
125
|
-
| `height`
|
|
126
|
-
| `options`
|
|
137
|
+
| Param | Type | Required | Description |
|
|
138
|
+
| --------- | ------ | :------------------------: | --------------------------------------------- |
|
|
139
|
+
| `uri` | String | <div class="red">Yes</div> | Network address where the stream is available |
|
|
140
|
+
| `x` | Number | <div class="red">Yes</div> | Stream x-position on the screen |
|
|
141
|
+
| `y` | Number | <div class="red">Yes</div> | Stream y-position on the screen |
|
|
142
|
+
| `width` | Number | <div class="red">Yes</div> | Stream width on the screen |
|
|
143
|
+
| `height` | Number | <div class="red">Yes</div> | Stream height on the screen |
|
|
144
|
+
| `options` | Object | <div class="red">Yes</div> | Additional options for the stream |
|
|
127
145
|
|
|
128
146
|
### Options object
|
|
129
147
|
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
| `protocol`
|
|
133
|
-
|
|
134
|
-
| `autoReconnect`
|
|
135
|
-
|
|
136
|
-
| `autoReconnectInterval` | Number
|
|
137
|
-
|
|
138
|
-
| `volume`
|
|
139
|
-
| `trackSelection
|
|
140
|
-
| `drm`
|
|
148
|
+
| Key | Type | Required | Description |
|
|
149
|
+
| ----------------------- | ------- | :--------------------------: | --------------------------------------------------- |
|
|
150
|
+
| `protocol` | String | <div class="red">Yes</div> | Protocol that the stream is using |
|
|
151
|
+
| ^^ | ^^ | ^^ | Types: `HLS`, `RTP`, `HTTP`, `UDP`, `RTMP`, `RTSP`. |
|
|
152
|
+
| `autoReconnect` | Boolean | <div class="yellow">No</div> | Automatically reconnect stream when it disconnects |
|
|
153
|
+
| ^^ | ^^ | ^^ | Default value: false |
|
|
154
|
+
| `autoReconnectInterval` | Number | <div class="yellow">No</div> | Interval in miliseconds between reconnect attempts |
|
|
155
|
+
| ^^ | ^^ | ^^ | Default value: 30000 ms |
|
|
156
|
+
| `volume` | Number | <div class="yellow">No</div> | Volume of the stream |
|
|
157
|
+
| `trackSelection` | Object | <div class="yellow">No</div> | Track selection options |
|
|
158
|
+
| `drm` | Object | <div class="yellow">No</div> | DRM options |
|
|
141
159
|
|
|
142
160
|
### Javascript syntax
|
|
161
|
+
|
|
143
162
|
```javascript
|
|
144
163
|
// Example with specific protocol type
|
|
145
|
-
await sos.stream.play(uri,
|
|
164
|
+
await sos.stream.play(uri, x, y, width, height, { protocol: 'HTTP' });
|
|
146
165
|
|
|
147
166
|
// Example with other options - enable auto reconnect
|
|
148
|
-
await sos.stream.play(uri,
|
|
167
|
+
await sos.stream.play(uri, x, y, width, height, { protocol: 'HTTP', autoReconnect: true });
|
|
149
168
|
|
|
150
169
|
// Example with other options - reconnect every 10 seconds
|
|
151
|
-
await sos.stream.play(uri,
|
|
170
|
+
await sos.stream.play(uri, x, y, width, height, { protocol: 'HTTP', autoReconnect: true, autoReconnectInterval: 10000 });
|
|
152
171
|
|
|
153
172
|
// Deprecated format
|
|
154
|
-
await sos.stream.play(uri,
|
|
173
|
+
await sos.stream.play(uri, x, y, width, height, 'HTTP');
|
|
155
174
|
```
|
|
156
175
|
|
|
157
176
|
:::note[GitHub Example]
|
|
177
|
+
|
|
158
178
|
[Stream video Applet example](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/stream)
|
|
179
|
+
|
|
159
180
|
:::
|
|
160
181
|
|
|
161
182
|
## stop()
|
|
162
|
-
|
|
183
|
+
|
|
184
|
+
Stops the video stream playback.
|
|
163
185
|
|
|
164
186
|
### Javascript syntax
|
|
187
|
+
|
|
165
188
|
```javascript
|
|
166
|
-
await sos.stream.stop(uri,
|
|
189
|
+
await sos.stream.stop(uri, x, y, width, height);
|
|
167
190
|
```
|
|
168
191
|
|
|
169
192
|
### Parameters:
|
|
170
193
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
| `uri`
|
|
174
|
-
| `x`
|
|
175
|
-
| `y`
|
|
176
|
-
| `width`
|
|
177
|
-
| `height`
|
|
194
|
+
| Param | Type | Required | Description |
|
|
195
|
+
| -------- | ------ | :------------------------: | --------------------------------------------- |
|
|
196
|
+
| `uri` | String | <div class="red">Yes</div> | Network address where the stream is available |
|
|
197
|
+
| `x` | Number | <div class="red">Yes</div> | Stream x-position on the screen |
|
|
198
|
+
| `y` | Number | <div class="red">Yes</div> | Stream y-position on the screen |
|
|
199
|
+
| `width` | Number | <div class="red">Yes</div> | Stream width on the screen |
|
|
200
|
+
| `height` | Number | <div class="red">Yes</div> | Stream height on the screen |
|
|
201
|
+
|
|
202
|
+
## pause()
|
|
203
|
+
|
|
204
|
+
Pauses the video stream playback.
|
|
205
|
+
|
|
206
|
+
### Javascript syntax
|
|
207
|
+
|
|
208
|
+
```javascript
|
|
209
|
+
await sos.stream.pause(uri, x, y, width, height);
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
### Parameters:
|
|
213
|
+
|
|
214
|
+
| Param | Type | Required | Description |
|
|
215
|
+
| -------- | ------ | :------------------------: | --------------------------------------------- |
|
|
216
|
+
| `uri` | String | <div class="red">Yes</div> | Network address where the stream is available |
|
|
217
|
+
| `x` | Number | <div class="red">Yes</div> | Stream x-position on the screen |
|
|
218
|
+
| `y` | Number | <div class="red">Yes</div> | Stream y-position on the screen |
|
|
219
|
+
| `width` | Number | <div class="red">Yes</div> | Stream width on the screen |
|
|
220
|
+
| `height` | Number | <div class="red">Yes</div> | Stream height on the screen |
|
|
221
|
+
|
|
222
|
+
## resume()
|
|
223
|
+
|
|
224
|
+
Resumes the video stream playback.
|
|
225
|
+
|
|
226
|
+
### Javascript syntax
|
|
227
|
+
|
|
228
|
+
```javascript
|
|
229
|
+
await sos.stream.resume(uri, x, y, width, height);
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
### Parameters:
|
|
233
|
+
|
|
234
|
+
| Param | Type | Required | Description |
|
|
235
|
+
| -------- | ------ | :------------------------: | --------------------------------------------- |
|
|
236
|
+
| `uri` | String | <div class="red">Yes</div> | Network address where the stream is available |
|
|
237
|
+
| `x` | Number | <div class="red">Yes</div> | Stream x-position on the screen |
|
|
238
|
+
| `y` | Number | <div class="red">Yes</div> | Stream y-position on the screen |
|
|
239
|
+
| `width` | Number | <div class="red">Yes</div> | Stream width on the screen |
|
|
240
|
+
| `height` | Number | <div class="red">Yes</div> | Stream height on the screen |
|
|
178
241
|
|
|
179
242
|
## getTracks()
|
|
243
|
+
|
|
180
244
|
Get all tracks of the selected stream.
|
|
181
245
|
|
|
182
246
|
### Javascript syntax
|
|
247
|
+
|
|
183
248
|
```javascript
|
|
184
249
|
const videoId = {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
250
|
+
uri: 'http://example.com/stream.m3u8',
|
|
251
|
+
x: 0,
|
|
252
|
+
y: 0,
|
|
253
|
+
width: 1920,
|
|
254
|
+
height: 1080,
|
|
190
255
|
};
|
|
191
256
|
|
|
192
257
|
const tracks = await sos.stream.getTracks(videoId); // Promise<ITrackInfo[]>
|
|
@@ -194,50 +259,56 @@ const tracks = await sos.stream.getTracks(videoId); // Promise<ITrackInfo[]>
|
|
|
194
259
|
|
|
195
260
|
### Parameters:
|
|
196
261
|
|
|
197
|
-
|
|
|
198
|
-
|
|
|
199
|
-
| `videoId`
|
|
262
|
+
| Param | Type | Required | Description |
|
|
263
|
+
| --------- | ------ | :------------------------: | ---------------------------------- |
|
|
264
|
+
| `videoId` | Object | <div class="red">Yes</div> | Video ID object of selected stream |
|
|
200
265
|
|
|
201
266
|
### Example of returned value
|
|
267
|
+
|
|
202
268
|
```javascript
|
|
203
269
|
[
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
270
|
+
{
|
|
271
|
+
trackType: 'VIDEO', // string - AUDIO, VIDEO, TEXT
|
|
272
|
+
mimeType: 'video/mp4', // string
|
|
273
|
+
videoSize: {
|
|
274
|
+
// object
|
|
275
|
+
width: 1920, // number
|
|
276
|
+
height: 1080, // number
|
|
277
|
+
},
|
|
278
|
+
groupId: '1', // string
|
|
279
|
+
trackIndex: 1, // number
|
|
280
|
+
selected: true, // boolean
|
|
281
|
+
language: 'en', // string
|
|
282
|
+
supported: true, // boolean
|
|
283
|
+
},
|
|
284
|
+
];
|
|
218
285
|
```
|
|
219
286
|
|
|
220
287
|
## selectTrack()
|
|
288
|
+
|
|
221
289
|
Select track of the selected stream.
|
|
222
290
|
|
|
223
291
|
### Javascript syntax
|
|
292
|
+
|
|
224
293
|
```javascript
|
|
225
294
|
await sos.stream.selectTrack(videoId, trackType, groupId, trackIndex); // Promise<void>
|
|
226
295
|
```
|
|
227
296
|
|
|
228
297
|
### Parameters:
|
|
229
298
|
|
|
230
|
-
|
|
|
231
|
-
|
|
|
232
|
-
| `videoId`
|
|
233
|
-
| `trackType`
|
|
234
|
-
| `groupId`
|
|
235
|
-
| `trackIndex`
|
|
299
|
+
| Param | Type | Required | Description |
|
|
300
|
+
| ------------ | ------ | :------------------------: | ------------------------------------- |
|
|
301
|
+
| `videoId` | Object | <div class="red">Yes</div> | Video ID object of selected stream |
|
|
302
|
+
| `trackType` | String | <div class="red">Yes</div> | Track type - `AUDIO`, `VIDEO`, `TEXT` |
|
|
303
|
+
| `groupId` | String | <div class="red">Yes</div> | Group ID of selected track |
|
|
304
|
+
| `trackIndex` | Number | <div class="red">Yes</div> | Index of selected track |
|
|
236
305
|
|
|
237
306
|
## resetTrack()
|
|
307
|
+
|
|
238
308
|
Reset track of the selected stream.
|
|
239
309
|
|
|
240
310
|
### Javascript syntax
|
|
311
|
+
|
|
241
312
|
```javascript
|
|
242
313
|
await sos.stream.resetTrack(videoId, trackType); // Promise<void>
|
|
243
314
|
await sos.stream.resetTrack(videoId, trackType, groupId); // Promise<void>
|
|
@@ -245,138 +316,158 @@ await sos.stream.resetTrack(videoId, trackType, groupId); // Promise<void>
|
|
|
245
316
|
|
|
246
317
|
### Parameters:
|
|
247
318
|
|
|
248
|
-
|
|
|
249
|
-
|
|
|
250
|
-
| `videoId`
|
|
251
|
-
| `trackType`
|
|
252
|
-
| `groupId`
|
|
319
|
+
| Param | Type | Required | Description |
|
|
320
|
+
| ----------- | ------ | :--------------------------: | ------------------------------------- |
|
|
321
|
+
| `videoId` | Object | <div class="red">Yes</div> | Video ID object of selected stream |
|
|
322
|
+
| `trackType` | String | <div class="red">Yes</div> | Track type - `AUDIO`, `VIDEO`, `TEXT` |
|
|
323
|
+
| `groupId` | String | <div class="yellow">No</div> | Group ID of selected track |
|
|
253
324
|
|
|
254
325
|
## Event onConnected()
|
|
326
|
+
|
|
255
327
|
Calls a listener callback everytime `connected` event is emitted.
|
|
256
328
|
|
|
257
329
|
### Javascript syntax
|
|
330
|
+
|
|
258
331
|
```javascript
|
|
259
332
|
sos.stream.onConnected((event) => {
|
|
260
|
-
|
|
333
|
+
// do something
|
|
261
334
|
});
|
|
262
335
|
```
|
|
263
336
|
|
|
264
337
|
## Event onDisconnected()
|
|
338
|
+
|
|
265
339
|
Calls a listener callback everytime `disconnected` event is emitted.
|
|
266
340
|
|
|
267
341
|
### Javascript syntax
|
|
342
|
+
|
|
268
343
|
```javascript
|
|
269
344
|
sos.stream.onDisconnected((event) => {
|
|
270
|
-
|
|
345
|
+
// do something
|
|
271
346
|
});
|
|
272
347
|
```
|
|
273
348
|
|
|
274
349
|
## Event onError()
|
|
350
|
+
|
|
275
351
|
Calls a listener callback everytime `error` event is emitted.
|
|
276
352
|
|
|
277
353
|
### Javascript syntax
|
|
354
|
+
|
|
278
355
|
```javascript
|
|
279
356
|
sos.stream.onError((event) => {
|
|
280
|
-
|
|
357
|
+
// do something
|
|
281
358
|
});
|
|
282
359
|
```
|
|
283
360
|
|
|
284
361
|
## Event onPlay()
|
|
362
|
+
|
|
285
363
|
Calls a listener callback everytime `play` event is emitted.
|
|
286
364
|
|
|
287
365
|
### Javascript syntax
|
|
366
|
+
|
|
288
367
|
```javascript
|
|
289
368
|
sos.stream.onPlay((event) => {
|
|
290
|
-
|
|
369
|
+
// do something
|
|
291
370
|
});
|
|
292
371
|
```
|
|
293
372
|
|
|
294
373
|
## Event onStop()
|
|
374
|
+
|
|
295
375
|
Calls a listener callback everytime `stop` event is emitted.
|
|
296
376
|
|
|
297
377
|
### Javascript syntax
|
|
378
|
+
|
|
298
379
|
```javascript
|
|
299
380
|
sos.stream.onStop((event) => {
|
|
300
|
-
|
|
381
|
+
// do something
|
|
301
382
|
});
|
|
302
383
|
```
|
|
303
384
|
|
|
304
385
|
## Event onPrepare()
|
|
386
|
+
|
|
305
387
|
Calls a listener callback everytime `prepare` event is emitted.
|
|
306
388
|
|
|
307
389
|
### Javascript syntax
|
|
390
|
+
|
|
308
391
|
```javascript
|
|
309
392
|
sos.stream.onPrepare((event) => {
|
|
310
|
-
|
|
393
|
+
// do something
|
|
311
394
|
});
|
|
312
395
|
```
|
|
313
396
|
|
|
314
397
|
## Event onTracksChanged()
|
|
398
|
+
|
|
315
399
|
Calls a listener callback everytime `tracks_changed` event is emitted.
|
|
316
400
|
|
|
317
401
|
### Javascript syntax
|
|
402
|
+
|
|
318
403
|
```javascript
|
|
319
404
|
sos.stream.onTracksChanged((event) => {
|
|
320
|
-
|
|
405
|
+
// do something
|
|
321
406
|
});
|
|
322
407
|
```
|
|
323
408
|
|
|
324
409
|
## Stream events
|
|
410
|
+
|
|
325
411
|
All stream events have the same format.
|
|
326
412
|
|
|
327
413
|
`type` property contains string with the event type. Type can be `connected`, `disconnected`, `error` or `tracks_changed`.
|
|
328
414
|
|
|
329
|
-
`srcArguments` property contains parameters of the source stream, that emitted the event.
|
|
330
|
-
|
|
415
|
+
`srcArguments` property contains parameters of the source stream, that emitted the event. That way, if multiple streams are playing at once,
|
|
416
|
+
you can associate the events with each stream instance.
|
|
331
417
|
|
|
332
418
|
Example of **connected**, **disconnected** event:
|
|
419
|
+
|
|
333
420
|
```json
|
|
334
421
|
{
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
422
|
+
"type": "<type>",
|
|
423
|
+
"srcArguments": {
|
|
424
|
+
"uri": "<uri>",
|
|
425
|
+
"x": 0,
|
|
426
|
+
"y": 0,
|
|
427
|
+
"width": 1920,
|
|
428
|
+
"height": 1080,
|
|
429
|
+
"protocol": "HTTP"
|
|
430
|
+
}
|
|
344
431
|
}
|
|
345
432
|
```
|
|
346
433
|
|
|
347
434
|
Example of **tracks_changed** event:
|
|
435
|
+
|
|
348
436
|
```json
|
|
349
437
|
{
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
438
|
+
"type": "tracks_changed",
|
|
439
|
+
"srcArguments": {
|
|
440
|
+
"uri": "<uri>",
|
|
441
|
+
"x": 0,
|
|
442
|
+
"y": 0,
|
|
443
|
+
"width": 1920,
|
|
444
|
+
"height": 1080,
|
|
445
|
+
"tracks": [] // Array of ITrackInfo
|
|
446
|
+
}
|
|
359
447
|
}
|
|
360
448
|
```
|
|
361
449
|
|
|
362
450
|
Example of **error** event:
|
|
451
|
+
|
|
363
452
|
```json
|
|
364
453
|
{
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
454
|
+
"type": "error",
|
|
455
|
+
"srcArguments": {
|
|
456
|
+
"uri": "<uri>",
|
|
457
|
+
"x": 0,
|
|
458
|
+
"y": 0,
|
|
459
|
+
"width": 1920,
|
|
460
|
+
"height": 1080,
|
|
461
|
+
"protocol": "HTTP"
|
|
462
|
+
},
|
|
463
|
+
"errorMessage": "Some error message"
|
|
375
464
|
}
|
|
376
465
|
```
|
|
377
466
|
|
|
378
467
|
## Usage with Typescript
|
|
379
|
-
|
|
468
|
+
|
|
469
|
+
You can also use all these methods with
|
|
470
|
+
[signageOS TypeScript](https://docs.signageos.io/hc/en-us/articles/4405069154962#signageos-typescript).
|
|
380
471
|
|
|
381
472
|
```typescript
|
|
382
473
|
type StreamProtocol = 'HLS' | 'RTP' | 'HTTP' | 'UDP' | 'RTMP' | 'RTSP';
|
|
@@ -477,15 +568,15 @@ onTracksChanged(listener: (event: StreamTracksChangedEvent) => void): void;
|
|
|
477
568
|
```
|
|
478
569
|
|
|
479
570
|
## Errors
|
|
480
|
-
Although we are doing our best, following errors may occur when working with the video stream.
|
|
481
571
|
|
|
572
|
+
Although we are doing our best, following errors may occur when working with the video stream.
|
|
482
573
|
|
|
483
|
-
| Code
|
|
484
|
-
|
|
|
485
|
-
| 41401 | AppletStreamError
|
|
574
|
+
| Code | Type | Message |
|
|
575
|
+
| ----- | ------------------- | ---------------------------------------------------- |
|
|
576
|
+
| 41401 | AppletStreamError | Invalid stream protocol type: `protocol` |
|
|
486
577
|
| 51301 | InternalStreamError | Couldn't stop the stream before playing the new one. |
|
|
487
|
-
| 51301 | InternalStreamError | Couldn't stop the stream.
|
|
488
|
-
| 51302 | InternalStreamError | Couldn't prepare the stream.
|
|
489
|
-
| 51303 | InternalStreamError | Couldn't get stream tracks.
|
|
490
|
-
| 51304 | InternalStreamError | Couldn't select stream track.
|
|
491
|
-
| 51305 | InternalStreamError | Couldn't reset stream track.
|
|
578
|
+
| 51301 | InternalStreamError | Couldn't stop the stream. |
|
|
579
|
+
| 51302 | InternalStreamError | Couldn't prepare the stream. |
|
|
580
|
+
| 51303 | InternalStreamError | Couldn't get stream tracks. |
|
|
581
|
+
| 51304 | InternalStreamError | Couldn't select stream track. |
|
|
582
|
+
| 51305 | InternalStreamError | Couldn't reset stream track. |
|