@dell-emc/react-native-meeting-sdk v0.0.60

React Native Meeting SDK

A simple few steps to integrate our React Native SDK and enjoy the seamless meetings in your app.

Installation

Install @dell-emc/react-native-meeting-sdk with npm

  1. Run => npm i @dell-emc/react-native-meeting-sdk

  2. Dependency conflicts may occur between RNSDK and your app.
     If that is the case, please run npm i @dell-emc/react-native-meeting-sdk --force.

  3. add this script to your package.json scripts =>
  "update-deps": "node node_modules/@dell-emc/react-native-meeting-sdk/update_dependencies.js"

  4.To check if some dependencies need to be added, please run the following script 
  => npm run update-deps.
  
  This will sync all of our peer dependencies with your dependencies.
  Next you will need to do npm install.

A few more steps...

• For Android, In android/app/src/debug/AndroidManifest.xml and android/app/src/main/AndroidManifest.xml, under the tag, please include:

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.MANAGE_OWN_CALLS" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA" android:minSdkVersion="34"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE" android:minSdkVersion="34" />
    <uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
    <uses-permission android:name="android.permission.BIND_TELECOM_CONNECTION_SERVICE"/>
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" />
    <uses-permission android:name="android.permission.CALL_PHONE" />

    <application>
         // ... 
         <intent-filter>
           <action android:name="android.intent.action.SEND" />
           <action android:name="android.intent.action.SEND_MULTIPLE" />
           <category android:name="android.intent.category.DEFAULT" />
           <data android:mimeType="image/*" />
           <data android:mimeType="video/*" />
           <data android:mimeType="audio/*" />
           <data android:mimeType="application/*" /> 
           <data android:mimeType="text/plain" />
           <!-- Add the mime types you want to support -->
         </intent-filter>
        // ...
        <service android:name="io.wazo.callkeep.VoiceConnectionService" android:exported="true" android:label="Wazo" android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE" android:foregroundServiceType="camera|microphone">
            <intent-filter>
                <action android:name="android.telecom.ConnectionService" />
            </intent-filter>
        </service>
    
        <service android:name="io.wazo.callkeep.RNCallKeepBackgroundMessagingService" />
        // ....
    </application>

• For IOS add these lines to your AppDelegate.mm file

#import "RNCallKeep.h"
#import <WebRTC/RTCAudioSession.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
....

  RTCAudioSession *session = [RTCAudioSession sharedInstance];
  session.useManualAudio = true;
  session.isAudioEnabled = false;

....
}

- (BOOL)application:(UIApplication *)application
 continueUserActivity:(NSUserActivity *)userActivity
   restorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullable restorableObjects))restorationHandler
 {
   return [RNCallKeep application:application
            continueUserActivity:userActivity
              restorationHandler:restorationHandler];
 }

• For IOS, SDK requests camera and microphone access, make sure to include the required entries for NSCameraUsageDescription and NSMicrophoneUsageDescriptionin your Info.plist file.

  <key>NSCameraUsageDescription</key>
  <string>ADD APROPRIATE DESCRIPTION</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>ADD APROPRIATE DESCRIPTION</string>

• Allow voip background on IOS.

  Open Info.plist file and add voip in UIBackgroundModes.

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

• For Android,For icons to work, you should add these lines to app/build.gradle

project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf', 'AntDesign.ttf', 'Entypo.ttf',  'Feather.ttf', 'FontAwesome.ttf', 'FontAwesome5_Brands.ttf', 'FontAwesome5_Regular.ttf', 'FontAwesome5_Solid.ttf', 'Foundation.ttf', 'Ionicons.ttf', 'MaterialCommunityIcons.ttf', 'SimpleLineIcons.ttf', 'Octicons.ttf', 'Zocial.ttf' ]
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

• For Android,For GIF to work, you should add these lines to app/build.gradle under dependencies

 // For animated gif support
    implementation 'com.facebook.fresco:animated-gif:3.1.3'

    

    // For webp support
    implementation 'com.facebook.fresco:animated-webp:3.1.3'
    implementation 'com.facebook.fresco:webpsupport:3.1.3'
    // Animated webp support
    implementation 'com.facebook.fresco:webpsupport:3.1.3'
  


* For IOS, for icons to work. Edit Info.plist and add a property called Fonts provided by application

List of all available fonts to copy & paste in Info.plist UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf FontAwesome6_Brands.ttf FontAwesome6_Regular.ttf FontAwesome6_Solid.ttf Foundation.ttf Ionicons.ttf MaterialIcons.ttf MaterialCommunityIcons.ttf SimpleLineIcons.ttf Octicons.ttf Zocial.ttf Fontisto.ttf

* For IOS, for permissions to work. Edit Info.plist and add below property

For Expo sdk > 50

• React Native uses event-target-shim@5 which is not compatible with react-native-webrtc's dependency on event-target-shim@6. To fix this, you may need to add a redirection in your metro.config.js file:

// metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
const resolveFrom = require("resolve-from");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (
    // If the bundle is resolving "event-target-shim" from a module that is part of "react-native-webrtc".
    moduleName.startsWith("event-target-shim") &&
    context.originModulePath.includes("react-native-webrtc")
  ) {
    // Resolve event-target-shim relative to the react-native-webrtc package to use v6.
    // React Native requires v5 which is not compatible with react-native-webrtc.
    const eventTargetShimPath = resolveFrom(
      context.originModulePath,
      moduleName
    );

    return {
      filePath: eventTargetShimPath,
      type: "sourceFile",
    };
  }

  // Ensure you call the default resolver.
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

Potential issues

• React-native-reanimated failed to create a worklet :https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting/#failed-to-create-a-worklet

• For socket connection, you may need to pass socketPath. check the link https://socket.io/docs/v4/client-options/#path

• You might face an issue related to setup-permission from react-native-permissions. refer to this link please https://github.com/zoontek/react-native-permissions?tab=readme-ov-file#ios

Listening to Meeting Events

Events supported :

• onConferenceWillJoin : If the meeting is loading
• onAudioMutedChanged : If mic muted
• onVideoMutedChanged :If video muted
• onConferenceJoined : When the user joined
• onParticipantJoined : When meeting participant joined
• onConferenceLeft : When user left the meeting
• onParticipantLeft : When meeting participant left
• onReadyToClose : after hangup the meeting

Dynamic Actions in MeetingSDK

The dynamicActions feature in the MeetingSDK allows users to define and include custom actions within the meeting environment. These actions can be triggered by users during the meeting session, providing additional functionality and interactivity.

Usage:

The dynamicActions property is passed to the MeetingSDK component as an array of action objects. Each action object contains the following properties:

• text: A string representing the label or text associated with the action.

• iconProps: An object specifying the properties of the icon to be displayed alongside the action text. This object includes:

  • type: The type of icon library to be used ('fontisto' | 'material' | 'evil' | 'feather' | 'ant' | 'simpleLine' | 'zocial' | 'foundation' | 'fa5' | 'fa' | 'ionicon' | 'materialCommunity' | 'entypo' | 'octicon').
  • name: The name or identifier of the icon within the specified icon library (check react-native-vector-icons).
  • color (optional): The color of the icon.

• onClick: A function that defines the behavior to be executed when the action is triggered. This function should handle the desired functionality or interaction associated with the action.

Theme (optional):

Allowed theme props are:

• Note: you can provide all colors or only a few of them.

Functions:

End Meeting

Usage

Import endMeeting from @dell-emc/react-native-meeting-sdk in your code:

import { endMeeting } from "@dell-emc/react-native-meeting-sdk";

When you're ready to end your meeting, simply call endMeeting()

How It Works

EndCall triggers the necessary functionality to gracefully end your meeting, handling tasks such as disconnecting from the meeting, cleaning up resources, and notifying other participants.

Usage/Examples

import {MeetingSDK , endMeeting} from '@dell-emc/react-native-meeting-sdk';

function App() {
  
  const accountId = "ACCOUNT ID";
  const serverURL = "SERVER URL";
  const jwtToken = "MEETING TOKEN";
  const socketDomain = "https://example.com";
  /*Optional: socket path is the name of the path that is captured on the server side.*/
  const socketPath = "/my-custom-path/socket.io/"

  const onReadyToClose= () => {
    console.log("Room Closed");
  }

  const eventListeners = {
    onReadyToClose :onReadyToClose
  };


   const handleAction=()=>{
    console.log("handle dynamic action click")
  }
  const dynamicActions : IDynamicActions [] = [
    {
      text :"Test dynamic action",
      iconProps :{type :'material' , name :'sos' , color :'white'},
      onClick : handleAction
    }
  ]

  const endMeeting = () => {
    endMeeting()
  }

  return ( 
    <MeetingSDK
      appName={appName}
      serverURL={serverURL}
      socketURL={socketURL}
      accountId={accountId}
      jwtToken={jwtToken}
      /*please create your own gifApiKey for your app  ....https://developers.giphy.com/dashboard/ 
        if you not send gifApiKey  gif on chat  will be disable */
      gifApiKey={gifApiKey} 
      eventListeners={eventListeners}
      dynamicActions={dynamicActions}
      locale={"en"} // "en", "ar"
      themeMode={"light"} // "light", "dark"
      theme={{ // default colors will be used if theme is not provided
        dark:{
          primaryColor:"#232323",
          secondaryColor: "#b5986b",
          accentColor:"#141414",
          primaryTextColor: "#ffffff",
          secondaryTextColor: "#ffffff",
        },
        light:{
          primaryColor:"#eeeeee",
          secondaryColor: "#b5986b",
          accentColor:"#d1d1d1",
          primaryTextColor: "#000000",
          secondaryTextColor: "#ffffff",
        }
      }}
    />
  );
}