Join a Room from a Client

npm install @videosdk.live/react-sdk

For the complete setup, see the React quick start.

npm install @videosdk.live/js-sdk

You can also load the SDK from the CDN:

<script src="https://sdk.videosdk.live/js-sdk/1.1.1/videosdk.js"></script>

For the complete setup, see the JavaScript quick start.

npm install @videosdk.live/react-native-sdk @videosdk.live/react-native-incallmanager react-native-safe-area-context

Register the SDK's native service before your application renders:

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

register();

For the complete setup, see the React Native quick start.

flutter pub add videosdk

For the complete setup, see the Flutter quick start.

Add the SDK dependency:

dependencies {
  implementation 'live.videosdk:rtc-android-sdk:2.2.0'
}

Add the required permissions:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

For the complete setup, see the Android quick start.

Add the SDK to your Podfile:

pod 'VideoSDKRTC', :git => 'https://github.com/videosdk-live/videosdk-rtc-ios-sdk.git'

Add camera and microphone permission descriptions:

<key>NSCameraUsageDescription</key>
<string>Camera permission description</string>

<key>NSMicrophoneUsageDescription</key>
<string>Microphone permission description</string>

For the complete setup, see the iOS quick start.

There is no REST endpoint that generates a token. Sign the JWT on your server using your VideoSDK API key and secret.

const jwt = require("jsonwebtoken");
const { v4: uuid } = require("uuid");

const token = jwt.sign(
  {
    apikey: process.env.VIDEOSDK_API_KEY,
    permissions: ["allow_join"],
    roomId,
    participantId: "user-123",
  },
  process.env.VIDEOSDK_SECRET,
  {
    algorithm: "HS256",
    expiresIn: "2h",
    jwtid: uuid(),
  }
);

import {
  MeetingProvider,
  useMeeting,
} from "@videosdk.live/react-sdk";

function App() {
  return (
    <MeetingProvider
      config={{
        meetingId: roomId,
        name: "C.V. Raman",
        micEnabled: true,
        webcamEnabled: true,
      }}
      token={token}
    >
      <MeetingView />
    </MeetingProvider>
  );
}

function MeetingView() {
  const {
    join,
    localParticipant,
    participants,
  } = useMeeting({
    onMeetingJoined: () => {
      console.log("joined");
    },
  });

  return (
    <button onClick={() => join()}>
      Join
    </button>
  );
}

Set joinWithoutUserInteraction on MeetingProvider if you want the participant to join automatically instead of explicitly calling join().

After joining:

• localParticipant represents the current participant.
• participants contains the remote participants, keyed by participant ID.
• onParticipantJoined and onParticipantLeft report participant changes.
• onPresenterChanged reports screen-share changes.
• useParticipant(participantId) exposes onStreamEnabled and onStreamDisabled.

See Participant events, Media events, and Meeting events.

window.VideoSDK.config(token);

const meeting = window.VideoSDK.initMeeting({
  meetingId: roomId,
  name: "Thomas Edison",
  micEnabled: true,
  webcamEnabled: true,
});

meeting.on("meeting-joined", () => {
  // meeting.localParticipant and meeting.participants are ready
});

await meeting.join();

After joining:

• meeting.localParticipant represents the current participant.
• meeting.participants contains remote participants keyed by participant ID.
• participant-joined and participant-left report participant changes.
• stream-enabled and stream-disabled report media changes.
• presenter-changed reports screen-share changes.

See Participant events, Stream events, and Meeting events.

import {
  MeetingProvider,
  useMeeting,
} from "@videosdk.live/react-native-sdk";

function App() {
  return (
    <MeetingProvider
      config={{
        meetingId: roomId,
        name: "Test User",
        micEnabled: true,
        webcamEnabled: true,
        defaultCamera: "front",
      }}
      token={token}
    >
      <MeetingView />
    </MeetingProvider>
  );
}

function MeetingView() {
  const {
    join,
    participants,
  } = useMeeting({});

  return (
    <Button
      title="Join"
      onPress={() => join()}
    />
  );
}

After joining:

• localParticipant represents the current participant.
• participants contains remote participants keyed by participant ID.
• onParticipantJoined and onParticipantLeft report participant changes.
• onPresenterChanged reports screen-share changes.
• useParticipant(participantId) exposes onStreamEnabled and onStreamDisabled.

See Participant events, Media events, and Meeting events.

import 'package:videosdk/videosdk.dart';

final Room room = VideoSDK.createRoom(
  roomId: roomId,
  token: token,
  displayName: "John Doe",
  micEnabled: true,
  camEnabled: true,
  defaultCameraIndex: kIsWeb ? 0 : 1,
);

room.on(Events.roomJoined, () {
  // room.localParticipant and room.participants are ready
});

room.join();

After joining:

• room.localParticipant represents the current participant.
• room.participants contains remote participants keyed by participant ID.
• Events.participantJoined and Events.participantLeft report participant changes.
• Events.streamEnabled and Events.streamDisabled report media changes.
• Events.presenterChanged reports screen-share changes.

See Participant events, Media events, and Room events.

Initialize VideoSDK once when the application starts, then configure and create a meeting for each room.

// once, in Application.onCreate()
VideoSDK.initialize(applicationContext)

// per meeting
VideoSDK.config(token)

val meeting = VideoSDK.initMeeting(
  this,
  roomId,
  "John Doe",
  micEnabled,
  webcamEnabled,
  null,
  null,
  false,
  null,
  null
)

meeting.addEventListener(
  object : MeetingEventListener() {
    override fun onMeetingJoined() {
      // meeting.localParticipant and meeting.participants are ready
    }
  }
)

meeting.join()

After joining:

• meeting.getLocalParticipant() represents the current participant.
• meeting.getParticipants() contains remote participants keyed by participant ID.
• MeetingEventListener receives participant and presenter events.
• ParticipantEventListener receives stream events.

See Participant events, Media events, and Meeting events.

import VideoSDKRTC

VideoSDK.config(token: token)

let meeting = VideoSDK.initMeeting(
  meetingId: roomId,
  participantName: "John Doe",
  micEnabled: true,
  webcamEnabled: true
)

meeting.addEventListener(self)
meeting.join()

Implement MeetingEventListener to know when the participant has joined:

extension MeetingViewController: MeetingEventListener {
  func onMeetingJoined() {
    // meeting.localParticipant and meeting.participants are ready
  }
}

After joining:

• meeting.localParticipant represents the current participant.
• meeting.participants contains remote participants keyed by participant ID.
• MeetingEventListener reports participant events.
• ParticipantEventListener reports media stream events.

See Participant events, Media events, and Meeting events.