2022-08-03 14:58:51 +02:00
|
|
|
# <p align="center">Jitsi Meet React Native SDK</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Installation
|
2023-07-19 15:45:09 +03:00
|
|
|
Inside your project, run;
|
|
|
|
|
```console
|
|
|
|
|
npm i @jitsi/react-native-sdk
|
|
|
|
|
```
|
|
|
|
|
<br/><br/>Additionally, if not already installed, some dependencies will need to be added.
|
2023-07-11 11:42:10 +03:00
|
|
|
|
|
|
|
|
This can be done by running the following script:
|
2023-07-19 15:45:09 +03:00
|
|
|
```console
|
2023-07-18 11:18:45 +02:00
|
|
|
node node_modules/@jitsi/react-native-sdk/update_dependencies.js
|
2023-07-11 11:42:10 +03:00
|
|
|
```
|
|
|
|
|
This will check and update all your dependencies.<br/><br/>
|
|
|
|
|
|
2022-08-03 14:58:51 +02:00
|
|
|
[comment]: # (These deps definitely need to be added manually, more could be neccesary)
|
|
|
|
|
|
2023-07-11 11:42:10 +03:00
|
|
|
Because of SVG use in react native, you need to update metro.config your project's file:
|
|
|
|
|
|
2023-07-19 15:45:09 +03:00
|
|
|
```javascript
|
2023-07-11 11:42:10 +03:00
|
|
|
const { getDefaultConfig } = require('metro-config');
|
|
|
|
|
|
|
|
|
|
module.exports = (async () => {
|
|
|
|
|
const {
|
|
|
|
|
resolver: {
|
|
|
|
|
sourceExts,
|
|
|
|
|
assetExts
|
|
|
|
|
}
|
|
|
|
|
} = await getDefaultConfig();
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
transformer: {
|
|
|
|
|
babelTransformerPath: require.resolve('react-native-svg-transformer'),
|
|
|
|
|
getTransformOptions: async () => ({
|
|
|
|
|
transform: {
|
|
|
|
|
experimentalImportSupport: false,
|
|
|
|
|
inlineRequires: true,
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
resolver: {
|
|
|
|
|
assetExts: assetExts.filter(ext => ext !== 'svg'),
|
|
|
|
|
sourceExts: [...sourceExts, 'svg']
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})();
|
|
|
|
|
```
|
|
|
|
|
|
2022-08-03 14:58:51 +02:00
|
|
|
### iOS
|
|
|
|
|
|
|
|
|
|
#### Project Info.plist
|
|
|
|
|
- Add a *Privacy - Camera Usage Description*
|
|
|
|
|
- Add a *Privacy - Microphone Usage Description*
|
|
|
|
|
|
|
|
|
|
#### General
|
|
|
|
|
- Signing & capabilites:
|
|
|
|
|
- Add Background modes
|
|
|
|
|
- Audio
|
|
|
|
|
- Voice over IP
|
|
|
|
|
- Background fetch
|
|
|
|
|
|
2023-07-19 15:45:09 +03:00
|
|
|
Run;
|
|
|
|
|
```console
|
|
|
|
|
cd ios && pod install && cd ..
|
|
|
|
|
```
|
2022-08-03 14:58:51 +02:00
|
|
|
|
|
|
|
|
### Android
|
|
|
|
|
|
|
|
|
|
- In your build.gradle have at least `minSdkVersion = 24`
|
2023-07-11 11:42:10 +03:00
|
|
|
- In `android/app/src/debug/AndroidManifest.xml` and `android/app/src/main/AndroidManifest.xml`, under the `</application>` tag, include
|
2023-07-19 15:45:09 +03:00
|
|
|
```xml
|
2022-08-03 14:58:51 +02:00
|
|
|
<uses-permission android:name="android.permission.RECORD_AUDIO" />
|
|
|
|
|
<uses-permission android:name="android.permission.CAMERA" />
|
|
|
|
|
```
|
|
|
|
|
|
2023-07-18 19:18:32 +03:00
|
|
|
If you want to test all the steps before applying them to your app, you can check our React Native SDK sample app here:
|
|
|
|
|
https://github.com/jitsi/jitsi-meet-sdk-samples/tree/master/react-native
|
2023-07-19 15:45:09 +03:00
|
|
|
|
2023-07-19 14:48:18 +03:00
|
|
|
|
|
|
|
|
### Using JWT tokens
|
|
|
|
|
- If you are planning to use tokens you can update your domain and room name inside meeting options.
|
|
|
|
|
- For example:
|
2023-07-19 15:45:09 +03:00
|
|
|
```javascript
|
2023-07-19 14:48:18 +03:00
|
|
|
const meetingOptions = {
|
|
|
|
|
domain: 'YOUR_DOMAIN',
|
|
|
|
|
roomName: 'ROOM_NAME?jwt=JWT_TOKEN'
|
|
|
|
|
}
|
|
|
|
|
```
|