### Install react-native-twilio-video-webrtc

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Installs the react-native-twilio-video-webrtc package using npm or yarn and sets up CocoaPods dependencies for iOS.

```bash
# Install with yarn
yarn add react-native-twilio-video-webrtc

# Or with npm
npm install react-native-twilio-video-webrtc

# For iOS, install CocoaPods dependencies
cd ios && pod install
```

--------------------------------

### Registering the Example Component in React Native

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

This code snippet demonstrates how to register the main example component for the React Native application using AppRegistry. It's a standard way to bootstrap a React Native app.

```javascript
AppRegistry.registerComponent("Example", () => Example);
```

--------------------------------

### Install Node Package with npm

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Installs the react-native-twilio-video-webrtc package using the npm package manager. This is an alternative to Yarn for adding the library to your project.

```shell
npm install react-native-twilio-video-webrtc
```

--------------------------------

### Install Node Package with Yarn

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Installs the react-native-twilio-video-webrtc package using the Yarn package manager. This is a prerequisite for using the library in a React Native project.

```shell
yarn add react-native-twilio-video-webrtc
```

--------------------------------

### Complete React Native Twilio Video Call Example

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

A full example demonstrating how to use Twilio Video in a React Native application. It covers connecting to a room, managing participant video tracks, and controlling audio/video.

```javascript
import React, { Component, useRef } from "react";
import {
  TwilioVideoLocalView,
  TwilioVideoParticipantView,
  TwilioVideo,
} from "react-native-twilio-video-webrtc";

const Example = (props) => {
  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
  const [status, setStatus] = useState("disconnected");
  const [participants, setParticipants] = useState(new Map());
  const [videoTracks, setVideoTracks] = useState(new Map());
  const [token, setToken] = useState("");
  const twilioRef = useRef(null);

  const _onConnectButtonPress = () => {
    twilioRef.current.connect({ accessToken: token });
    setStatus("connecting");
  };

  const _onEndButtonPress = () => {
    twilioRef.current.disconnect();
  };

  const _onMuteButtonPress = () => {
    twilioRef.current
      .setLocalAudioEnabled(!isAudioEnabled)
      .then((isEnabled) => setIsAudioEnabled(isEnabled));
  };

  const _onFlipButtonPress = () => {
    twilioRef.current.flipCamera();
  };

  const _onRoomDidConnect = ({ roomName, error }) => {
    console.log("onRoomDidConnect: ", roomName);

    setStatus("connected");
  };

  const _onRoomDidDisconnect = ({ roomName, error }) => {
    console.log("[Disconnect]ERROR: ", error);

    setStatus("disconnected");
  };

  const _onRoomDidFailToConnect = (error) => {
    console.log("[FailToConnect]ERROR: ", error);

    setStatus("disconnected");
  };

  const _onParticipantAddedVideoTrack = ({ participant, track }) => {
    console.log("onParticipantAddedVideoTrack: ", participant, track);

    setVideoTracks((originalVideoTracks) => {
      originalVideoTracks.set(track.trackSid, {
        participantSid: participant.sid,
        videoTrackSid: track.trackSid,
      });
      return new Map(originalVideoTracks);
    });
  };

  const _onParticipantRemovedVideoTrack = ({ participant, track }) => {
    console.log("onParticipantRemovedVideoTrack: ", participant, track);

    setVideoTracks((originalVideoTracks) => {
      originalVideoTracks.delete(track.trackSid);
      return new Map(originalVideoTracks);
    });
  };

  return (
    <View style={styles.container}>
      {status === "disconnected" && (
        <View>
          <Text style={styles.welcome}>React Native Twilio Video</Text>
          <TextInput
            style={styles.input}
            autoCapitalize="none"
            value={token}
            onChangeText={(text) => setToken(text)}
          ></TextInput>
          <Button
            title="Connect"
            style={styles.button}
            onPress={_onConnectButtonPress}
          ></Button>
        </View>
      )}

      {(status === "connected" || status === "connecting") && (
        <View style={styles.callContainer}>
          {status === "connected" && (
            <View style={styles.remoteGrid}>
              {Array.from(videoTracks, ([trackSid, trackIdentifier]) => {
                return (
                  <TwilioVideoParticipantView
                    style={styles.remoteVideo}
                    key={trackSid}
                    trackIdentifier={trackIdentifier}
                  />
                );
              })}
            </View>
          )}
          <View style={styles.optionsContainer}>
            <TouchableOpacity
              style={styles.optionButton}
              onPress={_onEndButtonPress}
            >
              <Text style={{ fontSize: 12 }}>End</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.optionButton}
              onPress={_onMuteButtonPress}
            >
              <Text style={{ fontSize: 12 }}>
                {isAudioEnabled ? "Mute" : "Unmute"}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.optionButton}
              onPress={_onFlipButtonPress}
            >
              <Text style={{ fontSize: 12 }}>Flip</Text>
            </TouchableOpacity>
            <TwilioVideoLocalView enabled={true} style={styles.localVideo} />
          </View>
        </View>
      )}

      <TwilioVideo
        ref={twilioRef}
        onRoomDidConnect={_onRoomDidConnect}
        onRoomDidDisconnect={_onRoomDidDisconnect}
        onRoomDidFailToConnect={_onRoomDidFailToConnect}
        onParticipantAddedVideoTrack={_onParticipantAddedVideoTrack}

```

--------------------------------

### Install Expo Build Properties

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Installs the necessary expo-build-properties package for Expo projects when using the Twilio video library. This package is required for the config plugin to function correctly.

```shell
npx expo install expo-build-properties
```

--------------------------------

### Get Connection Statistics with getStats()

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Requests and retrieves real-time connection statistics, such as bandwidth, latency, and packet loss. The statistics are delivered via the `onStatsReceived` callback. This method is essential for monitoring call quality and diagnosing network issues.

```javascript
import React, { useRef } from 'react';
import { TwilioVideo } from 'react-native-twilio-video-webrtc';

const MyComponent = () => {
  const twilioRef = useRef(null);

  const fetchStats = () => {
    if (twilioRef.current) {
      twilioRef.current.getStats();
    }
  };

  return (
    <TwilioVideo
      ref={twilioRef}
      onStatsReceived={(stats) => {
        console.log("Connection stats:", stats);
        // Process stats data (bandwidth, latency, packet loss, etc.)
      }}
    />
    // Button or other trigger to call fetchStats()
  );
};

```

--------------------------------

### iOS Info.plist Permissions

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Configures the necessary permissions in the iOS Info.plist file for camera and microphone usage. These keys provide the descriptive text shown to the user when the app first requests access to these hardware components.

```xml
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>
```

--------------------------------

### Android Permissions Configuration

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Configures required permissions in AndroidManifest.xml for camera and audio settings. These are static declarations necessary for the app to utilize hardware features.

```xml
<!-- android/app/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
    <uses-feature android:name="android.hardware.microphone" android:required="false" />
    <!-- ... rest of manifest -->
</manifest>
```

--------------------------------

### iOS Permissions Configuration

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Adds required privacy usage descriptions to the Info.plist file for camera and microphone access on iOS. These keys inform the user why the app needs access to these sensitive resources.

```xml
<!-- ios/YourApp/Info.plist -->
<dict>
    <!-- ... other entries ... -->
    <key>NSCameraUsageDescription</key>
    <string>This app requires camera access for video calls</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>This app requires microphone access for audio calls</string>
</dict>
```

--------------------------------

### CustomTwilioVideoView Component Properties

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/docs/README.md

This section details the properties available for the CustomTwilioVideoView component, which are used to configure its behavior and handle various events.

```APIDOC
## CustomTwilioVideoView Component Properties

### Description

The `CustomTwilioVideoView` component allows for the integration of Twilio's WebRTC video functionality within a React Native application. It exposes a set of properties to manage video streams, participant interactions, and network quality reporting.

### Method

N/A (Component Properties)

### Endpoint

N/A (Component Properties)

### Parameters

#### Properties (Props)

- **onCameraSwitched** (func) - Optional - Callback that is called when camera source changes.
- **onVideoChanged** (func) - Optional - Callback that is called when video is toggled.
- **onAudioChanged** (func) - Optional - Callback that is called when audio is toggled.
- **onRoomDidConnect** (func) - Optional - Called when the room has connected. Receives an object with `roomName`, `participants`, and `localParticipant`.
- **onRoomDidFailToConnect** (func) - Optional - Callback that is called when connecting to room fails.
- **onRoomDidDisconnect** (func) - Optional - Called when the user is disconnected from the room.
- **onParticipantAddedDataTrack** (func) - Optional - Called when a new data track has been added. Receives `participant` and `track`.
- **onParticipantRemovedDataTrack** (func) - Optional - Called when a data track has been removed. Receives `participant` and `track`.
- **onDataTrackMessageReceived** (func) - Optional - Called when a dataTrack receives a message. Receives `message` and `trackSid`.
- **onParticipantAddedVideoTrack** (func) - Optional - Called when a new video track has been added. Receives `participant`, `track`, and `enabled`.
- **onParticipantRemovedVideoTrack** (func) - Optional - Called when a video track has been removed. Receives `participant` and `track`.
- **onParticipantAddedAudioTrack** (func) - Optional - Called when a new audio track has been added. Receives `participant` and `track`.
- **onParticipantRemovedAudioTrack** (func) - Optional - Called when an audio track has been removed. Receives `participant` and `track`.
- **onRoomParticipantDidConnect** (func) - Optional - Callback called when a participant enters a room.
- **onRoomParticipantDidDisconnect** (func) - Optional - Callback that is called when a participant exits a room.
- **onParticipantEnabledVideoTrack** (func) - Optional - Called when a video track has been enabled. Receives `participant` and `track`.
- **onParticipantDisabledVideoTrack** (func) - Optional - Called when a video track has been disabled. Receives `participant` and `track`.
- **onParticipantEnabledAudioTrack** (func) - Optional - Called when an audio track has been enabled. Receives `participant` and `track`.
- **onParticipantDisabledAudioTrack** (func) - Optional - Called when an audio track has been disabled. Receives `participant` and `track`.
- **onStatsReceived** (func) - Optional - Callback that is called when stats are received (after calling `getStats`).
- **onNetworkQualityLevelsChanged** (func) - Optional - Callback that is called when network quality levels are changed (only if `enableNetworkQualityReporting` in `connect` is set to true).
- **onDominantSpeakerDidChange** (func) - Optional - Called when dominant speaker changes. Receives `participant` and `room`.

### Request Example

```javascript
<CustomTwilioVideoView
  onCameraSwitched={handleCameraSwitch}
  onRoomDidConnect={handleRoomConnect}
  // ... other props
/>
```

### Response

#### Success Response (N/A for component properties)

N/A

#### Response Example

N/A
```

--------------------------------

### Configure Expo Plugin for Permissions

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Configures the Expo plugin in app.json to set custom camera and microphone permissions for managed workflow projects.

```json
{
  "name": "my-app",
  "plugins": [
    [
      "react-native-twilio-video-webrtc",
      {
        "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
        "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
      }
    ]
  ]
}
```

--------------------------------

### Integrate TwilioPackage in MainApplication.java

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Adds the `TwilioPackage` to your `MainApplication.java` file. This involves importing the package and including it in the `getPackages()` method, making the Twilio functionality available to your React Native application.

```java
import com.twiliorn.library.TwilioPackage;

    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            ...
            new TwilioPackage()
        );
    }
```

--------------------------------

### Enable Java 8 Compatibility in Android

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Configures your Android project to compile with Java 8 features. This is necessary for the library to function correctly.

```gradle
android {
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}
```

--------------------------------

### TwilioVideoPreview Component (Android)

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/docs/README.md

A component for displaying a local video preview on Android.

```APIDOC
## TwilioVideoPreview Component (Android)

### Description
This component is used to display a local video preview on Android devices.

### Method
N/A (Component Properties)

### Endpoint
N/A (Component Properties)

### Parameters
#### Properties
- **scaleType** (enum('fit', 'fill')) - Optional - How the video stream should be scaled to fit its container.

### Request Example
N/A

### Response
N/A
```

--------------------------------

### TwilioVideo Component

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/docs/README.md

The main component for managing Twilio video rooms, handling connections, and receiving various room and participant events.

```APIDOC
## TwilioVideo Component

### Description
This component is used to manage Twilio video rooms. It handles room connections, disconnections, and various events related to participants and their tracks.

### Method
N/A (Component Properties)

### Endpoint
N/A (Component Properties)

### Parameters
#### Properties
- **screenShare** (boolean) - Optional - Flag that enables screen sharing RCTRootView instead of camera capture.
- **onRoomDidConnect** (function) - Optional - Called when the room has connected. Parameters: `{roomName, participants, localParticipant}`.
- **onRoomDidDisconnect** (function) - Optional - Called when the room has disconnected. Parameters: `{roomName, error}`.
- **onRoomDidFailToConnect** (function) - Optional - Called when connection with room failed. Parameters: `{roomName, error}`.
- **onRoomParticipantDidConnect** (function) - Optional - Called when a new participant has connected. Parameters: `{roomName, participant}`.
- **onRoomParticipantDidDisconnect** (function) - Optional - Called when a participant has disconnected. Parameters: `{roomName, participant}`.
- **onParticipantAddedVideoTrack** (function) - Optional - Called when a new video track has been added. Parameters: `{participant, track, enabled}`.
- **onParticipantRemovedVideoTrack** (function) - Optional - Called when a video track has been removed. Parameters: `{participant, track}`.
- **onParticipantAddedDataTrack** (function) - Optional - Called when a new data track has been added. Parameters: `{participant, track}`.
- **onParticipantRemovedDataTrack** (function) - Optional - Called when a data track has been removed. Parameters: `{participant, track}`.
- **onParticipantAddedAudioTrack** (function) - Optional - Called when a new audio track has been added. Parameters: `{participant, track}`.
- **onParticipantRemovedAudioTrack** (function) - Optional - Called when an audio track has been removed. Parameters: `{participant, track}`.
- **onParticipantEnabledVideoTrack** (function) - Optional - Called when a video track has been enabled. Parameters: `{participant, track}`.
- **onParticipantDisabledVideoTrack** (function) - Optional - Called when a video track has been disabled. Parameters: `{participant, track}`.
- **onParticipantEnabledAudioTrack** (function) - Optional - Called when an audio track has been enabled. Parameters: `{participant, track}`.
- **onParticipantDisabledAudioTrack** (function) - Optional - Called when an audio track has been disabled. Parameters: `{participant, track}`.
- **onDataTrackMessageReceived** (function) - Optional - Called when an dataTrack receives a message. Parameters: `{message, trackSid}`.
- **onCameraDidStart** (function) - Optional - Called when the camera has started.
- **onCameraWasInterrupted** (function) - Optional - Called when the camera has been interrupted.
- **onCameraInterruptionEnded** (function) - Optional - Called when the camera interruption has ended.
- **onCameraDidStopRunning** (function) - Optional - Called when the camera has stopped running with an error. Parameters: `{error}`.
- **onStatsReceived** (function) - Optional - Called when stats are received (after calling getStats).
- **onNetworkQualityLevelsChanged** (function) - Optional - Called when the network quality levels of a participant have changed (only if enableNetworkQualityReporting is set to True when connecting).
- **onDominantSpeakerDidChange** (function) - Optional - Called when dominant speaker changes. Parameters: `{participant, room}`.
- **onLocalParticipantSupportedCodecs** (function) - Optional - Always called on android with `{supportedCodecs}` after connecting to the room.

### Request Example
N/A

### Response
N/A
```

--------------------------------

### Handle Twilio Video Room and Participant Events in React Native

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

This snippet demonstrates how to use various event callbacks provided by the TwilioVideo component to manage room connections, participant joins/leaves, and track status updates. It covers room connection/disconnection, participant events, and track enablement/disablement for video, audio, and data. It also includes camera events and network quality monitoring.

```jsx
<TwilioVideo
  ref={twilioRef}
  // Room events
  onRoomDidConnect={({ roomName, roomSid, participants, localParticipant }) => {
    console.log("Connected to room:", roomName);
    console.log("Room SID:", roomSid);
    console.log("Existing participants:", participants);
    console.log("Local participant:", localParticipant);
  }}
  onRoomDidDisconnect={({ roomName, roomSid, error }) => {
    console.log("Disconnected from room:", roomName);
    if (error) console.error("Disconnect error:", error);
  }}
  onRoomDidFailToConnect={({ roomName, error }) => {
    console.error("Failed to connect to room:", roomName, error);
  }}

  // Participant events
  onRoomParticipantDidConnect={({ roomName, roomSid, participant }) => {
    console.log("Participant joined:", participant.identity, participant.sid);
  }}
  onRoomParticipantDidDisconnect={({ roomName, roomSid, participant }) => {
    console.log("Participant left:", participant.identity);
  }}

  // Video track events
  onParticipantAddedVideoTrack={({ participant, track }) => {
    console.log("Video track added:", track.trackSid, "from:", participant.identity);
  }}
  onParticipantRemovedVideoTrack={({ participant, track }) => {
    console.log("Video track removed:", track.trackSid);
  }}
  onParticipantEnabledVideoTrack={({ participant, track }) => {
    console.log("Video track enabled:", track.trackSid);
  }}
  onParticipantDisabledVideoTrack={({ participant, track }) => {
    console.log("Video track disabled:", track.trackSid);
  }}

  // Audio track events
  onParticipantAddedAudioTrack={({ participant, track }) => {
    console.log("Audio track added from:", participant.identity);
  }}
  onParticipantRemovedAudioTrack={({ participant, track }) => {
    console.log("Audio track removed");
  }}
  onParticipantEnabledAudioTrack={({ participant, track }) => {
    console.log("Participant unmuted:", participant.identity);
  }}
  onParticipantDisabledAudioTrack={({ participant, track }) => {
    console.log("Participant muted:", participant.identity);
  }}

  // Data track events
  onParticipantAddedDataTrack={({ participant, track }) => {
    console.log("Data track added from:", participant.identity);
  }}
  onParticipantRemovedDataTrack={({ participant, track }) => {
    console.log("Data track removed");
  }}
  onDataTrackMessageReceived={({ message, trackSid }) => {
    console.log("Data message received:", message);
  }}

  // Camera events (iOS)
  onCameraDidStart={() => console.log("Camera started")}
  onCameraDidStopRunning={({ error }) => console.error("Camera stopped:", error)}
  onCameraWasInterrupted={() => console.log("Camera interrupted")}
  onCameraInterruptionEnded={() => console.log("Camera interruption ended")}

  // Network and speaker events
  onNetworkQualityLevelsChanged={({ participant, isLocalUser, quality }) => {
    // quality: 0 (unknown) to 5 (excellent)
    console.log(`Network quality for ${participant.identity}: ${quality}`);
  }}
  onDominantSpeakerDidChange={({ roomName, roomSid, participant }) => {
    console.log("Dominant speaker:", participant?.identity);
  }}

  // Stats
  onStatsReceived={(stats) => {
    console.log("Stats:", stats);
  }}

  // iOS only
  autoInitializeCamera={true}
/>
```

--------------------------------

### Configure Android Gradle Settings

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Adds the react-native-twilio-video-webrtc library to your Android project's Gradle configuration. This involves updating `settings.gradle` to include the project and `android/app/build.gradle` to add it as a dependency.

```gradle
include ':react-native-twilio-video-webrtc'
project(':react-native-twilio-video-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-twilio-video-webrtc/android')
```

```gradle
dependencies {
    .....
    .....
    .....
    implementation project(':react-native-twilio-video-webrtc')
}
```

--------------------------------

### Enable Jumbo Mode for Android Builds

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Enables jumbo mode in your `app/build.gradle` file to resolve `DexIndexOverflowException`. This option increases the number of methods that can be included in a single DEX file, which can be necessary for larger projects.

```gradle
android {
  ...
  dexOptions {
    jumboMode true
  }
}
```

--------------------------------

### Configure Proguard Rules for Twilio Library

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Adds Proguard rules to `proguard-rules.pro` to prevent the stripping of necessary Twilio library symbols. This ensures that the library functions correctly when code shrinking is enabled.

```proguard
  -keep class com.twilio.** { *; }
  -keep class tvi.webrtc.** { *; }
```

--------------------------------

### Display Local Video Preview with TwilioVideoLocalView

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

A React Native component for rendering the local user's camera preview. The `enabled` prop controls its visibility. It supports custom styling and can be configured with different `scaleType` options ('fit' or 'fill').

```jsx
import React, { useState } from 'react';
import { TwilioVideoLocalView } from 'react-native-twilio-video-webrtc';

const LocalVideo = () => {
  const [showLocalVideo, setShowLocalVideo] = useState(true);

  return (
    <>
      <TwilioVideoLocalView
        enabled={showLocalVideo}
        style={{
          width: 150,
          height: 200,
          position: "absolute",
          bottom: 100,
          right: 20,
          borderRadius: 10,
        }}
      />
      {/* Example of conditional rendering */}
      <Button title="Toggle Local Video" onPress={() => setShowLocalVideo(!showLocalVideo)} />
    </>
  );
};

```

```jsx
import React from 'react';
import { TwilioVideoLocalView } from 'react-native-twilio-video-webrtc';

const ScaledLocalVideo = () => (
  <TwilioVideoLocalView
    enabled={true}
    scaleType="fill" // or "fit"
    applyZOrder={true} // Render above other video views
    style={{ width: 100, height: 150 }}
  />
);

```

--------------------------------

### Set iOS Deployment Target

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Specifies the minimum iOS version required for the project. This configuration ensures compatibility with features used by the Twilio Video library, setting it to at least iOS 11.0.

```ruby
platform :ios, '11.0'
```

--------------------------------

### TwilioVideoParticipantView Component (iOS)

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/docs/README.md

A component for displaying a participant's video stream on iOS.

```APIDOC
## TwilioVideoParticipantView Component (iOS)

### Description
This component is used to display a participant's video stream on iOS.

### Method
N/A (Component Properties)

### Endpoint
N/A (Component Properties)

### Parameters
#### Properties
- **trackIdentifier** (shape) - Optional - Identifier for the video track.

### Request Example
N/A

### Response
N/A
```

--------------------------------

### Request Runtime Permissions in React Native (Android)

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Requests runtime permissions for camera and microphone access on Android using React Native's PermissionsAndroid API. This function checks the platform and prompts the user if permissions are not already granted.

```javascript
// Request runtime permissions in React Native
import { PermissionsAndroid, Platform } from "react-native";

const requestPermissions = async () => {
  if (Platform.OS !== "android") return true;

  try {
    const cameraGranted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Camera Permission",
        message: "This app needs camera access for video calls",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK",
      }
    );

    const audioGranted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: "Microphone Permission",
        message: "This app needs microphone access for audio calls",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK",
      }
    );

    return (
      cameraGranted === PermissionsAndroid.RESULTS.GRANTED &&
      audioGranted === PermissionsAndroid.RESULTS.GRANTED
    );
  } catch (err) {
    console.warn(err);
    return false;
  }
};

```

--------------------------------

### Add Twilio Video to iOS Podfile

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Adds the react-native-twilio-video-webrtc package as a local pod to the iOS Podfile. This is the recommended method for integrating the library on iOS, ensuring the correct TwilioVideo pod is included.

```ruby
pod 'react-native-twilio-video-webrtc', path: '../node_modules/react-native-twilio-video-webrtc'
```

--------------------------------

### TwilioRemotePreview Component (Android)

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/docs/README.md

A component for displaying a remote participant's video stream on Android.

```APIDOC
## TwilioRemotePreview Component (Android)

### Description
This component is used to display a remote participant's video stream on Android.

### Method
N/A (Component Properties)

### Endpoint
N/A (Component Properties)

### Parameters
#### Properties
- **trackIdentifier** (shape) - Optional - Identifier for the video track.
- **onFrameDimensionsChanged** (function) - Optional.
- **trackSid** (string) - Optional.
- **renderToHardwareTextureAndroid** (string) - Optional.
- **onLayout** (string) - Optional.
- **accessibilityLiveRegion** (string) - Optional.
- **accessibilityComponentType** (string) - Optional.
- **importantForAccessibility** (string) - Optional.
- **accessibilityLabel** (string) - Optional.
- **nativeID** (string) - Optional.
- **testID** (string) - Optional.

### Request Example
N/A

### Response
N/A
```

--------------------------------

### Add Android Permissions to AndroidManifest.xml

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Declares necessary camera and audio permissions in your `AndroidManifest.xml` file. These permissions are required for video and audio communication.

```xml
<uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
    <uses-feature android:name="android.hardware.microphone" android:required="false" />
```

--------------------------------

### Control Local Video On/Off

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Enable or disable the local video track, turning the camera on or off. This method returns a Promise that resolves with the new enabled state of the video track. It's often used with UI elements like video toggle buttons.

```javascript
const [isVideoOff, setIsVideoOff] = useState(false);

const toggleVideo = async () => {
  const isEnabled = await twilioRef.current.setLocalVideoEnabled(isVideoOff);
  setIsVideoOff(!isEnabled);
  console.log("Video enabled:", isEnabled);
};

// Usage in a video toggle button
<Button
  title={isVideoOff ? "Turn On Camera" : "Turn Off Camera"}
  onPress={toggleVideo}
/>
```

--------------------------------

### Import Core Components for Twilio Video

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Imports the essential components for integrating Twilio Video into a React Native application. These components handle room connections, event delivery, local and remote video feeds.

```javascript
import {
  TwilioVideo,
  TwilioVideoLocalView,
  TwilioVideoParticipantView,
} from "react-native-twilio-video-webrtc";
```

--------------------------------

### TwilioVideoLocalView Component (iOS)

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/docs/README.md

A component for displaying a local video feed on iOS.

```APIDOC
## TwilioVideoLocalView Component (iOS)

### Description
This component is used to display the local video feed on iOS devices.

### Method
N/A (Component Properties)

### Endpoint
N/A (Component Properties)

### Parameters
#### Properties
- **enabled** (boolean) - Required - Indicate if video feed is enabled.
- **scaleType** (enum('fit', 'fill')) - Optional - How the video stream should be scaled to fit its container.

### Request Example
N/A

### Response
N/A
```

--------------------------------

### TwilioVideo Component for Video Calls

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Demonstrates the usage of the TwilioVideo component in a React Native application to manage video call connections, render local and remote video feeds, and handle connection events. Requires Twilio access token and room name for connection.

```jsx
import React, { useState, useRef } from "react";
import { View, Button, PermissionsAndroid, Platform } from "react-native";
import {
  TwilioVideo,
  TwilioVideoLocalView,
  TwilioVideoParticipantView,
} from "react-native-twilio-video-webrtc";

const VideoCall = () => {
  const [status, setStatus] = useState("disconnected");
  const [videoTracks, setVideoTracks] = useState(new Map());
  const twilioRef = useRef(null);

  const requestPermissions = async () => {
    if (Platform.OS === "android") {
      await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
      await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
    }
  };

  const connectToRoom = async () => {
    await requestPermissions();
    twilioRef.current.connect({
      accessToken: "YOUR_TWILIO_ACCESS_TOKEN",
      roomName: "my-video-room",
      enableAudio: true,
      enableVideo: true,
      enableNetworkQualityReporting: true,
      dominantSpeakerEnabled: true,
      cameraType: "front",
    });
    setStatus("connecting");
  };

  return (
    <View style={{ flex: 1 }}>
      <TwilioVideo
        ref={twilioRef}
        onRoomDidConnect={({ roomName, participants }) => {
          console.log("Connected to:", roomName);
          setStatus("connected");
        }}
        onRoomDidDisconnect={({ roomName, error }) => {
          console.log("Disconnected:", error);
          setStatus("disconnected");
        }}
        onRoomDidFailToConnect={({ roomName, error }) => {
          console.log("Failed to connect:", error);
          setStatus("disconnected");
        }}
        onParticipantAddedVideoTrack={({ participant, track }) => {
          setVideoTracks((prev) => {
            prev.set(track.trackSid, {
              participantSid: participant.sid,
              videoTrackSid: track.trackSid,
            });
            return new Map(prev);
          });
        }}
        onParticipantRemovedVideoTrack={({ participant, track }) => {
          setVideoTracks((prev) => {
            prev.delete(track.trackSid);
            return new Map(prev);
          });
        }}
      />

      {status === "disconnected" && (
        <Button title="Connect" onPress={connectToRoom} />
      )}

      {status === "connected" && (
        <>
          <TwilioVideoLocalView enabled={true} style={{ width: 100, height: 150 }} />
          {Array.from(videoTracks, ([trackSid, trackIdentifier]) => (
            <TwilioVideoParticipantView
              key={trackSid}
              trackIdentifier={trackIdentifier}
              style={{ width: 200, height: 300 }}
            />
          ))}
          <Button title="Disconnect" onPress={() => twilioRef.current.disconnect()} />
        </>
      )}
    </View>
  );
};

```

--------------------------------

### Connect to Twilio Video Room

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Connect to a Twilio Video room using a JWT access token. This method accepts various configuration options for audio, video, camera type, encoding parameters, and network quality reporting. The specific options available may vary slightly between iOS and Android platforms.

```javascript
// Basic connection
twilioRef.current.connect({
  accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  roomName: "daily-standup",
});

// Full configuration (iOS)
twilioRef.current.connect({
  accessToken: "YOUR_ACCESS_TOKEN",
  roomName: "conference-room-1",
  cameraType: "front", // "front" or "back"
  enableAudio: true,
  enableVideo: true,
  dominantSpeakerEnabled: true,
  enableNetworkQualityReporting: true,
  encodingParameters: {
    enableH264Codec: true,
    audioBitrate: 16000,
    videoBitrate: 1200000,
  },
});

// Full configuration (Android)
twilioRef.current.connect({
  accessToken: "YOUR_ACCESS_TOKEN",
  roomName: "conference-room-1",
  cameraType: "front",
  enableAudio: true,
  enableVideo: true,
  enableRemoteAudio: true,
  dominantSpeakerEnabled: true,
  enableNetworkQualityReporting: true,
  maintainVideoTrackInBackground: false,
  encodingParameters: {
    enableH264Codec: true,
  },
});
```

--------------------------------

### TypeScript Type Definitions for Twilio Video WebRTC

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

Provides essential TypeScript type definitions for the react-native-twilio-video-webrtc library. This includes interfaces for components, participants, tracks, and event arguments, enabling type safety and autocompletion in TypeScript projects.

```typescript
import {
  TwilioVideo,
  TwilioVideoLocalView,
  TwilioVideoParticipantView,
  TrackIdentifier,
  TrackEventCbArgs,
  RoomEventCb,
  RoomErrorEventCb,
  ParticipantEventCb,
  NetworkLevelChangeEventCb,
  DominantSpeakerChangedCb,
  DataTrackEventCb,
} from "react-native-twilio-video-webrtc";

// TrackIdentifier interface
interface TrackIdentifier {
  participantSid: string;
  videoTrackSid: string;
}

// Participant interface
interface Participant {
  sid: string;
  identity: string;
}

// Track interface
interface Track {
  enabled: boolean;
  trackName: string;
  trackSid: string;
}

// Event argument types
interface TrackEventCbArgs {
  participant: Participant;
  track: Track;
}

interface RoomEventArgs {
  roomName: string;
  roomSid: string;
  participants: Participant[];
  localParticipant: Participant;
}

interface RoomErrorEventArgs {
  roomName: string;
  roomSid: string;
  error: any;
}

interface NetworkLevelChangeEventArgs {
  participant: Participant;
  isLocalUser: boolean;
  quality: number; // 0-5
}

// Usage with TypeScript
const twilioRef = useRef<TwilioVideo>(null);

const handleTrackAdded: TrackEventCb = ({ participant, track }) => {
  console.log(`Track ${track.trackSid} added by ${participant.identity}`);
};

const handleRoomConnect: RoomEventCb = ({ roomName, participants }) => {
  console.log(`Connected to ${roomName} with ${participants.length} participants`);
};
```

--------------------------------

### Expo Config Plugin for Permissions

Source: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/README.md

Configures the react-native-twilio-video-webrtc plugin within an Expo project's app.json. This allows customization of camera and microphone permission descriptions displayed to the user.

```json
{
  "name": "my app",
  "plugins": [
    [
      "react-native-twilio-video-webrtc",
      {
        "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
        "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
      }
    ]
  ]
}
```

--------------------------------

### React Native Twilio Video Call Component

Source: https://context7.com/blackuy/react-native-twilio-video-webrtc/llms.txt

This component sets up and manages a video call using React Native and Twilio WebRTC. It handles permissions, connection, disconnection, and real-time updates for participants and their video tracks. It requires the 'react-native-twilio-video-webrtc' library.

```jsx
import React, { useState, useRef, useEffect } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  Platform,
  PermissionsAndroid,
} from "react-native";
import {
  TwilioVideo,
  TwilioVideoLocalView,
  TwilioVideoParticipantView,
} from "react-native-twilio-video-webrtc";

const VideoCallApp = () => {
  const [token, setToken] = useState("");
  const [status, setStatus] = useState("disconnected");
  const [roomName, setRoomName] = useState("");
  const [participants, setParticipants] = useState([]);
  const [videoTracks, setVideoTracks] = useState(new Map());
  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
  const [isFrontCamera, setIsFrontCamera] = useState(true);
  const twilioRef = useRef(null);

  const requestPermissions = async () => {
    if (Platform.OS === "android") {
      const granted = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.CAMERA,
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      ]);
      return Object.values(granted).every(
        (result) => result === PermissionsAndroid.RESULTS.GRANTED
      );
    }
    return true;
  };

  const connect = async () => {
    const hasPermissions = await requestPermissions();
    if (!hasPermissions) {
      console.error("Permissions not granted");
      return;
    }

    twilioRef.current.connect({
      accessToken: token,
      enableAudio: true,
      enableVideo: true,
      enableNetworkQualityReporting: true,
      dominantSpeakerEnabled: true,
    });
    setStatus("connecting");
  };

  const disconnect = () => {
    twilioRef.current.disconnect();
  };

  const toggleAudio = async () => {
    const enabled = await twilioRef.current.setLocalAudioEnabled(!isAudioEnabled);
    setIsAudioEnabled(enabled);
  };

  const toggleVideo = async () => {
    const enabled = await twilioRef.current.setLocalVideoEnabled(!isVideoEnabled);
    setIsVideoEnabled(enabled);
  };

  const flipCamera = () => {
    twilioRef.current.flipCamera();
    setIsFrontCamera(!isFrontCamera);
  };

  return (
    <View style={styles.container}>
      <TwilioVideo
        ref={twilioRef}
        onRoomDidConnect={({ roomName: name, participants: existingParticipants }) => {
          setStatus("connected");
          setRoomName(name);
          setParticipants(existingParticipants);
        }}
        onRoomDidDisconnect={() => {
          setStatus("disconnected");
          setVideoTracks(new Map());
          setParticipants([]);
        }}
        onRoomDidFailToConnect={({ error }) => {
          console.error("Connection failed:", error);
          setStatus("disconnected");
        }}
        onRoomParticipantDidConnect={({ participant }) => {
          setParticipants((prev) => [...prev, participant]);
        }}
        onRoomParticipantDidDisconnect={({ participant }) => {
          setParticipants((prev) => prev.filter((p) => p.sid !== participant.sid));
        }}
        onParticipantAddedVideoTrack={({ participant, track }) => {
          setVideoTracks((prev) => {
            const updated = new Map(prev);
            updated.set(track.trackSid, {
              participantSid: participant.sid,
              videoTrackSid: track.trackSid,
              identity: participant.identity,
            });
            return updated;
          });
        }}
        onParticipantRemovedVideoTrack={({ track }) => {
          setVideoTracks((prev) => {
            const updated = new Map(prev);
            updated.delete(track.trackSid);
            return updated;
          });
        }}
      />

      {status === "disconnected" && (
        <View style={styles.loginContainer}>
          <Text style={styles.title}>Join Video Call</Text>
          <TextInput
            style={styles.input}
            placeholder="Enter access token"
            value={token}
            onChangeText={setToken}
            autoCapitalize="none"
          />
          <TouchableOpacity style={styles.connectButton} onPress={connect}>
            <Text style={styles.buttonText}>Connect</Text>
          </TouchableOpacity>
        </View>
      )}

      {status === "connecting" && (
        <View style={styles.centerContainer}>
          <Text>Connecting to room...</Text>
        </View>
      )}

      {status === "connected" && (
        <View style={styles.callContainer}>
          <Text style={styles.roomTitle}>Room: {roomName}</Text>

          {/* Remote participants */}
          <View style={styles.remoteContainer}>
            {Array.from(videoTracks, ([trackSid, track]) => (
              <View key={trackSid} style={styles.remoteVideoWrapper}>
                <TwilioVideoParticipantView
                  trackIdentifier={{
                    participantSid: track.participantSid,
                    videoTrackSid: track.videoTrackSid,
                  }}
                />
              </View>
            ))}
          </View>

          {/* Local participant */}
          <View style={styles.localVideoWrapper}>
            <TwilioVideoLocalView enabled={isVideoEnabled} />
          </View>

          {/* Controls */}
          <View style={styles.controlsContainer}>
            <TouchableOpacity onPress={toggleAudio}>
              <Text>{isAudioEnabled ? "Mute" : "Unmute"}</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={toggleVideo}>
              <Text>{isVideoEnabled ? "Stop Video" : "Start Video"}</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={flipCamera}>
              <Text>Flip Camera</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={disconnect}>
              <Text>Disconnect</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  loginContainer: {
    width: "80%",
    alignItems: "center",
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  input: {
    width: "100%",
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    backgroundColor: "white",
  },
  connectButton: {
    backgroundColor: "#007bff",
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  buttonText: {
    color: "white",
    fontSize: 16,
  },
  centerContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  callContainer: {
    flex: 1,
    width: "100%",
    position: "relative",
  },
  roomTitle: {
    fontSize: 20,
    textAlign: "center",
    marginVertical: 10,
  },
  remoteContainer: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    alignItems: "center",
    padding: 5,
  },
  remoteVideoWrapper: {
    width: "48%",
    height: "48%",
    margin: "1%",
    backgroundColor: "black",
  },
  localVideoWrapper: {
    position: "absolute",
    bottom: 80,
    right: 10,
    width: 100,
    height: 150,
    backgroundColor: "black",
    borderRadius: 10,
    overflow: "hidden",
  },
  controlsContainer: {
    position: "absolute",
    bottom: 20,
    left: 0,
    right: 0,
    flexDirection: "row",
    justifyContent: "space-around",
    paddingHorizontal: 20,
  },
});

export default VideoCallApp;

```