Version: 0.1.x

Quick Start - Prebuilt

Prebuilt SDK enables the opportunity to integrate real-time video & audio communication SDK without 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.

Prerequisites

important

One should have a VideoSDK account to generate token. Visit VideoSDK dashboard to generate token

Implementing Meeting with Prebuilt VideoSDK

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.

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

  script.addEventListener("load", function (event) {
    const config = {
      name: "Demo User",
      meetingId: "milkyway",
      apiKey: "<API KEY>",

      containerId: null,

      micEnabled: true,
      webcamEnabled: true,
      participantCanToggleSelfWebcam: true,
      participantCanToggleSelfMic: true,

      chatEnabled: true,
      screenShareEnabled: true,

      /*

     Other Feature Properties
      
      */
    };

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

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

Run and Test

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

Node.js
Python
PHP
WAMP
XAMPP

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

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

$ python3 -m http.server

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

$ php -S localhost:8000

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

Move the HTML file to C:\wamp\www and start the WAMP server

and open http://localhost/index.html in your web browser

Move the HTML file to C:\xampp\htdocs and start the XAMPP server

and open http://localhost/index.html 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.

Dynamic Meeting Link

If you don't want to have the same meeting id every time, you can generate a random id each time and use it. Let's see how it's done.

Create a new createMeeting.html file which will consist of a button to create a meeting.

createMeeting.html
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Videosdk.live RTC</title>
  </head>
  <body>
    <button onclick="">Create Meeting</button>
  </body>
</html>

Add a <script> which will contain createMeeting() which will create and redirect to a new meeting. And add this method to onClick of <button>

Your <body> should look something like this.

<body>
  <script>
    function createMeeting() {
      let meetingId =  'xxxxyxxx'.replace(/[xy]/g, function(c) {
          var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
      });
      window.location.href = "http://"+window.location.host+"?meetingId="+meetingId;
    }
  </script>
  <button onclick="">Create Meeting</button>
</body>

Now update your index.html to take the meetingId from the URL.

index.html
//...
<script>

   script.addEventListener("load", function (event) {
      //Get URL query parameters
      const url = new URLSearchParams(window.location.search);

      //...

      const config = {
        // ...
        meetingId: url.get("meetingId"), // Get meeting id from params.
        // ...
      };

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

</script>

//...

Now go to host/createMeeting.html and press the button to create a new meeting with a random meeting id.

Got a Question? Ask us on discord

Prerequisites​

Implementing Meeting with Prebuilt VideoSDK​

Run and Test​

Dynamic Meeting Link​

Prerequisites

Implementing Meeting with Prebuilt VideoSDK

Run and Test

Dynamic Meeting Link