@whereby.com/browser-sdk 1.8.1 → 2.0.0-alpha1
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 +60 -7
- package/dist/lib.cjs.js +5448 -131
- package/dist/lib.esm.js +5435 -132
- package/dist/types.d.ts +104 -0
- package/dist/v2-alpha1.js +105 -0
- package/package.json +38 -12
- package/dist/v1.js +0 -15
package/README.md
CHANGED
|
@@ -1,22 +1,75 @@
|
|
|
1
|
-
#
|
|
1
|
+
# `@whereby.com/browser-sdk`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> This is a pre-release of the v2 version of this library, adding support for more custom integration using React hooks and plain JavaScript classes in addition to the web component for embedding.
|
|
4
|
+
|
|
5
|
+
Whereby browser SDK is a library for seamless integration of Whereby (https://whereby.com) video calls into your web application.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
npm install @whereby.com/browser-sdk
|
|
11
|
+
```
|
|
12
|
+
or
|
|
13
|
+
```
|
|
14
|
+
yarn add @whereby.com/browser-sdk
|
|
15
|
+
```
|
|
4
16
|
|
|
5
17
|
## Usage
|
|
6
18
|
|
|
7
|
-
|
|
19
|
+
> In order to make use of this functionality, you must have a Whereby account from which you can create room urls, either [manually or through our API](https://docs.whereby.com/creating-and-deleting-rooms).
|
|
20
|
+
|
|
21
|
+
### React hooks
|
|
22
|
+
|
|
23
|
+
The `useRoomConnection` hook provides a way to connect participants in a given room, subscribe to state updates, and perform actions on the connection, like toggling camera or microphone.
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
import { useRoomConnection } from “@whereby.com/browser-sdk”;
|
|
27
|
+
|
|
28
|
+
function MyCallUX( { roomUrl, localStream }) {
|
|
29
|
+
const [state, actions, components ] = useRoomConnection(
|
|
30
|
+
"<room_url>"
|
|
31
|
+
{
|
|
32
|
+
localMediaConstraints: {
|
|
33
|
+
audio: true,
|
|
34
|
+
video: true,
|
|
35
|
+
},
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
const { connectionState, remoteParticipants } = state;
|
|
40
|
+
const { toggleCamera, toggleMicrophone } = actions;
|
|
41
|
+
const { VideoView } = components;
|
|
42
|
+
|
|
43
|
+
return <div className="videoGrid">
|
|
44
|
+
{ /* Render any UI, making use of state */ }
|
|
45
|
+
{ remoteParticipants.map((p) => (
|
|
46
|
+
<VideoView key={p.id} stream={p.stream} />
|
|
47
|
+
)) }
|
|
48
|
+
</div>;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Web component for embedding
|
|
54
|
+
|
|
55
|
+
Use the `<whereby-embed />` web component to make use of Whereby's pre-built responsive UI. Refer to our [documentation](https://docs.whereby.com/embedding-rooms/in-a-web-page/using-the-whereby-embed-element) to learn which attributes are supported.
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
#### React
|
|
59
|
+
|
|
8
60
|
```
|
|
9
61
|
import "@whereby.com/browser-sdk"
|
|
10
62
|
|
|
11
63
|
const MyComponent = ({ roomUrl }) => {
|
|
12
|
-
return <whereby-embed room={roomUrl} />
|
|
64
|
+
return <whereby-embed chat="off" room={roomUrl} />
|
|
13
65
|
}
|
|
14
66
|
|
|
15
67
|
export default MyComponent
|
|
16
68
|
|
|
17
69
|
```
|
|
18
70
|
|
|
19
|
-
|
|
71
|
+
#### In plain HTML
|
|
72
|
+
|
|
20
73
|
```
|
|
21
74
|
<html>
|
|
22
75
|
<head>
|
|
@@ -24,7 +77,7 @@ export default MyComponent
|
|
|
24
77
|
</head>
|
|
25
78
|
<body>
|
|
26
79
|
<div class="container">
|
|
27
|
-
<whereby-embed room="
|
|
80
|
+
<whereby-embed room="<room_url>" />
|
|
28
81
|
</div>
|
|
29
82
|
</body>
|
|
30
83
|
</html>
|
|
@@ -32,4 +85,4 @@ export default MyComponent
|
|
|
32
85
|
|
|
33
86
|
**Note**
|
|
34
87
|
|
|
35
|
-
Although we have just higlighted two combinations of how to load and use the web component, it should be possible to use this library with all the major frontend frameworks.
|
|
88
|
+
Although we have just higlighted two combinations of how to load and use the web component, it should be possible to use this library with all the major frontend frameworks.
|