Skip to main content

Client Setup

Prebuilt SDK enables opportunity to integrate real-time communication SDK witout writing explicit code. It just requires 10 minutes to integrate.

It supports all the modern frameworks such as plain JavaScript, React JS, Vue and Angular.

note

Also check out this example code on github or download the full source code and unzip on your computer to get started quickly.

Setup Meeting using npm package manager​

Step 1: Install Package​

npm install @videosdk.live/rtc-js-prebuilt

Step 2: Initialize Meeting​

Copy API key generated from Signup & Create API Key , paste it in to apiKey attribute.

import React, { useEffect } from "react";
import { VideoSDKMeeting } from "@videosdk.live/rtc-js-prebuilt";

export default function App() {
  useEffect(() => {
    const config = {
      name: "John Doe",
      apiKey: "<API KEY>", // generated in step 1
      meetingId: "milkyway", // enter your meeting id

      containerId: null,

      /**
       FEATURE ATTRIBUTES
      */
    };

    const meeting = new VideoSDKMeeting();
    meeting.init(config);
  }, []);

  return <div></div>;
}
Now, you can run it in your Web Browser.

Setup Meeting using script tag​

Step 1: Add script and setup the meeting​

Create an index.html file and add the following <script> tag at the end of your code's <body> tag. Initialize VideoSDKMeeting after the script gets loaded. Replace the apiKey with the one generated in Previous Step Signup & Create API Key.

index.html
<script>
  var script = document.createElement("script");
  script.type = "text/javascript";

  script.addEventListener("load", function (event) {
    const meeting = new VideoSDKMeeting();

    const config = {
      name: "John Doe",
      apiKey: "<API KEY>", // generated in step 1
      meetingId: "milkyway", // enter your meeting id

      containerId: null,

      /**
       FEATURE ATTRIBUTES
      */
    };

    meeting.init(config);
  });

  script.src =
    "https://sdk.videosdk.live/rtc-js-prebuilt/0.2.6/rtc-js-prebuilt.js";
  document.getElementsByTagName("head")[0].appendChild(script);
</script>

Step 2: Run the application​

Install any http server if you don't already have one and run the server to join meeting from browser.

$ npm install -g live-server
$ live-server --port=8000

and open http://localhost:8000 in your web browser

Prebuilt SDK Example to add video call widget in your web application

tip

Stuck anywhere? Check out this example code on github or download the full source code and unzip on your computer.

Got a Question? Ask us on discord

Was this helpful?