Skip to content

Commit 300d812

Browse files
committed
Merge branch 'PBE-5855-feat/react-native-video-design-v2' into PBE-5856-feat/theme-consolidation
2 parents 7056cb8 + e9ba37c commit 300d812

File tree

86 files changed

+1738
-490
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+1738
-490
lines changed

.styles/Vocab/Base/accept.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,6 @@ proxied
9292
enum
9393
everytime
9494
telemedicine
95+
realtime
96+
Bridgeless
97+
Interop

packages/client/CHANGELOG.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,20 @@
22

33
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
44

5+
## [1.8.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.7.4...@stream-io/video-client-1.8.0) (2024-10-02)
6+
7+
8+
### Features
9+
10+
* manual video quality selection ([#1486](https://github.com/GetStream/stream-video-js/issues/1486)) ([3a754af](https://github.com/GetStream/stream-video-js/commit/3a754afa1bd13d038b1023520ec8a5296ad2669e))
11+
12+
## [1.7.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.7.3...@stream-io/video-client-1.7.4) (2024-10-02)
13+
14+
15+
### Bug Fixes
16+
17+
* retryable location hint ([#1505](https://github.com/GetStream/stream-video-js/issues/1505)) ([087417f](https://github.com/GetStream/stream-video-js/commit/087417f926b3d43a5bcb814ac9bb5951c1e63479))
18+
519
## [1.7.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.7.2...@stream-io/video-client-1.7.3) (2024-09-24)
620

721

packages/client/docusaurus/docs/javascript/01-basics/02-installation.mdx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Installation
3-
description: Install the client for video calling
2+
title: Installation & Size
3+
description: Installation instructions and bundle size impact for the Plain-JS Video SDK
44
---
55

6-
The installation of the packages for the Stream Video JavaScript Client can be either done with `yarn` or `npm`.
6+
The installation of the packages for the Stream Video Plain-JS SDK can be either done with `yarn`, `npm` or any other package manager.
77

88
For `yarn`:
99

@@ -16,3 +16,10 @@ For `npm`:
1616
```bash
1717
npm install @stream-io/video-client
1818
```
19+
20+
## SDK Size
21+
22+
The SDK size after minification is below 370KB. This size includes all the functionalities provided by the SDK.
23+
After g-zipping, the SDK size can be compressed down to ~100KB.
24+
25+
For most up-to-date information on the SDK size, please check the [package size](https://bundlephobia.com/result?p=@stream-io/video-client) on Bundlephobia.
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Supported Platforms and Size
3+
description: A list of supported platforms and SDK size information
4+
---
5+
6+
Our Plain-JS Video SDK can run on all modern browsers and platforms. Here is a list of supported platforms:
7+
8+
- Chrome 91+
9+
- Firefox 89+
10+
- Edge 91+
11+
- Safari and Mobile Safari 15+
12+
13+
## WebView
14+
15+
Our SDK can run in Web View on Android and iOS. However, we recommend using the SDK in a browser for the best experience.
Lines changed: 4 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: Reactions & Custom Events
3-
description: How reactions and custom events work
2+
title: Reactions
3+
description: How reactions work
44
---
55

66
Reactions allow call participants to send emojis in real-time.
@@ -50,6 +50,8 @@ const { participants } = call.state;
5050
const reactions = participants.map((p) => p.reaction);
5151
```
5252

53+
You can also subscribe to the `call.reaction_new` WebSocket event to receive reactions. For more information, check out our [Events guide](../../advanced/events).
54+
5355
### Clearing reactions
5456

5557
If you're using the [participant state](../../guides/call-and-participant-state/#observe-participant-state) for receiving reactions, you can also clear the latest reaction using the `resetReaction` method:
@@ -62,39 +64,3 @@ call.resetReaction(participants[0].sessionId);
6264
```
6365

6466
This is a local action, it won't send any WebSocket messages. It's helpful if you only want to display reactions for a set period of time.
65-
66-
## Custom events
67-
68-
### Sending custom events
69-
70-
You can use the `sendCustomEvent` method of the `Call` instance to send custom events:
71-
72-
```typescript
73-
const call: Call;
74-
75-
await call.sendCustomEvent({
76-
type: 'draw',
77-
x: 10,
78-
y: 30,
79-
});
80-
```
81-
82-
The `custom` property can contain any data.
83-
84-
### Receiving custom events
85-
86-
Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events).
87-
88-
To receive custom events, you need to subscribe to the `custom` WebSocket event:
89-
90-
```typescript
91-
const call: Call;
92-
93-
call.on('custom', (event: StreamCallEvent) => {
94-
if (event.type === 'custom') {
95-
console.log(`Custom event: ${event.custom.type}`);
96-
}
97-
});
98-
```
99-
100-
For more information, check out our [Events guide](../../advanced/events).
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Custom Events
3+
description: How custom events work
4+
---
5+
6+
You can use custom events to send data among the participants in the call.
7+
This is a realtime layer that you can use to broadcast your own events to.
8+
9+
## Sending custom events
10+
11+
For example, if you are building a collaborative drawing app, you can send the coordinates to the other participants with the following code:
12+
13+
```typescript
14+
await call.sendCustomEvent({
15+
type: 'draw',
16+
x: 10,
17+
y: 30,
18+
});
19+
```
20+
21+
Please note that the total payload for these events is limited to 5KB in size.
22+
23+
## Receiving custom events
24+
25+
Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events).
26+
27+
To receive custom events, you need to subscribe to the `custom` event on the call instance:
28+
29+
```typescript
30+
const unsubscribe = call.on('custom', (event: CustomVideoEvent) => {
31+
const payload = event.custom;
32+
if (payload.type === 'draw') {
33+
console.log(`Received draw event: x=${payload.x}, y=${payload.y}`);
34+
}
35+
});
36+
37+
// Unsubscribe when you no longer need to listen to custom events
38+
unsubscribe();
39+
```
40+
41+
For more information, check out our [Events guide](../../advanced/events).

packages/client/docusaurus/docs/javascript/02-guides/04-screensharing.mdx renamed to packages/client/docusaurus/docs/javascript/10-advanced/04-screensharing.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ If you want to see the device management API in action, you can check out [the s
1111
Our Video SDK provides an easy ways to enable screensharing in your application.
1212
In the following examples, we would learn to control and configure screen sharing.
1313

14+
:::note
15+
Screen Sharing is supported only on Desktop browsers. For more details,
16+
please refer to the [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#browser_compatibility) section.
17+
:::
18+
1419
For a user to be able to share their screen, they must have the `screenshare` capability
1520
(provided through the `Screenshare` permission) configured for the call they are in.
1621

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
id: manual-video-quality-selection
3+
title: Manual Video Quality Selection
4+
---
5+
6+
By default, our SDK chooses the incoming video quality that best matches the size of a video element for a given participant. It makes less sense to waste bandwidth receiving Full HD video when it's going to be displayed in a 320 by 240 pixel rectangle.
7+
8+
However, it's still possible to override this behavior and manually request higher resolution video for better quality, or lower resolution to save bandwidth. It's also possible to disable incoming video altogether for an audio-only experience.
9+
10+
## Overriding Preferred Resolution
11+
12+
To override the preferred incoming video resolution, use the `call.setPreferredIncomingVideoResolution` method:
13+
14+
```js
15+
await call.setPreferredIncomingVideoResolution({ width: 640, height: 480 });
16+
```
17+
18+
:::note
19+
Actual incoming video quality depends on a number of factors, such as the quality of the source video, and network conditions. Manual video quality selection allows you to specify your preference, while the actual resolution is automatically selected from the available resolutions to match that preference as closely as possible.
20+
:::
21+
22+
It's also possible to override the incoming video resolution for only a selected subset of call participants. The `call.setPreferredIncomingVideoResolution` method optionally takes an array of participant session identifiers as its second argument. Session identifiers can be obtained from the call participant state:
23+
24+
```js
25+
const [firstParticipant, secondParticipant] = call.state.participants;
26+
// Set preferred incoming video resolution for the first two participants only:
27+
await call.setPreferredIncomingVideoResolution({ width: 640, height: 480 }, [
28+
[firstParticipant.sessionId, secondParticipant.sessionId],
29+
]);
30+
```
31+
32+
Calling this method will enable incoming video for the selected participants if it was previously disabled.
33+
34+
To clear a previously set preference, pass `undefined` instead of resolution:
35+
36+
```js
37+
// Clear resolution preference for selected participants:
38+
await call.setPreferredIncomingVideoResolution(undefined, [
39+
participant.sessionId,
40+
]);
41+
// Clear resolution preference for all participants:
42+
await call.setPreferredIncomingVideoResolution(undefined);
43+
```
44+
45+
## Disabling Incoming Video
46+
47+
To completely disable incoming video (either to save data, or for an audio-only experience), use the `call.setIncomingVideoEnabled` method:
48+
49+
```js
50+
await call.setIncomingVideoEnabled(false);
51+
```
52+
53+
To enable incoming video again, pass `true` as an argument:
54+
55+
```js
56+
await call.setIncomingVideoEnabled(true);
57+
```
58+
59+
Calling this method will clear the previously set resolution preferences.

packages/client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@stream-io/video-client",
3-
"version": "1.7.3",
3+
"version": "1.8.0",
44
"packageManager": "[email protected]",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.es.js",

0 commit comments

Comments
 (0)