React Native WebRTC Module

Common errors

• Error: Permission denied

  cause The application lacks necessary camera or microphone permissions for Android or iOS.
  fix On Android, request `PermissionsAndroid.PERMISSIONS.CAMERA` and `PermissionsAndroid.PERMISSIONS.RECORD_AUDIO`. On iOS, ensure `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` are present in `Info.plist`.

• TypeError: Cannot read property 'getUserMedia' of undefined

  cause The `mediaDevices` object was not correctly imported or the native module for WebRTC is not properly linked/initialized, preventing access to media devices.
  fix Ensure `import { mediaDevices } from 'react-native-webrtc';` is present. Verify that you have run `npx react-native link` (if applicable) and followed all platform-specific native installation steps.

• Invariant Violation: requireNativeComponent: 'RTCVideoView' was not found in the UIManager.

  cause The native component `RTCView` (internally `RTCVideoView` in some contexts) is not correctly linked or registered with the React Native bridge.
  fix Confirm that you have completed all native installation steps for both Android and iOS, including running `pod install` for iOS and rebuilding your Android project after installing the package.

Warnings

• breaking As of version 106.0.0, 'react-native-webrtc' exclusively supports the Unified Plan. Applications relying on the older Plan B must either migrate to Unified Plan or remain on a version prior to 106.0.0.
  Fix: Refactor WebRTC signaling and session description handling to comply with Unified Plan specifications. Consult the WebRTC documentation for migration guides.
• breaking UVC camera support for Android was explicitly dropped in version 118.0.5. Devices using UVC cameras will no longer be compatible.
  Fix: Developers targeting Android devices with external cameras should verify compatibility or implement alternative camera handling if UVC is critical, potentially by staying on an older version or contributing a new implementation.
• gotcha The `minSdkVersion` set by your app may conflict with the library's internal `minSdkVersion` handling on Android, potentially leading to build issues or unexpected behavior. Version 124.0.5 includes changes to address this by not using the app's `minSdkVersion`.
  Fix: Upgrade to version 124.0.5 or newer. If issues persist, ensure your `android/app/build.gradle` `minSdkVersion` is aligned with React Native's recommendations and any specific library requirements.
• gotcha For iOS compatibility with React Native versions 0.73 and above, you must use `react-native-webrtc` version 124.0.3 or higher. Older versions may lead to build errors or runtime instability.
  Fix: Update `react-native-webrtc` to version 124.0.3 or later to ensure compatibility with React Native 0.73+ on iOS.
• gotcha As a native module, `react-native-webrtc` requires proper linking of native components (e.g., for `RTCView`) on bare React Native projects. Skipping this step often results in runtime errors.
  Fix: Follow the platform-specific installation guides (Android, iOS) in the documentation to ensure all native modules are correctly linked and permissions are configured. For Expo, use `expo-dev-client` and the `config-plugins/react-native-webrtc` package.

Install

• npm install react-native-webrtc npm
• yarn add react-native-webrtc yarn
• pnpm add react-native-webrtc pnpm

Imports

• RTCPeerConnection
  wrong:

  const RTCPeerConnection = require('react-native-webrtc').RTCPeerConnection;

  correct:

  import { RTCPeerConnection } from 'react-native-webrtc';

  Use ES module imports; CommonJS 'require' is not the standard or recommended approach for this library, especially with TypeScript.
• mediaDevices
  wrong:

  import mediaDevices from 'react-native-webrtc';

  correct:

  import { mediaDevices } from 'react-native-webrtc';

  mediaDevices is a named export, not the default export.
• RTCView
  wrong:

  import RTCVideoView from 'react-native-webrtc';

  correct:

  import { RTCView } from 'react-native-webrtc';

  The correct component name for video rendering is RTCView. Ensure native modules are properly linked for this component to render.

Quickstart

Demonstrates how to obtain local audio/video media, initialize an RTCPeerConnection, and display the local video stream using RTCView, including basic Android permission handling.

import React, { useEffect, useRef, useState } from 'react';
import { View, Text, Button, Platform, PermissionsAndroid, Alert } from 'react-native';
import {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  mediaDevices,
} from 'react-native-webrtc';

const configuration = { iceServers: [{ url: 'stun:stun.l.google.com:19302' }] };

export default function App() {
  const [localStream, setLocalStream] = useState<any>(null);
  const pc = useRef<RTCPeerConnection | null>(null);

  useEffect(() => {
    (async () => {
      if (Platform.OS === 'android') {
        await PermissionsAndroid.requestMultiple([
          PermissionsAndroid.PERMISSIONS.CAMERA,
          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
        ]);
      }

      try {
        const stream = await mediaDevices.getUserMedia({
          audio: true,
          video: {
            mandatory: {
              minWidth: '500',
              minHeight: '300',
              minFrameRate: '30',
            },
            facingMode: 'user',
          },
        });
        setLocalStream(stream);

        pc.current = new RTCPeerConnection(configuration);
        pc.current.addStream(stream);

        pc.current.onicecandidate = (event) => {
          if (event.candidate) {
            console.log('ICE Candidate:', event.candidate);
            // In a real app, you would send this candidate to the remote peer
          }
        };

        const offer = await pc.current.createOffer();
        await pc.current.setLocalDescription(offer);
        console.log('Local Offer:', offer.sdp);
        // In a real app, you would send this offer to the remote peer
      } catch (err: any) {
        Alert.alert('Media Error', err.message);
      }
    })();

    return () => {
      if (localStream) {
        localStream.release();
      }
      if (pc.current) {
        pc.current.close();
      }
    };
  }, []);

  if (!localStream) {
    return <Text>Loading local media...</Text>;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Local Stream:</Text>
      <RTCView streamURL={localStream.toURL()} style={{ width: 300, height: 200, backgroundColor: 'black' }} />
      <Button title="Start Call (logic incomplete)" onPress={() => Alert.alert('Simulated Call', 'Offer sent (check console)')} />
    </View>
  );
}