Ninchat-jitsi-meet-rnsdk NPM

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.

Installation

Install the SDK:

npm i ninchat-jitsi-meet-rnsdk

Installing the package will add a postinstall script in the host package.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 from ninchat-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: