@vindral/web-sdk 2.0.1 → 2.0.2

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/README.md CHANGED
@@ -2,41 +2,55 @@
2
2
 
3
3
  **Ultra low latency streaming on all modern web browsers.**
4
4
 
5
- This package contains the web SDK for Vindral - the ultra low latency streaming platform for synchronized live experiences.
5
+ This package contains the Web SDK for Vindral - the ultra low latency streaming platform for synchronized live experiences.
6
6
 
7
- Check out our [demo](https://demo.vindral.com/).
7
+ For information about the Vindral product family and how the Web SDK fits into the system, [make sure to read the System Overview](https://docs.vindral.com/docs/overview/system-overview).
8
+
9
+ Make sure to check out the full [Web SDK Documentation](https://docs.vindral.com/web-sdk/) as well.
10
+
11
+ [Check out our demo](https://demo.vindral.com/) to see some of Vindral's features.
8
12
 
9
13
  ## Getting Started
10
14
 
11
15
  There are multiple ways to integrate the Web SDK, depending on use-case.
12
16
 
13
- The simplest way to get started is to use the [Iframe Embed Player](#embed). This requires the least amount of code, and will automatically be updated when new releases are available.
17
+ The most simple way to get started is to use the iframe-based [Embed Player](#embed-player). This requires the least amount of code, and will automatically be updated when new releases are available.
14
18
 
15
19
  The two other alternatives are [Player SDK](#player-sdk) and [Core SDK](#core-sdk) - these are the recommended options if the integration requires access to the APIs, such as timed metadata or other controls. The two SDKs have very similar APIs, but the Player SDK provides controls and buffering indication built in - the Core SDK is the most strippped down implementation for use-cases where all UI components are customized.
16
20
 
17
- ### Embed
21
+ If you are going for one of the SDK alternatives, follow the steps at [Installation](#installation) to get started:
22
+
23
+ ## Embed Player
18
24
 
19
25
  This is the simplest way to integrate. It allows you to add a fully functional video player to your site in no time. It will also be automatically updated when improvements are released.
20
26
 
21
- Add the following html snippet, replace `channel-id` and `cdn-entry-url` with your stream credentials, done!
27
+ Add the following html snippet, set `channelId` to channel id credential, done!
22
28
 
23
- ```
24
- <iframe src="https://embed.vindral.com/?core.channelId=<channel-id>&core.url=<cdn-entry-url>" frameborder="0" allowfullscreen></iframe>
29
+ ```html
30
+ <iframe
31
+ src="https://embed.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
32
+ frameborder="0"
33
+ allowfullscreen
34
+ ></iframe>
25
35
  ```
26
36
 
27
- ### SDK
37
+ [See the player in action](https://embed.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f) or [read more about Embed Player here](https://docs.vindral.com/docs/guides/using-the-embed-player).
28
38
 
29
- **Installation**
39
+ ## Installation
30
40
 
31
- The SDK is available as a package on NPM for use with a module bundler:
41
+ Install @vindral/web-sdk using `npm`:
32
42
 
33
43
  ```
34
- npm install @vindral/web-sdk
44
+ npm install --save @vindral/web-sdk
35
45
  ```
36
46
 
37
- For usage, see [Player Example](#example) and [Core Example](#example-1) and the API references.
47
+ or `yarn`:
38
48
 
39
- #### Player SDK
49
+ ```
50
+ yarn add @vindral/web-sdk
51
+ ```
52
+
53
+ ### Player SDK
40
54
 
41
55
  The Player SDK provides a ready-to-go player with controls - perfect for use-cases where the embed solution is not enough, such as when access to the javascript API is needed.
42
56
 
@@ -52,21 +66,18 @@ import { Player } from "@vindral/web-sdk"
52
66
  const root = document.querySelector<HTMLElement>("#root")
53
67
 
54
68
  const player = new Player({
55
- url: "<cdn-entry-url>",
56
- channelId: "<channel-id>",
69
+ url: "https://lb.cdn.vindral.com",
70
+ channelId: "vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f",
57
71
  })
58
72
 
59
73
  // Starts connecting to the channel
60
74
  player.core.connect()
61
75
 
62
- // This event is emitted when timed metadata events occur
63
- player.core.on("metadata", (metadata) => console.log("metadata: ", metadata.content))
64
-
65
76
  // Attaches the player view to the DOM
66
77
  player.attach(root)
67
78
  ```
68
79
 
69
- #### Core SDK
80
+ ### Core SDK
70
81
 
71
82
  The Core SDK is the lowest level method to integrate that provides only a video view and audio playback - this allows for full customization of the look of buffering indication, controls, etc.
72
83
 
@@ -75,7 +86,7 @@ The Core SDK is the lowest level method to integrate that provides only a video
75
86
  The example assumes that there is a html page that loads this script that has at least a div with `id="#root"`, `id="#playback-state"` and a button with `id="#activate-audio-button"`.
76
87
 
77
88
  ```typescript
78
- import { Vindral } from "@vindrl/web-sdk"
89
+ import { Vindral } from "@vindral/web-sdk"
79
90
 
80
91
  const root = document.querySelector<HTMLElement>("#root")!
81
92
  const button = document.querySelector<HTMLElement>("#activate-audio-button")!
@@ -84,8 +95,8 @@ const playbackState = document.querySelector<HTMLElement>("#playback-state")!
84
95
  button.style.display = "none"
85
96
 
86
97
  const instance = new Vindral({
87
- url: "<cdn-entry-url>",
88
- channelId: "<channel-id>",
98
+ url: "https://lb.cdn.vindral.com",
99
+ channelId: "vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f",
89
100
  })
90
101
 
91
102
  // Errors are emitted when they can not be handled internally
@@ -122,6 +133,6 @@ button.addEventListener("click", () => {
122
133
 
123
134
  #### License and support
124
135
 
125
- Vindral is a commercial product and requires an active, paid license to access and use. To obtain such a license, or in case you have any questions, get in touch on vindral.com/inquiries
136
+ Vindral is a commercial product and requires an active, paid license to access and use. To obtain such a license, or in case you have any questions, do not hesitate to [get in touch](https://vindral.com/inquiries)!
126
137
 
127
- Copyright Realsprint AB
138
+ Copyright RealSprint AB
package/index.d.ts CHANGED
@@ -380,6 +380,7 @@ declare class ConnectionModule {
380
380
  private _firstConnectionTime?;
381
381
  private _lastConnectionTime?;
382
382
  private contextSwitchesInProgress;
383
+ private contextSwitchesCompleted;
383
384
  private buffer;
384
385
  private constructor();
385
386
  static create: (emitter: Emitter<ConnectionModuleListeners, ConnectionModuleEvents>, logger: Logger, options: ConnectOptions) => ConnectionModule;
@@ -1240,6 +1241,7 @@ export interface PublicVindralEvents {
1240
1241
  ["rendition levels"]: ReadonlyArray<RenditionLevel>;
1241
1242
  ["rendition level"]: Readonly<RenditionLevel>;
1242
1243
  ["languages"]: ReadonlyArray<string>;
1244
+ ["channels"]: ReadonlyArray<Channel>;
1243
1245
  ["server wallclock time"]: Readonly<number>;
1244
1246
  ["buffer state event"]: Readonly<BufferStateEvent>;
1245
1247
  ["initialized media"]: void;
@@ -1309,6 +1311,9 @@ interface Subscription {
1309
1311
  interface ContextSwitch {
1310
1312
  type: "context switch";
1311
1313
  }
1314
+ interface ContextSwitchComplete {
1315
+ type: "context switch complete";
1316
+ }
1312
1317
  interface RenditionsSignal {
1313
1318
  type: "renditions";
1314
1319
  renditions: Rendition[];
@@ -1343,7 +1348,7 @@ interface RefreshAuthSignal {
1343
1348
  type: "refresh auth";
1344
1349
  token: string;
1345
1350
  }
1346
- declare type Signal = RenditionsSignal | SubscribeSignal | SubscriptionChangedSignal | TimingInfoSignal | PingSignal | PongSignal | ClientIpSignal | ContextSwitch | RefreshAuthSignal;
1351
+ declare type Signal = RenditionsSignal | SubscribeSignal | SubscriptionChangedSignal | TimingInfoSignal | PingSignal | PongSignal | ClientIpSignal | ContextSwitch | ContextSwitchComplete | RefreshAuthSignal;
1347
1352
  export interface Channel {
1348
1353
  channelId: string;
1349
1354
  name: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vindral/web-sdk",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "homepage": "https://vindral.com",
5
5
  "description": "Web SDK for viewing Vindral streams",
6
6
  "license": "SEE LICENSE IN https://www.vindral.com/terms-conditions",