Skip to content

Commit db49338

Browse files
author
React Native WebRTC Web Shim Github Pipelines
committed
More tweaks, rewrite and examples soon
1 parent be4cbcf commit db49338

File tree

10 files changed

+118
-36
lines changed

10 files changed

+118
-36
lines changed

‎.vitepress/config.js

+17-12
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ export default {
1010
cleanUrls: true,
1111
appearance: 'dark',
1212
lastUpdated: true,
13+
sitemap: {
14+
hostname: 'https://react-native-webrtc.github.io/handbook'
15+
},
1316
head: [
1417
[
1518
'meta',
@@ -74,12 +77,6 @@ export default {
7477
]
7578
*/
7679
],
77-
markdown: {
78-
theme: {
79-
light: 'vitesse-light',
80-
dark: 'vitesse-dark'
81-
}
82-
},
8380
themeConfig: {
8481
logo: '/logo.svg',
8582
siteTitle: 'React Native WebRTC',
@@ -148,21 +145,29 @@ export default {
148145
text: 'iOS 12+',
149146
link: '/guides/extra-steps/ios'
150147
},
148+
{
149+
text: 'Expo 45+',
150+
link: '/guides/extra-steps/expo'
151+
},
152+
{
153+
text: 'React Native Web',
154+
link: '/guides/extra-steps/react-native-web'
155+
},
151156
{
152157
text: 'macOS 10.13+',
153158
link: '/guides/extra-steps/macos'
154159
},
155160
{
156-
text: 'Windows 10+',
157-
link: '/guides/extra-steps/windows'
161+
text: 'macOS Catalyst',
162+
link: '/guides/extra-steps/macos-catalyst'
158163
},
159164
{
160-
text: 'React Native Web',
161-
link: '/guides/extra-steps/react-native-web'
165+
text: 'tvOS / Android TV',
166+
link: '/guides/extra-steps/tv'
162167
},
163168
{
164-
text: 'Expo 45+',
165-
link: '/guides/extra-steps/expo'
169+
text: 'Windows 10+',
170+
link: '/guides/extra-steps/windows'
166171
}
167172
]
168173
},

‎.vitepress/theme/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import DefaultTheme from 'vitepress/theme';
2-
import './styles.css';
2+
//import './styles.css';
33

44
export default DefaultTheme;

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# The React-Native-WebRTC Handbook
22

33
Powered by [VitePress](https://vitepress.vuejs.org/).
4-
`Nodejs >= 16 is necessary.`
4+
`Nodejs >= 18 is necessary.`
55
Built automatically with every push thanks to [GH Actions](https://github.com/react-native-webrtc/handbook/blob/master/.github/workflows/gh-pages.yml).
66

77
## Want to build and run our handbook?

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
{
22
"license": "Apache-2.0",
33
"engines": {
4-
"node": ">= 16"
4+
"node": ">= 18"
55
},
66
"scripts": {
77
"start": "vitepress dev",
88
"build": "vitepress build",
99
"serve": "vitepress serve"
1010
},
1111
"devDependencies": {
12-
"vitepress": "1.0.0-beta.5",
12+
"vitepress": "1.0.0-rc.17",
1313
"vue": "^3.3.4"
1414
}
1515
}

‎src/guides/basic-usage.md

+17-5
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ Cycling all of the tracks and stopping them is more than enough to clean up afte
111111
You won't usually need to do this for remote tracks, only local.
112112

113113
```typescript
114-
localMediaStream.getTracks().map(
114+
localMediaStream.getTracks().forEach(
115115
track => track.stop()
116116
);
117117

@@ -147,8 +147,7 @@ peerConnection.addEventListener( 'iceconnectionstatechange', event => {} );
147147
peerConnection.addEventListener( 'icegatheringstatechange', event => {} );
148148
peerConnection.addEventListener( 'negotiationneeded', event => {} );
149149
peerConnection.addEventListener( 'signalingstatechange', event => {} );
150-
peerConnection.addEventListener( 'addstream', event => {} );
151-
peerConnection.addEventListener( 'removestream', event => {} );
150+
peerConnection.addEventListener( 'track', event => {} );
152151
```
153152

154153
## Destroying the Peer Connection
@@ -168,7 +167,9 @@ After using one of the media functions above you can then add the media stream t
168167
The negotiation needed event will be triggered on the peer afterwords.
169168

170169
```typescript
171-
peerConnection.addStream( localMediaStream );
170+
localMediaStream.getTracks().forEach(
171+
track => peerConnection.addTrack( track, localMediaStream );
172+
);
172173
```
173174

174175
## Creating a Data Channel
@@ -263,7 +264,7 @@ try {
263264
const offerDescription = new RTCSessionDescription( offerDescription );
264265
await peerConnection.setRemoteDescription( offerDescription );
265266

266-
const answerDescription = await peerConnection.createAnswer( sessionConstraints );
267+
const answerDescription = await peerConnection.createAnswer();
267268
await peerConnection.setLocalDescription( answerDescription );
268269

269270
// Send the answerDescription back as a response to the offerDescription.
@@ -312,6 +313,17 @@ try {
312313
};
313314
```
314315

316+
## Controlling the Remote Audio Volume
317+
318+
Remote audio tracks are automatically handled and played through your audio output.
319+
The volume of individual tracks can be set with the `_setVolume` function.
320+
It takes in a number between 0 to 10, defaults to 1.
321+
322+
```typescript
323+
const audioTrack = remoteMediaStream.getAudioTracks()[ 0 ];
324+
audioTrack._setVolume( 0.5 );
325+
```
326+
315327
## Rendering the Media Stream
316328

317329
Once you've gained a local and/or remote stream then rendering it is as follows.

‎src/guides/extra-steps/macos-catalyst.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# macOS Catalyst
2+
3+
We don't support `macOS Catalyst` currently.
4+
But there is a PR open over [here](https://github.com/react-native-webrtc/react-native-webrtc/pull/1420) which might help change that.
5+
6+
Anyone interested in helping to get the ball rolling?
7+
We're open to contributions.

‎src/guides/extra-steps/tv.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# tvOS / Android TV
2+
3+
In order to use React Native on tvOS, you will need to use [react-native-tvos](https://www.npmjs.com/package/react-native-tvos).
4+
tvOS support was deprecated and removed from current/future versions of React Native.
5+
We strongly recommend using React Native 0.69+ with React 18+
6+
7+
Change the following dependency in your projects `package.json` file to get started.
8+
```
9+
'react-native': 'npm:[email protected]'
10+
```
11+
12+
## Adjusting the Supported Platform Version
13+
14+
:::warning Make sure you are using CocoaPods 1.10 or higher.
15+
Otherwise you will experience problems.
16+
:::
17+
18+
You may have to change the `platform` field in your podfile.
19+
`react-native-webrtc` doesn't support tvOS < 16.
20+
Set it to '16.0' or above. Older versions of tvOS don't support WebRTC.
21+
22+
```
23+
platform :tvos, '16.0'
24+
```

‎src/guides/getting-a-call-connected.md

+10-6
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ let mediaConstraints = {
3131
};
3232

3333
let localMediaStream;
34+
let remoteMediaStream;
3435
let isVoiceOnly = false;
3536

3637
try {
@@ -121,14 +122,17 @@ peerConnection.addEventListener( 'signalingstatechange', event => {
121122
break;
122123
};
123124
} );
124-
125-
peerConnection.addEventListener( 'addstream', event => {
126-
// Grab the remote stream from the connected participant.
127-
remoteMediaStream = event.stream;
125+
126+
peerConnection.addEventListener( 'track', event => {
127+
// Grab the remote track from the connected participant.
128+
remoteMediaStream = remoteMediaStream || new MediaStream();
129+
remoteMediaStream.addTrack( event.track, remoteMediaStream );
128130
} );
129131

130132
// Add our stream to the peer connection.
131-
peerConnection.addStream( localMediaStream );
133+
localMediaStream.getTracks().forEach(
134+
track => peerConnection.addTrack( track, localMediaStream );
135+
);
132136
```
133137

134138
## Step 3 - Signal that you're starting a call
@@ -215,7 +219,7 @@ try {
215219
const offerDescription = new RTCSessionDescription( offerDescription );
216220
await peerConnection.setRemoteDescription( offerDescription );
217221

218-
const answerDescription = await peerConnection.createAnswer( sessionConstraints );
222+
const answerDescription = await peerConnection.createAnswer();
219223
await peerConnection.setLocalDescription( answerDescription );
220224

221225
// Here is a good place to process candidates.

‎src/guides/intro/supported-features.md

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
# Supported Features
22

3-
| Feature | Android | iOS | macOS* | Windows* | Web* | Expo* |
4-
| :------- | :-------: | :---: | :-----: | :-------: | :------: | :----: |
5-
| Audio/Video | :heavy_check_mark: | :heavy_check_mark: | - | - | :heavy_check_mark: | :heavy_check_mark: |
6-
| Data Channels | :heavy_check_mark: | :heavy_check_mark: | - | - | :heavy_check_mark: | :heavy_check_mark: |
7-
| Screen Capture* | :heavy_check_mark: | :heavy_check_mark: | - | - | :heavy_check_mark: | :heavy_check_mark: |
8-
| Plan B | - | - | - | - | - | - |
9-
| Unified Plan* | :heavy_check_mark: | :heavy_check_mark: | - | - | :heavy_check_mark: | :heavy_check_mark: |
10-
| Simulcast* | :heavy_check_mark: | :heavy_check_mark: | - | - | :heavy_check_mark: | :heavy_check_mark: |
3+
| | Android | iOS | tvOS | macOS* | Windows* | Web* | Expo* |
4+
| :- | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
5+
| Audio/Video | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | - | - | :heavy_check_mark: | :heavy_check_mark: |
6+
| Data Channels | :heavy_check_mark: | :heavy_check_mark: | - | - | - | :heavy_check_mark: | :heavy_check_mark: |
7+
| Screen Capture | :heavy_check_mark: | :heavy_check_mark: | - | - | - | :heavy_check_mark: | :heavy_check_mark: |
8+
| Plan B | - | - | - | - | - | - | - |
9+
| Unified Plan* | :heavy_check_mark: | :heavy_check_mark: | - | - | - | :heavy_check_mark: | :heavy_check_mark: |
10+
| Simulcast* | :heavy_check_mark: | :heavy_check_mark: | - | - | - | :heavy_check_mark: | :heavy_check_mark: |
11+
12+
## TODO
13+
Instead of this write something, highlight the vast supported features on what platforms and also the unsupported stuff.
14+
##
1115

1216
:::warning Screen Capturing requires extra setup.
1317
Make sure to follow the extra steps for Android and iOS or you will get blank streams.

‎src/index.md

+27-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ hero:
99
text:
1010
tagline: The WebRTC module for React Native
1111
image:
12-
src: /undraw_video_call_re_4p26_modified.svg
12+
src: /logo.svg
1313
alt: React Native WebRTC
1414
actions:
1515
- theme: brand
@@ -30,3 +30,29 @@ features:
3030
title: Stable and Standardized
3131
details:
3232
---
33+
<style>
34+
:root {
35+
--vp-home-hero-name-color: transparent;
36+
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
37+
38+
--vp-home-hero-image-background-image:
39+
linear-gradient(0deg, rgba(37,153,57,.8), transparent 70%),
40+
linear-gradient(90deg, rgba(249,102,3,.8), transparent 70%),
41+
linear-gradient(180deg, rgba(35,136,204,.8), transparent 70%),
42+
linear-gradient(270deg, rgba(191,0,0,.8), transparent 70%),
43+
linear-gradient(360deg, rgba(252,204,3,.8), transparent 70%);
44+
--vp-home-hero-image-filter: blur(40px);
45+
}
46+
47+
@media (min-width: 640px) {
48+
:root {
49+
--vp-home-hero-image-filter: blur(56px);
50+
}
51+
}
52+
53+
@media (min-width: 960px) {
54+
:root {
55+
--vp-home-hero-image-filter: blur(72px);
56+
}
57+
}
58+
</style>

0 commit comments

Comments
 (0)