ninchat-jitsi-meet-rnsdk
v0.7.3
Published
React Native SDK for Ninchat Jitsi Meet.
Downloads
7
Readme
Ninchat Jitsi Meet React Native SDK
Ninchat Jitsi Meet React Native SDK allows us to integrate Jitsi Meet video conferencing capabilities into React Native applications. This document provides step-by-step instructions for installation and integration.
Table of Contents
Installation
- Install the SDK:
npm i ninchat-jitsi-meet-rnsdk
- Installing the package will add a
postinstall
script in the hostpackage.json
. This script will install the SDK's dependencies and link the native modules. To run the script, execute the following command:
npm run postinstall
Metro Bundler Configurations
Because of SVG use in react native, we need to update metro.config of our project's file:
const {getDefaultConfig} = require('metro-config');
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig();
return {
server: {
rewriteRequestUrl: url => {
if (!url.endsWith('.bundle')) {
return url;
}
// https://github.com/facebook/react-native/issues/36794
// JavaScriptCore strips query strings, so try to re-add them with a best guess.
return (
url +
'?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true'
);
}, // ...
},
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']
}
}
})();
Platform Specific Configurations
iOS
Update Project Info.plist:
- Camera Permission: Add a Privacy - Camera Usage Description to explain why our app uses the camera.
- Microphone Permission: Add a Privacy - Microphone Usage Description to explain why our app uses the microphone.
<key>NSCameraUsageDescription</key>
<string>Cam</string>
<key>NSMicrophoneUsageDescription</key>
<string>Mic</string>
<key>UIBackgroundModes</key>
<array>
<string>audio</string>
<string>fetch</string>
<string>voip</string>
</array>
Update Podfile:
The SDK require minimum iOS version 12.4
Minimum iOS version:
platform :ios, '12.4'
We also need to update the podspec after installing the npm package:
cd ios && pod install && cd ..
Android
Update build.gradle:
SDK require minimum api level 24. So, ensure our project has the following minimum SDK version:
minSdkVersion 24
Update AndroidManifest.xml:
Add the following permissions under the </application>
tag:
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
Integration
To integrate the Jitsi Meet functionality in our app:
- Import
JitsiMeeting
fromninchat-jitsi-meet-rnsdk
.
import {JitsiMeeting} from 'ninchat-jitsi-meet-rnsdk';
- Add the
JitsiMeeting
view component to our app's UI:
// sdk specific code starts ...
const jitsiMeeting = useRef(null);
const close = () => {
jitsiMeeting.current.close()
}
const muteAudio = () => {
jitsiMeeting.current.setAudioMuted(true)
}
const meetingOptions = {
onReadyToClose: () => {
console.log('ready to close')
// some additional actions like hide or show the jitsi view
},
};
<JitsiMeeting
meetingOptions={meetingOptions}
style={{width: 390, height: 444}}
ref={jitsiMeeting}
/>
Usage
meetingOptions: An object that can have multiple properties.
onReadyToClose
: A callback function that gets triggered when the conference is about to end. Useful for hiding the view or performing other cleanup operations.- More callback options will be added in future versions.
style: Define the appearance of the Jitsi Meeting view. For instance,
{{width: 390, height: 444}}
sets a fixed size for the view.ref: This allows you to get the instance of the
JitsiMeeting
view. With this instance, we can execute various methods available: