Skip to content

Commit

Permalink
Merge branch 'main' into feat/manual-video-quality
Browse files Browse the repository at this point in the history
  • Loading branch information
myandrienko authored Oct 2, 2024
2 parents 282c2d1 + 0fc76ce commit 49f110d
Show file tree
Hide file tree
Showing 22 changed files with 215 additions and 138 deletions.
1 change: 1 addition & 0 deletions .styles/Vocab/Base/accept.txt
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,4 @@ proxied
enum
everytime
telemedicine
realtime
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Installation
description: Install the client for video calling
title: Installation & Size
description: Installation instructions and bundle size impact for the Plain-JS Video SDK
---

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

For `yarn`:

Expand All @@ -16,3 +16,10 @@ For `npm`:
```bash
npm install @stream-io/video-client
```

## SDK Size

The SDK size after minification is below 370KB. This size includes all the functionalities provided by the SDK.
After g-zipping, the SDK size can be compressed down to ~100KB.

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.
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: Supported Platforms and Size
description: A list of supported platforms and SDK size information
---

Our Plain-JS Video SDK can run on all modern browsers and platforms. Here is a list of supported platforms:

- Chrome 91+
- Firefox 89+
- Edge 91+
- Safari and Mobile Safari 15+

## WebView

Our SDK can run in Web View on Android and iOS. However, we recommend using the SDK in a browser for the best experience.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Reactions & Custom Events
description: How reactions and custom events work
title: Reactions
description: How reactions work
---

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

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

### Clearing reactions

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:
Expand All @@ -62,39 +64,3 @@ call.resetReaction(participants[0].sessionId);
```

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.

## Custom events

### Sending custom events

You can use the `sendCustomEvent` method of the `Call` instance to send custom events:

```typescript
const call: Call;

await call.sendCustomEvent({
type: 'draw',
x: 10,
y: 30,
});
```

The `custom` property can contain any data.

### Receiving custom events

Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events).

To receive custom events, you need to subscribe to the `custom` WebSocket event:

```typescript
const call: Call;

call.on('custom', (event: StreamCallEvent) => {
if (event.type === 'custom') {
console.log(`Custom event: ${event.custom.type}`);
}
});
```

For more information, check out our [Events guide](../../advanced/events).
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: Custom Events
description: How custom events work
---

You can use custom events to send data among the participants in the call.
This is a realtime layer that you can use to broadcast your own events to.

## Sending custom events

For example, if you are building a collaborative drawing app, you can send the coordinates to the other participants with the following code:

```typescript
await call.sendCustomEvent({
type: 'draw',
x: 10,
y: 30,
});
```

Please note that the total payload for these events is limited to 5KB in size.

## Receiving custom events

Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events).

To receive custom events, you need to subscribe to the `custom` event on the call instance:

```typescript
const unsubscribe = call.on('custom', (event: CustomVideoEvent) => {
const payload = event.custom;
if (payload.type === 'draw') {
console.log(`Received draw event: x=${payload.x}, y=${payload.y}`);
}
});

// Unsubscribe when you no longer need to listen to custom events
unsubscribe();
```

For more information, check out our [Events guide](../../advanced/events).
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ If you want to see the device management API in action, you can check out [the s
Our Video SDK provides an easy ways to enable screensharing in your application.
In the following examples, we would learn to control and configure screen sharing.

:::note
Screen Sharing is supported only on Desktop browsers. For more details,
please refer to the [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#browser_compatibility) section.
:::

For a user to be able to share their screen, they must have the `screenshare` capability
(provided through the `Screenshare` permission) configured for the call they are in.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ So what did we install precisely?

- `@stream-io/video-react-native-sdk` (SVRN) is Stream's Video SDK which contains UI components, hooks and util functions that will enable audio/video calls.
- `@stream-io/react-native-webrtc` is a WebRTC module for React Native, SVRN depends on this dependency, it's components and utilities to render audio/video tracks and interact with the phone's media devices.
- `@config-plugins/react-native-webrtc` is the expo config plugin for the WebRTC module for React Native.
- `@config-plugins/react-native-webrtc` Config plugin to auto-configure `@stream-io/react-native-webrtc` when the native code is generated (`npx expo prebuild`).

Check failure on line 31 in packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/02-expo.mdx

View workflow job for this annotation

GitHub Actions / vale

[vale] packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/02-expo.mdx#L31

[Vale.Terms] Use 'config' instead of 'Config'.
Raw output
{"message": "[Vale.Terms] Use 'config' instead of 'Config'.", "location": {"path": "packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/02-expo.mdx", "range": {"start": {"line": 31, "column": 41}}}, "severity": "ERROR"}
- `react-native-incall-manager` handles media-routes/sensors/events during an audio/video call.
- `react-native-svg` provides SVG support to React Native, SVRN's components and it's icons are reliant on this dependency.
- `@react-native-community/netinfo` - is used to detect the device's connectivity state, type and quality.
Expand Down Expand Up @@ -73,9 +73,9 @@ Add the config plugin for [`@stream-io/video-react-native-sdk`](https://github.c
[
"@config-plugins/react-native-webrtc",
{
// optionally you can add your own explanations for permissions on iOS
"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
"microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
// add your explanations for camera and microphone
"cameraPermission": "$(PRODUCT_NAME) requires camera access in order to capture and transmit video",
"microphonePermission": "$(PRODUCT_NAME) requires microphone access in order to capture and transmit audio"
}
]
// highlight-end
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Reactions & Custom Events
description: How reactions and custom events work
title: Reactions
description: How reactions work
---

Reactions allow call participants to send emojis in real-time.
Expand All @@ -20,7 +20,7 @@ You can send a reaction using the `sendReaction` method of a `Call` instance.
```typescript
const call: Call;

call.sendReaction({ type: 'raised-hand' });
await call.sendReaction({ type: 'raised-hand' });
```

The value of the `type` attribute can be any string.
Expand All @@ -30,7 +30,7 @@ It's also possible to provide additional data for the reaction:
```typescript
const call: Call;

call.sendReaction({
await call.sendReaction({
type: 'raised-hand',
emoji_code: ':raise-hand:',
custom: { clearAfterTimeout: true },
Expand Down Expand Up @@ -69,42 +69,3 @@ call.resetReaction(participants[0].sessionId);
```

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.

## Custom events

### Sending custom events

You can use the `sendEvent` method of the `Call` instance to send custom events:

```typescript
const call: Call;

call.sendEvent({
type: 'custom',
custom: {
type: 'draw',
x: 10,
y: 30,
},
});
```

The `custom` property can contain any data.

### Receiving custom events

Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events).

To receive custom events, you need to subscribe to the `custom` WebSocket event:

```typescript
const call: Call;

call.on('custom', (event: StreamCallEvent) => {
if (event.type === 'custom') {
console.log(`Custom event: ${event.custom.type}`);
}
});
```

For more information, check out our [Events guide](../../advanced/events).
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: Custom Events
description: How custom events work
---

You can use custom events to send data among the participants in the call.
This is a realtime layer that you can use to broadcast your own events to.

## Sending custom events

For example, if you are building a collaborative drawing app, you can send the coordinates to the other participants with the following code:

```typescript
await call.sendCustomEvent({
type: 'draw',
x: 10,
y: 30,
});
```

Please note that the total payload for these events is limited to 5KB in size.

## Receiving custom events

Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events).

To receive custom events, you need to subscribe to the `custom` event on the call instance:

```typescript
const unsubscribe = call.on('custom', (event: CustomVideoEvent) => {
const payload = event.custom;
if (payload.type === 'draw') {
console.log(`Received draw event: x=${payload.x}, y=${payload.y}`);
}
});

// Unsubscribe when you no longer need to listen to custom events
unsubscribe();
```

For more information, check out our [Events guide](../../advanced/events).
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,14 @@ In **app.json**, in the `plugins` field, add the `ringingPushNotifications` prop
],
// highlight-next-line
"@config-plugins/react-native-callkeep",
[
// highlight-next-line
"@config-plugins/react-native-webrtc",
{
"cameraPermission": "$(PRODUCT_NAME) requires camera access in order to capture and transmit video",
"microphonePermission": "$(PRODUCT_NAME) requires microphone access in order to capture and transmit audio"
}
],
// highlight-next-line
"@react-native-firebase/app",
[
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Installation
description: Install the React Video SDK
title: Installation & Size
description: Installation instructions and bundle size impact for the React Video SDK
---

The installation of the packages for the Stream Video React SDK can be either done with `yarn` or `npm`.
The installation of the packages for the Stream Video React SDK can be either done with `yarn`, `npm` or any other package manager.

For `yarn`:

Expand All @@ -16,3 +16,13 @@ For `npm`:
```bash
npm install @stream-io/video-react-sdk
```

## SDK Size

Our SDK follows the industry standards and is optimized for tree-shaking.
Modern bundlers like Webpack and Rollup can remove the unused code from the SDK, which helps in reducing the bundle size.

The SDK size after minification is below 600KB. This size includes all the components and utilities provided by the SDK.
After g-zipping, the SDK can be compressed down to ~165KB. The actual size of the SDK in your application will depend on the components you use.

For most up-to-date information on the SDK size, please check the [package size](https://bundlephobia.com/result?p=@stream-io/video-react-sdk) on Bundlephobia.
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: Supported Platforms
description: A list of supported platforms and SDK size information
---

Our React Video SDK can run on all modern browsers and platforms. Here is a list of supported platforms:

- Chrome 91+
- Firefox 89+
- Edge 91+
- Safari and Mobile Safari 15+

## WebView

Our SDK can run in Web View on Android and iOS. However, we recommend using the SDK in a browser for the best experience.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Reactions & Custom Events
description: How reactions and custom events work
title: Reactions
description: How reactions work
---

Reactions allow call participants to send emojis in real-time.
Expand Down Expand Up @@ -71,39 +71,3 @@ call.resetReaction(participants[0].sessionId);
```

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.

## Custom events

### Sending custom events

You can use the `sendCustomEvent` method of the `Call` instance to send custom events:

```typescript
const call: Call;

await call.sendCustomEvent({
type: 'draw',
x: 10,
y: 30,
});
```

The `custom` property can contain any data.

### Receiving custom events

Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events).

To receive custom events, you need to subscribe to the `custom` WebSocket event:

```typescript
const call: Call;

call.on('custom', (event: StreamCallEvent) => {
if (event.type === 'custom') {
console.log(`Custom event: ${event.custom.type}`);
}
});
```

For more information, check out our [Events guide](../../advanced/events).
Loading

0 comments on commit 49f110d

Please sign in to comment.