How VideoSDK limits concurrent usage quota​

VideoSDK's approach to limiting usage focuses on concurrent usage rather than overall usage. Concurrent usage refers to the number of participants or requests that can be hosted or processed simultaneously.

For example, if there's a limit of 50 concurrent participants per organization, users can run multiple calls (sessions) simultaneously, with a maximum of 50 participants across all sessions combined.

How to view my current plan’s quota limits?​

To view the current quota limits on your organization, simply navigate to the VideoSDK Dashboard, go to your Profile section, and click on the Billing tab.

Free Plan​

Since, we’ve designed Free Plan for developers who are just exploring, we’ve kept the limits that would get you started without a hitch.

Organisations on Free Plan have the following limits on concurrent usage:

How to increase my limits?​

To increase your limits, simply upgrade your plan by providing billing details and credit card information.

Pay-as-you-Go Plan​

We've increased participant limits for this paid plan. This way, it won't significantly impact users heavily involved in production or integration.

Organisations on Pay-as-you-Go have the following limits on concurrent usage:

How to increase my limits?​

To increase your limits further more, simply get in touch with us. Contact us directly or reach out via email at support@videosdk.live, and we'll handle the rest gladly.

Enterprise Plan​

For Enterprise users, all limits are tailored to the specific needs. Customised limits ensure optimal performance for your unique requirements.

To get started as an Enterprise user, simply get in touch with us, explain your requirements and use case, and we’ll customise the quota and limits according to your needs.

Examples to understand concurrent limits​

Example #1

Let's say you're using video callings (RTC) in your organization on the Free Plan. In this scenario, you can concurrently host up to 50 participants. However, the number of calls (sessions) you initiate is unrestricted.

To simplify, you can run multiple sessions simultaneously, but concurrently, you can only accommodate a maximum of 50 participants across all sessions. If a 51st participant attempts to join, they won't be able to access the session until you upgrade your plan to increase your participant limits.

Example #2

Let’s say you're using live streaming in your organization on the Free Plan. In this setup, you can concurrently host up to 100 viewers joining the sessions. While you have the flexibility to host multiple live streaming sessions, the number of viewers joining session concurrently is restricted.

Example #3

Lets say you’re using video callings (RTC) in your organization on the Pay-as-you-Go Plan and you're hosting 5 concurrent calls (sessions), all of which are being recorded. Now, when you initiate the 6th call (session) and request recording, VideoSDK will not process your recording request. Instead, it will throw an error because you've reached your recording request limit.

If you have any questions regarding quota limits and pricing plan, post in our Discord community, contact us directly, or reach out to us on support@videosdk.live.

Welcome to the world of actionable insights and empowered decision-making. VideoSDK's session analytics dashboard is your gateway to understanding, optimizing, and elevating every aspect of your sessions.

Accessing Analytics Made Easy​

Navigating through session data is a breeze with VideoSDK. Simply head to your session page at https://app.videosdk.live/meetings/sessions, where a treasure trove of session information awaits.

How to Access Analytics?​

Open Session Analytics effortlessly by following these steps:

1. Click on Meeting-ID:
   • Directly access analytics by clicking on the meeting-ID within the session table.
2. Hover and Click View Analytics:
   • Hover over a specific meeting row to reveal the View Analytics button in the Actions Column.
   • Click on View Analytics to open the Session Overview sidebar, unlocking a wealth of insights.

There are three tabs available within the session analytics view:

1. Session Overview​

This tab provides an overview of the session, including its duration and participant details. You can explore individual participant statistics to understand their session performance better.

2. Errors​

In this tab, you can find information about any errors encountered during the session. It helps you identify and address issues like network problems or technical glitches promptly.

3. Session Stats​

Explore data and metrics sent and received by participants to measure performance of the session in this tab. It offers insights into data exchange among participants, including metrics on jitter, RTT, and packet loss, resolutions, and fps aiding in assessing communication efficiency.

Let's dive deeper into each of these tabs to gain a better understanding of session analytics.

Session Overview

The session overview page is your compass in the sea of data. Here's what you'll uncover:

• Meeting ID: Unique identifier for the meeting in the format of abcd-efgh-ijkl.
• Session ID: Unique identifier for each session, uniquely identified by its sessionId.
• Session Status: Indicates if the session is ongoing or ended.
• Session Initiating Time: Time taken by the first participant to establish the connection.
• Start and End Time: Marks the start and end of the session.
• Total Unique Participants Joined: Total number of unique participants in the session.
• Total Session Duration: Overall duration of the session from start to end.
• Total Participant Minutes: A sum of all participant duration.
• Recording, HLS, RTMP: Additional services used in the session.

Participant Table List​

• Participant ID: Unique identifier for each participant.
• Participant Name: Personalized identification for each participant.
• Join Time: Time taken by the participant to establish connection.
• Duration: Total time spent by this participant in the session.

Efficient Session Management with Actions​

Enhance your session management with streamlined actions:

• Kick Out Participants: Effortlessly remove/kickout participants from ongoing sessions.
• Detailed Participant Analytics:
• Hover over a specific participant row to reveal the View Stats button at the end of the row.
• Click on View Stats to open the Participant Overview sidebar.

Explore Participant Insights​

Discover valuable participant data that provides a clear view of engagement and experience:

• Participant ID: Unique identifier for each participant.
• Participant Name: Personalized identification for better interaction.
• Joined At: Indicates the precise moment when participant connects to the session.
• Left At: Indicates the precise moment when participant left the session.
• Total Duration: Total duration of participant within that session.
• Joining Time: Time taken by the this participant to establish the connection.
• Location: Approx. geographic location from where the participant joined.
• Platform: Specifies whether participants are using a desktop or mobile device.
• Device Info: Offers details regarding the participant's device.
• OS: Provides information about the participant's OS.
• Browser: Provides specifics about the participant's browser
• SDK Version: Indicates the version of the SDK used by participants.

Understanding Participant Call Health​

We've developed call health to offer a rapid assessment of participant performance during calls. This feature highlights the performance of audio, video, and screen sharing audio-video separately. We've utilized color theory, with green indicating good performance, orange for moderate, and red for poor performance, to enhance clarity. For detailed insights, simply hover over the bars

Participant Session Stats​

Dive into Participant Session Stats for valuable insights into your session experience! With just a click on View Session Stats at the bottom of the page, unlock a treasure trove of data crucial for understanding audio and video experiences.

Within this section, you can observe quality metrics for the selected participant, comparing them to others. Additionally, the Sessions Stats covers quality stats comparison for every participant. Keep reading to explore more about Session Stats.

Visualizing Session Performance from Both Sides

This section provides a two-sided view of your session's metrics.

• Left Side: Sender Participant Graph This section displays graphs representing the metrics sent by the sender participant. Here, you can see how the various factors impacted the data you transmitted.
• Right Side: Receiver Participant Graph On the right side, you'll find a dropdown menu where you can select a specific participant. Choosing a receiver will display graphs showcasing the metrics received by that participant. This allows you to compare the sending experience (left side) with the receiving experience (right side) for different participants.

See How Your Session Performed

These metrics give you a clear picture of your session's quality. Understanding them helps you spot any issues and keep things running smoothly. Let's dive into what each metric means!

Jitter: Imagine your internet connection like a bumpy road. Jitter is how much those bumps cause your signal to bounce around. Less jitter means a smoother ride for your data (audio and video, threshold ≤ 30ms).

RTT (Latency): This is how long it takes for data to travel between you and the server you're connected to. Think of it like the time it takes for a message to get delivered – a lower RTT means a faster delivery (affects both audio and video, threshold ≤ 300ms).

Bitrate: This measures the amount of data flowing through your connection per second. Imagine it like the width of a water pipe – a higher bitrate allows for more data to flow, which can be good for high-quality audio/video or fast downloads.

Packet Loss: Think of data traveling in tiny packets. Packet loss is when some of those packets get dropped along the way. More packet loss means information might be missing, affecting things like audio/video quality or lag in games (threshold ≤ 5%).

Resolution: This refers to the sharpness and detail of an image or video. Think of it like the number of pixels on your screen – a higher resolution means a crisper picture (Video Only).

FPS (Frames Per Second): This measures how many images (frames) are displayed on your screen every second. Imagine it like a flipbook – a higher FPS creates a smoother and more fluid animation or video experience (Video Only).

Investigate Session Errors

Get to the root of smoother sessions by addressing errors directly. Use the Errors tab to explore details of errors encountered during your session. Note: Session errors are visible with JS SDK v0.0.82 or higher, React SDK v0.1.85 or higher, and React Native v0.1.6 or newer versions.

• Participant Name & ID: Quickly identify the participant associated with each error for swift resolution.
• Error Types: Understand the different types of errors encountered, such as network issues or connection disruptions.
• Detailed Descriptions: Access clear explanations of errors to take actionable steps towards solution.

Analyse Session Stats

Similar to Participant Session Stats, this tab covers quality statistics sent by individual participants. You can select any participant to compare effectively with others.

Choose a sender participant from the dropdown menu on the left and select a recipient on the right to compare data over different time frames. This allows you to identify and explore issues within specific durations.

This tab covers the same metrics as covered in the participant session stats: Jitter, RTT (Latency), Bitrate, Packet-loss, Resolution (Video only), and FPS (Video only).

Conclusion​

This tutorial offers a comprehensive overview of Session Analytics, empowering you to maximize its potential. Dive deep into call performance, audio-video quality, participant insights, common errors, and their resolutions through detailed analytics. Your feedback is invaluable in shaping our products to suit your needs better, so please take a moment to leave your thoughts at the bottom of the session overview tab.

Stay tuned for exciting updates in Session Analytics, including a Session Timeline view, enhanced error coverage spanning SDK and infrastructure, and much more. We're committed to continuously improving your experience and providing valuable insights for your sessions.

Transcription API empowers developers to convert spoken language into written text automatically. In this tutorial, we'll delve into how to effectively utilize a Transcription API to transcribe meeting recordings. We'll explore two distinct methods for initiating transcription: enabling transcription via the start recording API and enabling transcription via auto-configuration while creating a meetingId using API.

This feature is currently in BETA.

Prerequisites​

Before diving into the Transcription API, ensure you have:

• Basic knowledge of REST APIs.
• Understanding of JSON formatting.
• An Auth Token for the Transcription API.

Step 1: Understand the workflow​

Before enabling transcription and summary features in VideoSDK, it's important to understand the basic workflow. Transcription and summarization occur after recording, meaning that recording is a necessary step before these features can be used. To activate the transcription and summary APIs, you must first start recording using either the Start Recording API or by auto config recording within the Create MeetingId API. To use transcription, recordings needs to be stored in VideoSDK Cloud

Step 2: Choosing Your Method​

There are two primary methods for initiating transcription

• via the start recording API
• via auto configuration while creating a meeting API

Choose the method that best fits your use case.

Option 1: Enabling Transcription via Recording API​

In this method, transcription is enabled by including a transcription object with the property enabled set to true in the start recording API request. Below is an example implementation in Node.js:

Request

import fetch from "node-fetch";
const options = {
  method: "POST",
  headers: {
    Authorization: "YOUR_TOKEN",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    roomId: "room-id",
    transcription: {
      enabled: true,
      summary: {
        enabled: true,
      },
    },
  }),
};
const url = `https://api.videosdk.live/v2/recordings/start`;
const response = await fetch(url, options);
const data = await response.json();
console.log(data);

Response

"Recording started successfully";

Replace room-id with the ID of your meeting or room and YOUR_TOKEN with your auth token.

Additionally, you can enable summary feature by setting the enabled property to true within the summary object.

Option 2: Enabling Transcription via Auto Configuration while creating meeting using API​

If you prefer transcription to be enabled by default when creating a meeting, you can configure this during the meeting creation process. Here's an example implementation in Node.js:

Request

import fetch from 'node-fetch';
const options = {
	method: "POST",
	headers: {
		"Authorization": "$YOUR_TOKEN",
		"Content-Type": "application/json",
	},
	body: JSON.stringify({
				"autoStartConfig" : {
					"recording":
						"transcription": {
							"enabled": true
              "summary": {
                "enabled": true
						  },
					}
				}
			}),
};
const url= `https://api.videosdk.live/v2/rooms`;
const response = await fetch(url, options);
const data = await response.json();
console.log(data);

Response

{
  "roomId": "abc-xyzw-lmno",
  "disabled": false,
  "createdAt": "2024-02-27T04:49:11.024Z",
  "updatedAt": "2024-02-27T04:49:11.024Z",
  "id": "623d49c760a18e699abcc8a4",
  "links": {
    "get_room": "https://api.videosdk.live/v2/rooms/abc-xyzw-lmno",
    "get_session": "https://api.videosdk.live/v2/sessions/"
  }

Replace "YOUR_TOKEN" with your authentication token and set the summary object's enabled property to true if you wish to utilize the summary feature.

In this method, recording will automatically start with transcription enabled when initiating a session with a specified Meeting ID or Room ID.

Step 3: Conducting a Meeting​

You can initiate a meeting using any of our SDKs (Prebuilt, React, React Native, JS, Flutter, Android, iOS).

• Option 1: If you opt to enable transcription via the recording API, pass the transcription object as described in Step 2. The recording will commence with the transcription feature enabled.
• Option 2: If you prefer enabling the transcription feature during meeting creation using the API, the recording will automatically begin with transcription enabled when initiating your meeting.

Step 4: Retrieving Transcription and Summary​

After the recording concludes and transcription was enabled for that recording or meeting, you can retrieve the transcription and summary using the API.

To retrieve the transcription of a meeting, make a GET request to the Transcription API endpoint with the meeting ID. Below is an example using Node.js:

Request

import fetch from "node-fetch";
const options = {
  method: "GET",
  headers: {
    Authorization: "$YOUR_TOKEN",
    "Content-Type": "application/json",
  },
};
const roomId = "room-id";
const url = `https://api.videosdk.live/ai/v1/post-transcriptions?roomId=${roomId}`;
const response = await fetch(url, options);
const data = await response.json();
console.log(data);

Response

{
    "pageInfo": {
        "currentPage": 1,
        "perPage": 20,
        "lastPage": 1,
        "total": 1
    },
    "transcriptions": [
        {
            "id": "transcription-id",
            "status": "completed",
						"roomId": "room-id",
						"sessionId": "session-id",
            "recordingId": "recording-id",
            "filePath": "https://cdn.videosdk.live/encoded/videos/dummy.mp4",
            "transcriptionFilePaths": {
                "json": "https://cdn.videosdk.live/transcriptions/dummy/dummy.json",
                "srt": "https://cdn.videosdk.live/transcriptions/dummy/dummy.srt",
                "txt": "https://cdn.videosdk.live/transcriptions/dummy/dummy.txt",
                "tsv": "https://cdn.videosdk.live/transcriptions/dummy/dummy.tsv",
                "vtt": "https://cdn.videosdk.live/transcriptions/dummy/dummy.vtt"
            },
            "summarizedFilePaths": {
                "txt": "https://cdn.videosdk.live/transcriptions/dummy/dummy-summary.txt"
            },
            "userStorage": null,
            "start": "2024-02-27T16:00:36.828Z",
            "end": "2024-02-27T16:01:46.939Z"
        }
    ]
}

Replace 'YOUR_AUTH_TOKEN' with your authentication token and 'room-id' with the ID of your meeting or room.

Here, you will receive transcriptionFilePaths object containing paths of the transcribed files with various formats such as json, srt, txt, tsv, vtt.

Additionally, if you have enabled summary feature, you will receive a summarizedFilePaths object containing path of the summarized text file.

Conclusion​

In this tutorial, you've learned how to enable transcription for meetings using the Transcription API. By following the steps outlined above, you can easily integrate transcription capabilities into your applications and retrieve transcribed text and summaries for your meetings. Transcription can greatly enhance the accessibility and usability of your meeting recordings, making them more searchable and comprehensible. Experiment with these methods and explore further possibilities to unlock the full potential of transcription in your applications and enhance the efficiency and productivity of your meetings.

We're thrilled to welcome you on your journey from Twilio Video to VideoSDK! As you begin your migration, prepare to embrace a world of exciting possibilities.

VideoSDK offers a global infrastructure for seamless video and audio communication around the world, while its unwavering commitment to classic call quality provides reliability, scalability, and robust security. Bring your projects to life with a variety of features including audio, video, screen sharing, chat, and participatory moderation.

The Video SDK integrates seamlessly into your existing workflow with the ease of REST API and Webhooks, ensuring a smooth transition while maintaining flexibility and extensibility.

Please explore the resources in this guide and feel free to contact our support team with any questions or concerns.

Migration Guide​

We are committed to making this migration process as easy and efficient as possible. This step-by-step guide will serve as your roadmap, providing comprehensive instructions and valuable insights to ensure a successful transition.

Feature Map Comparison​

VideoSDK not only matches but surpasses Twilio Video with additional features. This migration is not just a transfer; It's an upgrade to a world of enhanced possibilities. Elevate your applications effortlessly!

We are excited to welcome you to the VideoSDK community and look forward to empowering your projects with the future of video communication.

This migration guide provides a seamless transition from Twilio to VideoSDK, offering a simplified and intuitive comparison of key elements. Whether you're already familiar with Twilio or new to both platforms, this guide ensures a smooth migration process.

We're here to help you switch from Twilio to VideoSDK. We'll use the Twilio Quickstart sample app as a starting point. You can find the code for the sample app here: https://github.com/twilio/video-quickstart-ios

Concept​

1. Meeting / Room:
   • This is like a virtual place where people can have real-time conversations using voice, video, and screen sharing.
   • Think of it as a virtual room where participants interact.
   • Each meeting or room has a unique ID (meetingId or roomId).
2. Participant:
   • Both VideoSDK and Twilio Video includes the concepts of Participant.
   • There are two types:
     • Local Participant: This is you on your device. You control your own audio and video.
     • Remote Participant: This is someone else in the meeting. They receive your audio and video and can send their own.
3. MediaStream & Track:
   • MediaStream: Think of it as a bundle of audio and video tracks that are shared in real-time between participants.
   • Track: This is like a continuous flow of audio or video. For example, your video feed from the camera is a video track, and the audio from the microphone is an audio track.
4. Session:
   • A session is like a specific instance of an ongoing meeting or room.
   • Imagine a meeting happening right now as a session.
   • Each session has its own ID (sessionId).

If you want to learn about this concept in depth you can refer this guide Concept and Architecture

VideoSDK Setup​

API Key​

In Twilio you have to create API key manually(using CLI or from Dashboard), in VideoSDK the default API key is automatically created in VideoSDK dashboard.

Token​

In Twilio, you can generate a token using CLI or the Twilio helper library in the backend environment.

For VideoSDK, there are two ways to generate a token. You can generate it from the VideoSDK Dashboard or in your backend.

In Twilio, you need to provide a different token for each participant, which can be complex during development. In VideoSDK, it is optional to specify the same token for different participants. You can also restrict a specific token for a specific meetingID or participantID.

Room Creation​

Before integration, create a room using the REST API Rooms resource. Refer to the docs for details.

cURL -XPOST <https://api.videosdk.live/v2/rooms> \\
		 -H 'Authorization: $VIDEOSDK_TOKEN' \\
		 -H 'Content-Type: application/json'

Step 1 : Integrate Video SDK​

There is two ways to implement the VideoSDK dependency into your application:

1. SPM (Swift Package Manager):

   • Select File → Add Package Dependencies and search below url and press Add Package button.

   https://github.com/videosdk-live/videosdk-rtc-ios-spm
   

2. Cocoa pods:

   • You can add the dependency in the podfile.

   use_frameworks!
   
   target 'VideoSDK_Example' do
   
   	// write below line for adding the dependency of VideoSDK
   	pod 'VideoSDKRTC', :git => 'https://github.com/videosdk-live/videosdk-rtc-ios-sdk.git'
   
   end
   

   run pod install command in terminal at location of the application to install the dependency in the application.

Step 2 : Connect to a room​

• In Twilio, You can initiate a connection to a video room using TwilioVideoSDK.connect(). This method sets up a connection by specifying the connection options and delegate of the meeting.
• In VideoSDK, the process begins with setting up the SDK by initializing it and providing authentication through a token. After that you can initialize the meeting with required params such as meetingId, participantId, participantName,  micEnabled,  webcamEnabled and more. To join the meeting/room, you can simply call the meeting.join() method.

@IBAction func createARoom(sender: AnyObject) {
    let connectOptions = ConnectOptions(token: accessToken) { (builder) in
        builder.roomName = "my-room"
    }
    room = TwilioVideoSDK.connect(options: connectOptions, delegate: self)
}

// MARK: RoomDelegate

func roomDidConnect(room: Room) {
    print("Did connect to Room")

    if let localParticipant = room.localParticipant {
        print("Local identity \(localParticipant.identity)")

        // Set the delegate of the local particiant to receive callbacks
        localParticipant.delegate = self
    }
}

private var meeting: Meeting?

override func viewDidLoad() {
    super.viewDidLoad()

    // Configure authentication token got earlier
    VideoSDK.config(token: VIDEOSDK_ACCESS_TOKEN)

    // create a new meeting instance
    meeting = VideoSDK.initMeeting(
        meetingId: meetingId, // required
        participantName: participantName, // required
        micEnabled: <flag-to-enable-mic>, // optional, default: true
        webcamEnabled: <flag-to-enalbe-camera> // optional, default: true
    )

	// join
	meeting?.join();
}

Step 3 : Handle Connected Participants​

• In both Twilio and VideoSDK, you can utilise event listeners attached to the room or meeting object to capture crucial moments during a video conference. This listener include the meeting being connected or disconnected and participants joining or leaving the meeting events.

// MARK: RoomDelegate

func roomDidConnect(room: Room) { ... }

func participantDidConnect(room: Room, participant: RemoteParticipant) { ... }

func participantDidDisconnect(room: Room, participant: RemoteParticipant) { ... }

func roomDidDisconnect(room: Room, error: Error?) { ... }

// MARK: - MeetingEventListener [RoomDelegate]

extension YourViewController: MeetingEventListener {
    // [roomDidConnect]
    func onMeetingJoined() { ... }

    // [roomDidDisconnect]
    func onMeetingLeft() { ... }

    // [participantDidConnect]
    func onParticipantJoined(_ participant: Participant) { ... }

    // [participantDidDisconnect]
    func onParticipantLeft(_ participant: Participant) { ... }
}

Mapping Twilio’s events to VideoSDK​

Below is a list of all Twilio events used in this demo and VideoSDK’s equivalents.

Step 4 : Set up local media​

Capture local media​

• In Twilio, to capture local participant's audio data, you need to provide track for audio and video while connecting the meeting.
• In VideoSDK, capturing tracks for a local participant is more straightforward. The iOS SDK automatically captures both audio and video when you set micEnabled and webCamEnabledto true in the initMeeting() method. There's no need for explicit track creation; the SDK handles it automatically based on the provided configuration.

Render local participant’s video​

• Twilio provides a LocalVideoTrack component to display participants' video feeds.
  • To display the video from the local participant, you have to link the LocalVideoTrack to the TVIVideoView using the addRenderer method: videoTrack.addRenderer(renderer).
• Similarly, VideoSDK offers a VideoView component to display participants' video stream.
  • To display the local participant's video, you have to add the track to the RTCMTLVideoView using the add method: videotrack.add(videoView).
  • When you want to stop displaying the local participant's video in the RTCMTLVideoView, you can remove the track using videotrack.remove(videoView) method.
• In Twilio , LocalVideoTrack is used to render a local participant’s video. However, VideoSDK have events onStreamEnabled and onStreamDisabled in ParticipantEventListener from which you can get track of audio, video.
  • onStreamEnabled() - onStreamEnabled() is a callback which gets triggered whenever a participant's video, audio or screen share stream is enabled.
  • onStreamDisabled() - onStreamDisabled() is a callback which gets triggered whenever a participant's video, audio or screen share stream is disabled.

// Use CameraSource to produce video from the device's front camera.

if let camera = CameraSource(delegate: self),
    let videoTrack = LocalVideoTrack(source: camera) {

    // VideoView is a VideoRenderer and can be added to any VideoTrack.
    let renderer = VideoView(frame: view.bounds)

if let camera = TVICameraCapturer(source: .frontCamera),
    let videoTrack = TVILocalVideoTrack(capturer: camera) {

    // TVIVideoView is a TVIVideoRenderer and can be added to any TVIVideoTrack.
    let renderer = TVIVideoView(frame: view.bounds)

    // Add renderer to the video track
    videoTrack.addRenderer(renderer)

    self.localVideoTrack = videoTrack
    self.camera = camera
    self.view.addSubview(renderer)
} else {
    print("Couldn't create CameraCapturer or LocalVideoTrack")
}

// MARK: - ParticipantEventListener

extension YourViewController: ParticipantEventListener {
    /// Participant has enabled mic, video or screenshare
    func onStreamEnabled(_ stream: MediaStream, forParticipant participant: Participant) {
        if stream.kind == .state(value: .video)  {
            // show stream in cell
            if let cell = self.cellForParticipant(participant) {
                cell.updateView(forStream: stream, enabled: true)
            }
        } else { ... }
    }

    /// Participant has disabled mic, video or screenshare
    func onStreamDisabled(_ stream: MediaStream, forParticipant participant: Participant) {
		if stream.kind == .state(value: .video) {
	        // hide stream in cell
	        if let cell = self.cellForParticipant(participant) {
	            cell.updateView(forStream: stream, enabled: false)
            }
        } else { ... }
    }
}

Step 5 : Working with Remote Participants​

Get Connected Participants​

• In Twilio, you can get the all the connected remote participants through remoteParticipants property of Room class.
• Similarly, In VideoSDK you can get all the connected participant using  participants property of Meeting class.

// MARK: RoomDelegate

func roomDidConnect(room: Room) {
    //...
    // Connected participants already in the room
    print("Number of connected Participants \(room.remoteParticipants.count)")

    // Set the delegate of the remote participants to receive callbacks
    for remoteParticipant in room.remoteParticipants {
        remoteParticipant.delegate = self
    }
}

// Get the first participant from the meeting
let participant = meeting.participants.first?.value;
print("(participant.displayName) is in the room.");

Display a Remote Participant's Video​

• In Twilio, you receive events didSubscribeToVideoTrack whenever a remote participant enabled their webcam. These events notify you when a participant starts sharing their video.
• Similarly, in VideoSDK, you have onStreamEnabled and onStreamDisabled events. These events serve a similar purpose for both local and remote participants, triggered whenever participant enabled or disabled their webcam respectively.

// MARK: RemoteParticipantDelegate

/*
 * In the Participant Delegate, we can respond when the Participant adds a Video
 * Track by rendering it on screen.
 */
func didSubscribeToVideoTrack(videoTrack: RemoteVideoTrack,
                              publication: RemoteVideoTrackPublication,
                              participant: RemoteParticipant) {

    print("Participant \(participant.identity) added a video track.")

    if let remoteView = VideoView.init(frame: self.view.bounds,
                                       delegate:self) {

        videoTrack.addRenderer(remoteView)
        self.view.addSubview(remoteView)
        self.remoteView = remoteView
    }
}

// MARK: VideoViewDelegate

// Lastly, we can subscribe to important events on the VideoView
func videoViewDimensionsDidChange(view: VideoView, dimensions: CMVideoDimensions) {
    print("The dimensions of the video track changed to: \(dimensions.width)x\(dimensions.height)")
    self.view.setNeedsLayout()
}

// MARK: - MeetingEventListener

extension YourViewController: MeetingEventListener {
    func onParticipantJoined(_ participant: Participant) {
        // add listener
        participant.addEventListener(self)
     }
}

// MARK: - ParticipantEventListener

extension YourViewController: ParticipantEventListener {

    /// Participant has enabled mic, video or screenshare
    func onStreamEnabled(_ stream: MediaStream, forParticipant participant: Participant) {
        if stream.kind == .state(value: .video)  {
            // show stream in cell
            if let cell = self.cellForParticipant(participant) {
                cell.updateView(forStream: stream, enabled: true)
            }
        } else {
            if let cell = self.cellForParticipant(participant) {
                cell.updateView(forStream: stream, enabled: true)
            }
        }
    }

    /// Participant has disabled mic, video or screenshare
    func onStreamDisabled(_ stream: MediaStream, forParticipant participant: Participant) {
        if stream.kind == .state(value: .video) {
	          // hide stream in cell
	          if let cell = self.cellForParticipant(participant) {
	              cell.updateView(forStream: stream, enabled: false)
            }
        } else {
            if let cell = self.cellForParticipant(participant) {
                cell.updateView(forStream: stream, enabled: false)
            }
        }
    }
}

Disconnect from a Room​

• In Twilio, you have the ability to disconnect from a room in which you are currently participating. Other Participants will receive a participantDisconnected event.
• In VideoSDK, you can also disconnect from a room you are currently participating in. Other Participants will receive a onParticipantLeft event, while the local participant will receive a onMeetingLeft event.

// To disconnect from a Room, we call:
room?.disconnect()

// This results in a callback to RoomDelegate#roomDidDisconnect(room: Room, error: Error?)

// MARK: RoomDelegate
func roomDidDisconnect(room: Room, error: Error?) {
    print("Disconnected from room \(room.name)")
}

// MARK: - MeetingEventListener [RoomDelegate]

extension YourViewController: MeetingEventListener {

    // event after meeting?.end()
    func onMeetingLeft() { ... }

	// event after meeting?.leave()
    func onParticipantLeft(_ participant: Participant) { ... }
}

// To leave the meeting without removing all the participant
// you need to call leave() of the Meeting class.
meeting?.leave()


// To leave the meeting by removing all the participant
// you need to call end() of the Meeting class.
meeting?.end();

Conclusion​

As you conclude this migration journey, you've successfully adapted your application from Twilio to VideoSDK.

Feel free to explore the developed project's codebase for a hands-on understanding of VideoSDK integration. As you transition, VideoSDK empowers your application with robust real-time communication features, providing a foundation for future scalability and innovation.

Contact Us​

For any further assistance, questions, or community engagement, we welcome you to join our Discord channel. Connect with fellow developers, share insights, and stay updated on the latest developments.

If you require developer support or need personalized assistance, you can schedule a session with our team through our Developer Support portal. We are here to ensure a smooth integration and address any queries you may have. Your success with VideoSDK is our priority.

Welcome to your smooth transition to VideoSDK with JavaScript!

This comprehensive guide empowers you to seamlessly migrate from Twilio to VideoSDK in Javascript. We understand that adapting to new technology can be challenging, which is why we've designed this guide to be clear, concise, and informative.

We've created a straightforward comparison of Twilio and VideoSDK elements, making it easy to identify key differences and understand their corresponding counterparts. Whether you're a seasoned Twilio user or new to both platforms, this guide caters to your level of expertise, ensuring a smooth learning curve.

This migration guide provides a seamless transition from Twilio to VideoSDK, offering a simplified and intuitive comparison of key elements. Whether you're already familiar with Twilio or new to both platforms, this guide ensures a smooth migration process.

Getting Started​

To facilitate the transition, we'll leverage the familiar Twilio Quickstart sample app as a starting point. You can find the code for the app readily available here:https://github.com/twilio/video-quickstart-js

Concept​

1. Meeting / Room:
   • This is like a virtual place where people can have real-time conversations using voice, video, and screen sharing.
   • Think of it as a virtual room where participants interact.
   • Each meeting or room has a unique ID (meetingId or roomId).
2. Participant:
   • Both VideoSDK and Twilio Video includes the concepts of Participant.
   • There are two types:
     • Local Participant: This is you on your device. You control your own audio and video.
     • Remote Participant: This is someone else in the meeting. They receive your audio and video and can send their own.
3. MediaStream & Track:
   • MediaStream: Think of it as a bundle of audio and video tracks that are shared in real-time between participants.
   • Track: This is like a continuous flow of audio or video. For example, your video feed from the camera is a video track, and the audio from the microphone is an audio track.
4. Session:
   • A session is like a specific instance of an ongoing meeting or room.
   • Imagine a meeting happening right now as a session.
   • Each session has its own ID (sessionId).

If you want to learn about this concept in depth you can refer this guide Concept and Architecture

VideoSDK Setup​

API Key​

In Twilio you have to create API key manually(using CLI or from Dashboard), in VideoSDK the default API key is automatically created in VideoSDK dashboard.

Token​

In Twilio, you can generate a token using CLI or the Twilio helper library in the backend environment.

For VideoSDK, there are two ways to generate a token. You can generate it from the VideoSDK Dashboard or in your backend.

In Twilio, you need to provide a different token for each participant, which can be complex during development. In VideoSDK, it is optional to specify the same token for different participants. You can also restrict a specific token for a specific meetingID or participantID.

Installation​

You can install the VidoeSDK library using NPM.

npm install @videosdk.live/js-sdk

yarn add @videosdk.live/js-sdk

You can also include it in your application using our CDN.

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

Using this method, VideoSDK will set a browser global:

const VideoSDK = window.VideoSDK;

Room Creation​

Before integration, create a room using the REST API Rooms resource. Refer to the docs for details.

cURL -XPOST <https://api.videosdk.live/v2/rooms> \\
		 -H 'Authorization: $VIDEOSDK_TOKEN' \\
		 -H 'Content-Type: application/json'

Step 1 : Connect to a Room​

• In Twilio, you can connect to a room using the video.connect() method, which accepts the token and connectOptions as parameters.
• In VideoSDK, you need to first configure the token using VideoSDK.config('TOKEN'), and then initialize VideoSDK using the initMeeting method, which accepts parameters such as the meetingId and participant name. You can refer to other parameters from this reference.
• When joining and leaving a room, the Twilio Local Participant receives the connected and disconnected events of the room.
• On the other hand, the VideoSDK Local Participant receives the meeting-joined and meeting-left events of the meeting when joining and leaving the room.

const video = Twilio.Video;
function initializeMeeting() {
  connect("$TOKEN", { name: "my-new-room" }).then(
    (room) => {
      console.log(`Successfully joined a Room: ${room}`);
      room.on("connected", (participant) => {
        console.log(`Local Participant Joined Successfully`);
      });
      room.on("disconnected", (participant) => {
        console.log(`Local Participant Left the Room`);
      });
    },
    (error) => {
      console.error(`Unable to connect to Room: ${error.message}`);
    }
  );
}

let meeting = null; // Declare global variable

function initializeMeeting() {
  window.VideoSDK.config("$TOKEN");

  let meetingId = "abcd-efgh-ijkl"; // You can replace the meetingId

  meeting = window.VideoSDK.initMeeting({
    meetingId: meetingId, // required
    name: "The Migrator", // required
    micEnabled: true, // optional, default: true
    webcamEnabled: true, // optional, default: true
  });

  meeting.join();

  meeting.on("meeting-joined", () => {
    console.log(`Local Participant Joined Successfully`);
  });

  meeting.on("meeting-left", () => {
    console.log(`Local Participant Left the Room`);
  });
}

Step 2 : Render Local Participant​

• In Twilio and VideoSDK, you can access the localParticipant by using room.localParticipant and meeting.localParticipant respectively.
• To get the MediaStream in VideoSDK, listen for the stream-enabled event of the Participant class and set the audio and video tracks accordingly.
• In the code snippet below, we have defined the magic functions createVideoElement, createAudioElement, and setTrack to help render the Local and Remote Participants easily.
• VideoSDK automatically detaches the MediaStream Tracks when you leave the meeting. Additionally, you can pause and resume the participant stream using the pause() and resume() methods of the Stream Class.

function setupParticipantContainer(participant, room) {
  const { identity, sid } = participant;

  // Add a container for the Participant's media.
  const $container =
    $(`<div class="participant" data-identity="${identity}" id="${sid}">
    <audio autoplay ${
      participant === room.localParticipant ? "muted" : ""
    } style="opacity: 0"></audio>
    <video autoplay muted playsinline style="opacity: 0"></video>
  </div>`);

  // Add the Participant's container to the DOM.
  $participants.append($container);
}

function participantConnected(participant, room) {
  // Set up the Participant's media container.
  setupParticipantContainer(participant, room);

  // Handle the TrackPublications already published by the Participant.
  participant.tracks.forEach((publication) => {
    trackPublished(publication, participant);
  });

  // Handle theTrackPublications that will be published by the Participant later.
  participant.on("trackPublished", (publication) => {
    trackPublished(publication, participant);
  });
}

function trackPublished(publication, participant) {
  // If the TrackPublication is already subscribed to, then attach the Track to the DOM.
  if (publication.track) {
    attachTrack(publication.track, participant);
  }

  // Once the TrackPublication is subscribed to, attach the Track to the DOM.
  publication.on("subscribed", (track) => {
    attachTrack(track, participant);
  });

  // Once the TrackPublication is unsubscribed from, detach the Track from the DOM.
  publication.on("unsubscribed", (track) => {
    detachTrack(track, participant);
  });
}

function attachTrack(track, participant) {
  // Attach the Participant's Track to the thumbnail.
  const $media = $(`div#${participant.sid} > ${track.kind}`, $participants);
  $media.css("opacity", "");
  track.attach($media.get(0));

  // If the attached Track is a VideoTrack that is published by the active
  // Participant, then attach it to the main video as well.
  if (track.kind === "video" && participant === activeParticipant) {
    track.attach($activeVideo.get(0));
    $activeVideo.css("opacity", "");
  }
}

function detachTrack(track, participant) {
  // Detach the Participant's Track from the thumbnail.
  const $media = $(`div#${participant.sid} > ${track.kind}`, $participants);
  const mediaEl = $media.get(0);
  $media.css("opacity", "0");
  track.detach(mediaEl);
  mediaEl.srcObject = null;

  // If the detached Track is a VideoTrack that is published by the active
  // Participant, then detach it from the main video as well.
  if (track.kind === "video" && participant === activeParticipant) {
    const activeVideoEl = $activeVideo.get(0);
    track.detach(activeVideoEl);
    activeVideoEl.srcObject = null;
    $activeVideo.css("opacity", "0");
  }
}

function initializeMeeting() {
  // ...

  // Handle the LocalParticipant's media.
  // participantConnected(room.localParticipant, room);

  // creating local participant
  createLocalParticipant();

  // setting local participant stream
  meeting.localParticipant.on("stream-enabled", (stream) => {
    setTrack(stream, null, meeting.localParticipant, true);
  });

  // ...
}

// creating video element
function createVideoElement(pId, name) {
  let videoFrame = document.createElement("div");
  videoFrame.setAttribute("id", `f-${pId}`);

  //create video
  let videoElement = document.createElement("video");
  videoElement.classList.add("video-frame");
  videoElement.setAttribute("id", `v-${pId}`);
  videoElement.setAttribute("playsinline", true);
  videoElement.setAttribute("width", "300");
  videoFrame.appendChild(videoElement);

  let displayName = document.createElement("div");
  displayName.innerHTML = `Name : ${name}`;

  videoFrame.appendChild(displayName);
  return videoFrame;
}

// creating audio element
function createAudioElement(pId) {
  let audioElement = document.createElement("audio");
  audioElement.setAttribute("autoPlay", "false");
  audioElement.setAttribute("playsInline", "true");
  audioElement.setAttribute("controls", "false");
  audioElement.setAttribute("id", `a-${pId}`);
  audioElement.style.display = "none";
  return audioElement;
}

// creating local participant
function createLocalParticipant() {
  let localParticipant = createVideoElement(
    meeting.localParticipant.id,
    meeting.localParticipant.displayName
  );
  videoContainer.appendChild(localParticipant);
}

// setting media track
function setTrack(stream, audioElement, participant, isLocal) {
  if (stream.kind == "video") {
    isWebCamOn = true;
    const mediaStream = new MediaStream();
    mediaStream.addTrack(stream.track);
    let videoElm = document.getElementById(`v-${participant.id}`);
    videoElm.srcObject = mediaStream;
    videoElm
      .play()
      .catch((error) =>
        console.error("videoElem.current.play() failed", error)
      );
  }
  if (stream.kind == "audio") {
    if (isLocal) {
      isMicOn = true;
    } else {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(stream.track);
      audioElement.srcObject = mediaStream;
      audioElement
        .play()
        .catch((error) => console.error("audioElem.play() failed", error));
    }
  }
}

Step 3 : Handle Connected Participants​

• To receive notifications when a remote participant joins or leaves a call in Twilio, you can use the participantConnected and participantDisconnected events of the room.
• Similarly, in VideoSDK, you can use the participant-joined and participant-left events of the meeting to be notified when a remote participant joins or leaves the call.
• In addition, the stream-enabled event of the Participant class is used to manage the media track of a specific participant by associating it with the appropriate video or audio element.

function initializeMeeting() {
  // ...

  // Subscribe to the media published by RemoteParticipants already in the Room.
  room.participants.forEach((participant) => {
    participantConnected(participant, room);
  });

  // Subscribe to the media published by RemoteParticipants joining the Room later.
  room.on("participantConnected", (participant) => {
    participantConnected(participant, room);
  });

  // Handle a disconnected RemoteParticipant.
  room.on("participantDisconnected", (participant) => {
    participantDisconnected(participant, room);
  });
}

function participantDisconnected(participant, room) {
  // Remove the Participant's media container.
  $(`div#${participant.sid}`, $participants).remove();
}

function initializeMeeting() {
  // ...

  // participant joined
  meeting.on("participant-joined", (participant) => {
    let videoElement = createVideoElement(
      participant.id,
      participant.displayName
    );
    let audioElement = createAudioElement(participant.id);

    participant.on("stream-enabled", (stream) => {
      setTrack(stream, audioElement, participant, false);
    });
    videoContainer.appendChild(videoElement);
    videoContainer.appendChild(audioElement);
  });

  // participants left
  meeting.on("participant-left", (participant) => {
    let vElement = document.getElementById(`f-${participant.id}`);
    vElement.remove(vElement);

    let aElement = document.getElementById(`a-${participant.id}`);
    aElement.remove(aElement);
  });

  // ...
}

Mapping Twilio’s events to VideoSDK​

Below is a list of all Twilio events used in this demo and VideoSDK’s equivalents.

Step 4 : Mute and UnMute Your Local Media​

• In Twilio, you can mute or unmute your LocalAudioTracks (microphone) and LocalVideoTracks (camera) by calling the disable or enable method.
• In VideoSDK, you can use the muteMic function for the microphone and the disableWebcam function for the camera.