Video SDK for React Native (Android and iOS)

At Video SDK, we’re building tools to help companies create world-class collaborative products with capabilities of live audio/videos, compose cloud recordings/rtmp/hls and interaction APIs

Demo App

Check out demo here

📲 Download the Sample iOS app here: https://testflight.apple.com/join/LYj3QJPx

📱 Download the Sample Android app here: https://appdistribution.firebase.dev/i/a4c63049415c4356

Setup Guide

• Sign up on VideoSDK and visit API Keys section to get your API key and Secret key.

• Get familiarized with API key and Secret key

• Get familiarized with Token

Prerequisites

• React Native 0.59.10 or later
• Node 10 or later
• Valid Video SDK Account
• For Android
  • Java Development Kit (JDK) 8 or later
  • Android Studio (latest version recommended)
  • A physical or virtual mobile device running Android 5.0 or later
• For iOS
  • Xcode 9.4 or later
  • CocoaPods
  • A physical or virtual mobile device running iOS 9.0 or later

Run the Sample App

Step 1: Clone the sample project

Clone the repository to your local environment.

git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.git

Step 2: Copy the .env.example file to .env file.

Open your favorite code editor and copy .env.example to .env file.

cp.env.example.env;

Step 3: Modify .env file

Generate temporary token from Video SDK Account.

REACT_APP_VIDEOSDK_TOKEN = "TEMPORARY-TOKEN";

Step 4: Install the dependecies

Install dependecies all the project dependencies.

npm install

Step 5: Run the sample app

Bingo, it's time to push the launch button.

npm run start
npm android
npm ios

Key Concepts

• Meeting - A Meeting represents Real time audio and video communication.

  Note : Don't confuse with Room and Meeting keyword, both are same thing 😃

• Sessions - A particular duration you spend in a given meeting is a referred as session, you can have multiple session of a particular meetingId.

• Participant - Participant represents someone who is attending the meeting's session, local partcipant represents self (You), for this self, other participants are remote participants.

• Stream - Stream means video or audio media content that is either published by local participant or remote participants.

Android Permission

Add all the following permissions to AndroidManifest.xml file.

    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />

    <!-- Needed to communicate with already-paired Bluetooth devices. (Legacy up to Android 11) -->
    <uses-permission
        android:name="android.permission.BLUETOOTH"
        android:maxSdkVersion="30" />
    <uses-permission
        android:name="android.permission.BLUETOOTH_ADMIN"
        android:maxSdkVersion="30" />

    <!-- Needed to communicate with already-paired Bluetooth devices. (Android 12 upwards)-->
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

iOS Permission

Add the following entry to your Info.plist file, located at <project root>/ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>

iOS Screen share Setup

Please refer to this documentation guide to setup screenshare for iOS

Token Generation

Token is used to create and validate a meeting using API and also initialise a meeting.

🛠️ Development Environment:

• For development, you can use temporary token. Visit VideoSDK dashboard to generate temporary token.

🌐 Production Environment:

• For production, you have to set up an authentication server to authorize users. Follow our official example repositories to setup authentication server, videosdk-rtc-api-server-examples

Note :

The expiry of development environment token lasts 7 days only.

API: Create and Validate meeting

• create meeting - Please refer this documentation to create meeting.
• validate meeting- Please refer this documentation to validate the meetingId.

Initialize a Meeting

• You can initialize the meeting using MeetingProvider. Meeting Provider simplifies configuration of meeting with by wrapping up core logic with react-context.

<MeetingProvider
  config={{
    meetingId: "meeting-id",
    micEnabled: true,
    webcamEnabled: true,
    name: "Participant Name",
    notification: {
      title: "Code Sample",
      message: "Meeting is running.",
    },
    participantId: "xyz",
  }}
  token={"token"}
  joinWithoutUserInteraction // Boolean
></MeetingProvider>

Mute/Unmute Local Audio

// Enable Mic in Meeting
meeting?.unmuteMic();

// Disable Mic in Meeting
meeting?.muteMic();

Change Audio Device

• The getAudioDeviceList() function allows a participant to list all of the attached audio devices (e.g., Bluetooth and Earphone).

import { getAudioDeviceList } from "@videosdk.live/react-native-sdk";

const onPress = async () => {
  const device = await getAudioDeviceList();
  console.log("Device :", device); // ["SPEAKER_PHONE","WIRED_HEADSET"]
};

• Local participant can change the audio device using switchAudioDevice() method of Room class.

import { switchAudioDevice } from "@videosdk.live/react-native-sdk";

switchAudioDevice("SPEAKER_PHONE"); // for device speaker

switchAudioDevice("EARPIECE"); // for device earpiece

switchAudioDevice("WIRED_HEADSET"); // for wired headset

switchAudioDevice("BLUETOOTH"); // for bluetooth device

• Please consult our documentation Change Audio Device for more infromation.

Enable/Disable Local Webcam

const { enableWebcam, disableWebcam } = useMeeting();
const onPress = async () => {
  // Enable Webcam in Meeting
  enableWebcam();

  // Disable Webcam in Meeting
  disableWebcam();
};

Switch Local Webcam

const { changeWebcam, getWebcams } = useMeeting();
const onPress = async () => {
  // Change Webcam in Meeting
  const webcams = await getWebcams(); // returns all webcams

  const { deviceId, label } = webcams[0]; // 0th : Rear Cam, 1st : Front Cam

  changeWebcam(deviceId);
};

Chat

• The chat feature allows participants to send and receive messages about specific topics to which they have subscribed.

// importing usePubSub hook from react-native-sdk
import { usePubSub } from "@videosdk.live/react-native-sdk";

// CHAT Topic
const { publish, messages } = usePubSub("CHAT");

// publish message
const sendMessage = () => {
  const message = "Hello People!";
  publish(message, { persist: true });
};

// get latest messages
console.log("Messages : ", messages);

Leave or End Meeting

const { leave, end } = useMeeting({});
const onPress = () => {
  // Only one participant will leave/exit the meeting; the rest of the participants will remain.
  leave();

  // The meeting will come to an end for each and every participant. So, use this function in accordance with your requirements.
  end();
};

Meeting Event callbacks

By registering callback handlers, VideoSDK sends callbacks to the client app whenever there is a change or update in the meeting after a user joins.

function onParticipantJoined(participant) {
  // This event will be emitted when a new participant joined the meeting.
  // [participant]: new participant who joined the meeting
  console.log(" onParticipantJoined", participant);
}
function onParticipantLeft(participant) {
  // This event will be emitted when a joined participant left the meeting.
  // [participantId]: id of participant who left the meeting
  console.log(" onParticipantLeft", participant);
}
const onSpeakerChanged = (activeSpeakerId) => {
  // This event will be emitted when any participant starts or stops screen sharing.
  // [activeSpeakerId]: Id of participant who shares the screen.
  console.log(" onSpeakerChanged", activeSpeakerId);
};
function onPresenterChanged(presenterId) {
  // This event will be emitted when a active speaker changed.
  // [presenterId] : Id of active speaker
  console.log(" onPresenterChanged", presenterId);
}
function onMeetingJoined() {
  // This event will be emitted when a localParticipant(you) successfully joined the meeting.
  console.log("onMeetingJoined");
}
function onMeetingLeft() {
  // This event will be emitted when a localParticipant(you) left the meeting.
  console.log("onMeetingLeft");
}
function onRecordingStarted() {
  // This event will be emitted when recording of the meeting is started.
  console.log(" onRecordingStarted");
}
function onRecordingStopped() {
  // This event will be emitted when recording of the meeting is stopped.
  console.log(" onRecordingStopped");
}

const { meetingId, meeting, localParticipant } = useMeeting({
  onParticipantJoined,
  onParticipantLeft,
  onSpeakerChanged,
  onPresenterChanged,
  onMeetingJoined,
  onMeetingLeft,
  onRecordingStarted,
  onRecordingStopped,
});

Participant Events Callback

By registering callback handlers, VideoSDK sends callbacks to the client app whenever a participant's video, audio, or screen share stream is enabled or disabled.

  function onStreamEnabled(stream) {
    // This event will be triggered whenever a participant's video, audio or screen share stream is enabled.
    console.log(" onStreamEnabled", stream);
  }
  function onStreamDisabled(stream) {
    // This event will be triggered whenever a participant's video, audio or screen share stream is disabled.
    console.log(" onStreamDisabled", stream);
  }

  const {
    displayName
    ...
  } = useParticipant(participantId,{
    onStreamEnabled,
    onStreamDisabled,
  });

If you want to learn more about the SDK, read the Complete Documentation of React Native VideoSDK

Project Description

Note :

• master branch: Better UI with One-to-One call experience.
• v1-code-sample branch: Simple UI with Group call experience.

App Behaviour with Different Meeting Types

• One-to-One meeting - The One-to-One meeting allows 2 participants to join a meeting in the app.

• Group Meeting - 🔜 COMING SOON

Project Structure

1. Create or join Meeting

• scenes/join/index.js: It shows the user with the option to create or join a meeting and to initiate webcam and mic status.

  • api.js : It incldes all the API calls for create and validate meeting.

  • If Join Meeting is clicked, it will show following:

    • EditText for ParticipantName - This edit text will contain name of the participant.
    • EditText for MeetingId - This edit text will contain the meeting Id that you want to join.
    • Join Meeting Button - This button will call api for join meeting with meetingId that you entered

  • If Create Meeting is clicked, it will show following:

    • EditText for ParticipantName - This edit text will contain name of the participant.
    • Join Meeting Button - This button will call api for join meeting with a new meetingId

  

2. PartcipantList

• scenes/meeting/ParticipantViewer/index.js and scenes/meeting/ParticipantViewer/ParticipantListItem.js files are used to show Participant list.

  

3. Chat

• scenes/meeting/ChatViewer/index.js: It contains the chat screen made using PubSub.

One-to-one

• scenes/meeting/MeetinContainer.js: It contains the complete layout for one to one meeting.

  • Meeting actions are handled using Menu.

    • MoreOptions:

      

    • AudioDeviceList:

      

    • LeaveOrEndDialog:

      

  • scenes/meeting/Components contains all the components that are used to create the one to one meeting screen.

Examples

• Prebuilt SDK Examples
• JavaScript SDK Example
• React JS SDK Example
• React Native SDK Example
• Flutter SDK Example
• Android SDK Example
• iOS SDK Example

Documentation

Read the documentation to start using Video SDK.

Community

• Discord - To get involved with the Video SDK community, ask questions and share tips.
• Twitter - To receive updates, announcements, blog posts, and general Video SDK tips.