@squer/react-native-jitsi

Squer React Native Jitsi module

Installation

npm install @squer/react-native-jitsi --save

Usage (>=v1.0.5)

JitsiMeetView - import {JitsiMeetView} from '@squer/react-native-jitsi';

      <JitsiMeetView
        onConferenceTerminated={conferenceTerminatedCallback}
        onConferenceJoined={conferenceJoinedCallback}
        onConferenceWillJoin={conferenceWillJoinCallback}
      />

JitsiApi - import JitsiApi from '@squer/react-native-jitsi';

• videoCall
• audioCall
• endCall
• setAudioMuted
• setVideoMuted

The following component is an example of use:

import React, {useEffect} from 'react';
import {StyleSheet, View} from 'react-native';
import JitsiApi, {JitsiMeetView} from '@squer/react-native-jitsi';

const JitsiMeeting = () => {
  useEffect(() => {
    setTimeout(() => {
      const url = 'https://meet-ionos.seahagen.in/test'; // can also be only room name and will connect to jitsi meet servers
      const userInfo = {
        displayName: 'User',
        email: '[e-mail]',
        avatar: 'https:/gravatar.com/avatar/abc123',
      };
      JitsiApi.videoCall(url, userInfo);
      /* You can also use JitsiApi.audioCall(url) for audio only call */
      /* You can programmatically end the call with JitsiApi.endCall() */
    }, 1000);
  }, []);

  const conferenceTerminated = nativeEvent => {
    /* Conference terminated event */
    console.log('conferenceTerminated callback');
  };

  const conferenceJoined = nativeEvent => {
    /* Conference joined event */
    console.log('conferenceJoined callback');
  };

  const conferenceWillJoin = nativeEvent => {
    /* Conference will join event */
    console.log('conferenceWillJoin callback');
  };

  return (
    <View style={styles.container}>
      <JitsiMeetView
        onConferenceTerminated={conferenceTerminated}
        onConferenceJoined={conferenceJoined}
        onConferenceWillJoin={conferenceWillJoin}
        style={styles.box}
      />
    </View>
  );
};

export default JitsiMeeting;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    flex: 1,
    height: '100%',
    width: '100%',
  },
});

You can also check the Example

Events

You can add listeners for the following events:

• onConferenceJoined
• onConferenceTerminated
• onConferenceWillJoin

iOS Configuration

1. Navigate to <ProjectFolder>/ios/<ProjectName>/
2. edit Info.plist and add the following lines

<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone Permission</string>

3. in Info.plist, make sure that

<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
  <string>voip</string>
</array>

4. The SDK shows and hides the status bar based on the conference state, you may want to set UIViewControllerBasedStatusBarAppearance to NO in your Info.plist file. (Jitsi iOS SDK doc)

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

5. Modify your Podfile to have platform :ios, '11.0' and execute pod install

Jitsi iOS SDK version 3.7.0

Android Configuration

TODO

1. User react-native version [0.63.4]

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Inspired by skrafft/react-native-jitsi-meet