@applooma/rtc-react-native

Real-time voice, video, live streaming and audio rooms for React Native, by AppLooma LLC.

Full documentation: https://docs.applooma.dev/sdk/react-native

Install

npm install @applooma/rtc-react-native @applooma/rtc-native-core @applooma/rtc-native-webrtc
cd ios && pod install

All three are needed. React Native's autolinking only looks at your app's own dependencies and never at what those depend on, so the two native packages have to be installed by name — listing them as dependencies of the SDK would leave them unlinked. Rebuild the app afterwards; reloading the JavaScript bundle is not enough.

React Native 0.73 or newer and React 18 or newer are peer dependencies.

One call in each native project

The audio engine is set up before React Native starts, so it is initialised from the host application rather than from JavaScript. Put the call above any other React Native initialisation.

Android — MainApplication.kt:

import com.applooma.rtc.reactnative.AppLoomaRtc
import com.applooma.rtc.reactnative.audio.AudioType

class MainApplication : Application(), ReactApplication {
  override fun onCreate() {
    AppLoomaRtc.setup(this, AudioType.CommunicationAudioType())
    super.onCreate()
  }
}

iOS — AppDelegate.swift:

import applooma_rtc_native_core

AppLoomaRtc.setup()

Permissions

Info.plist needs NSCameraUsageDescription and NSMicrophoneUsageDescription; without them the app terminates the first time it opens a device. AndroidManifest.xml needs CAMERA, RECORD_AUDIO, INTERNET and MODIFY_AUDIO_SETTINGS, and Android 6 and later also require requesting camera and microphone at runtime before joining.

On Android 12 and above add BLUETOOTH_CONNECT and request it together with the microphone, or audio never reaches a Bluetooth headset (a refusal is harmless). On iOS enable the Audio, AirPlay, and Picture in Picture background mode to keep a call running in the background.

Quickstart

Tokens come from your server. Your API secret must never ship inside an app — anyone who extracts it can issue unlimited tokens on your account.

import { initAppLooma, useAppEngine, AppVideoView } from '@applooma/rtc-react-native';

initAppLooma(); // once, at the top of your entry file

function Call() {
  const { engine, remoteUsers, join } = useAppEngine({ appId: 'YOUR_APP_ID' });

  useEffect(() => {
    // Your own endpoint, which calls POST https://api.applooma.dev/v1/token
    // server-side with your API key and secret.
    fetchToken('lobby').then((s) => join(s.token, s.wsUrl, { role: 'host', camera: true }));
  }, [join]);

  return (
    <>
      <AppVideoView engine={engine} local style={{ flex: 1 }} />
      {remoteUsers.map((user) => (
        <AppVideoView key={user.uid} user={user} style={{ flex: 1 }} />
      ))}
    </>
  );
}

Video quality

1080p at 4 Mbps by default (720p at 2.2 Mbps, 1440p preset at 5 Mbps). Choose what the encoder gives up first with degradation, cap it with maxBitrate, and watch video-quality-changed. codec: 'auto' is chosen per phone so a published camera always carries frames; 'h265' and 'av1' are used where the phone has an encoder.

const engine = AppEngine.create({
  appId: 'YOUR_APP_ID',
  video: { height: 1080, fps: 30, maxBitrate: 4_000_000, degradation: 'keep-resolution' },
});

Roles

The role is fixed by the token your server issues, not by the client.

| Role | Publish | Subscribe | Administer the channel | |---|---|---|---| | host | yes | yes | yes | | cohost | yes | yes | no | | audience | no | yes | no |

Use audience for viewers of a live stream. An audience token cannot publish, which is what keeps a large broadcast cheap and stable.

Support

• Documentation — https://docs.applooma.dev
• Email — [email protected]

Licence

MIT. See LICENSE.