@whereby.com/browser-sdk 2.0.0-alpha17 → 2.0.0-alpha19
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 +29 -12
- package/dist/lib.cjs +3521 -3423
- package/dist/lib.esm.js +2373 -2275
- package/dist/types.d.ts +35 -19
- package/dist/{v2-alpha17.js → v2-alpha19.js} +9 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
# `@whereby.com/browser-sdk`
|
|
2
2
|
|
|
3
|
-
> This is a pre-release of the v2 version of this library, adding support for
|
|
3
|
+
> This is a pre-release of the v2 version of this library, adding support for
|
|
4
|
+
> more custom integration using React hooks and plain JavaScript classes in
|
|
5
|
+
> addition to the web component for embedding.
|
|
4
6
|
|
|
5
|
-
Whereby browser SDK is a library for seamless integration of Whereby
|
|
7
|
+
Whereby browser SDK is a library for seamless integration of Whereby
|
|
8
|
+
(https://whereby.com) video calls into your web application.
|
|
6
9
|
|
|
7
10
|
## Installation
|
|
8
11
|
|
|
@@ -18,14 +21,19 @@ yarn add @whereby.com/browser-sdk
|
|
|
18
21
|
|
|
19
22
|
## Usage
|
|
20
23
|
|
|
21
|
-
> In order to make use of this functionality, you must have a Whereby account
|
|
24
|
+
> In order to make use of this functionality, you must have a Whereby account
|
|
25
|
+
> from which you can create room urls, either [manually or through our
|
|
26
|
+
> API](https://docs.whereby.com/creating-and-deleting-rooms).
|
|
22
27
|
|
|
23
28
|
### React hooks
|
|
24
29
|
|
|
25
30
|
#### useLocalMedia
|
|
26
31
|
|
|
27
|
-
The `useLocalMedia` hook enables preview and selection of local devices (camera
|
|
28
|
-
|
|
32
|
+
The `useLocalMedia` hook enables preview and selection of local devices (camera
|
|
33
|
+
& microphone) prior to establishing a connection within a Whereby room. Use
|
|
34
|
+
this hook to build rich pre-call experiences, allowing end users to confirm
|
|
35
|
+
their device selection up-front. This hook works seamlessly with the
|
|
36
|
+
`useRoomConnection` hook described below.
|
|
29
37
|
|
|
30
38
|
```js
|
|
31
39
|
import { useLocalMedia, VideoView } from "@whereby.com/browser-sdk";
|
|
@@ -58,7 +66,9 @@ function MyPreCallUX() {
|
|
|
58
66
|
|
|
59
67
|
#### useRoomConnection
|
|
60
68
|
|
|
61
|
-
The `useRoomConnection` hook provides a way to connect participants in a given
|
|
69
|
+
The `useRoomConnection` hook provides a way to connect participants in a given
|
|
70
|
+
room, subscribe to state updates, and perform actions on the connection, like
|
|
71
|
+
toggling camera or microphone.
|
|
62
72
|
|
|
63
73
|
```js
|
|
64
74
|
import { useRoomConnection } from "@whereby.com/browser-sdk";
|
|
@@ -89,10 +99,12 @@ function MyCallUX( { roomUrl, localStream }) {
|
|
|
89
99
|
|
|
90
100
|
```
|
|
91
101
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
102
|
+
#### Usage with Next.js
|
|
103
|
+
|
|
104
|
+
If you are integrating these React hooks with Next.js, you need to ensure your
|
|
105
|
+
custom video experience components are rendered client side, as the underlying
|
|
106
|
+
APIs we use are only available in the browser context. Simply add `"use
|
|
107
|
+
client";` to the top of component, like in the following example:
|
|
96
108
|
|
|
97
109
|
```js
|
|
98
110
|
"use client";
|
|
@@ -111,7 +123,10 @@ export default function MyNextVideoExperience() {
|
|
|
111
123
|
|
|
112
124
|
### Web component for embedding
|
|
113
125
|
|
|
114
|
-
Use the `<whereby-embed />` web component to make use of Whereby's pre-built
|
|
126
|
+
Use the `<whereby-embed />` web component to make use of Whereby's pre-built
|
|
127
|
+
responsive UI. Refer to our
|
|
128
|
+
[documentation](https://docs.whereby.com/embedding-rooms/in-a-web-page/using-the-whereby-embed-element)
|
|
129
|
+
to learn which attributes are supported.
|
|
115
130
|
|
|
116
131
|
#### React
|
|
117
132
|
|
|
@@ -142,4 +157,6 @@ export default MyComponent;
|
|
|
142
157
|
|
|
143
158
|
**Note**
|
|
144
159
|
|
|
145
|
-
Although we have just higlighted two combinations of how to load and use the
|
|
160
|
+
Although we have just higlighted two combinations of how to load and use the
|
|
161
|
+
web component, it should be possible to use this library with all the major
|
|
162
|
+
frontend frameworks.
|