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