Embed video calls API in your application and web in just 10 minutes!

Presenting you the Embed video calls

Following our announcement on launching the pre-built in the previous blog, we are excited to deliver the manual for the same. This blog will get the readers up and running with the pre-built in no time.

How to embed video calls using the VideoSDK pre-built

Embedding a video call to your application becomes easy with VideoSDK. With our Pre-built, you can add video calls on your website and application with just a few lines of code and nothing could be simpler than this. You can share URLs with the participants for the video calls and accommodate more than 5000 people over the same call.

We provide you with a free set-up to experience how to use our prebuilt so you can make the best of it. We also offer you 10,000 minutes, free every month.

Embed video calling enables the opportunity to integrate real-time communication SDK without writing explicit code. It supports all modern javascript frameworks such as React JS, Vue, and Angular including Vanilla JS.

To get started, follow the steps

For better understanding, we have divided the prebuilt setup into a few steps. Each step describes the code snippet that one needs to use while constructing and integrating the SDK.

The prebuilt has codes that sometimes become difficult for a fresher or an inexperienced developer. In that case, one can take the help of a developer to configure the setup. In aid, you can always reach us, we provide 24/7 customer support for our clients.

Video calls with VideoSDK offer users amazing features with quality as our prior most concern.

  • 10,000 minutes free each month
  • Participant capacity up to 5,000
  • End-to-end encrypted calls
  • HD and Full HD Video calls
  • Audio support of 16kHz to 48kHz
  • 360 Spatial Audio
  • Intelligence Active Speaker Switch
  • Real-time messaging
  • Cloud recording
  • Whiteboard and poll support
  • HIPAA Compliance in enterprise mode

Let's begin with the prebuilt setup. Read all the steps carefully before installing one in your application.

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

Embed Video Call

1. Sign up for a free account Prebuit VideoSDK

Visit https://app.videosdk.live and signup with your Google or GitHub account to generate a new API key to run the prebuilt.

2: Generate an API key and Secret

Video SDK Image

3: Import the script into your HTML page

 <script src="https://sdk.videosdk.live/rtc-js-prebuilt/0.2.6/rtc-js-prebuilt.js"></script>
javascipt
Note: You can also use official Npm package: rtc-js-prebuilt

4: Add script and set up 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 Step 2.

<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,
      redirectOnLeave: "https://www.videosdk.live/",

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

      chatEnabled: true,
      screenShareEnabled: true,
      pollEnabled: true,
      whiteboardEnabled: true,
      raiseHandEnabled: true,

      recordingEnabled: true,
      recordingWebhookUrl: "https://www.videosdk.live/callback",
      recordingAWSDirPath: `/meeting-recordings/${meetingId}/`, // automatically save recording in this s3 path
      autoStartRecording: true, // auto start recording on participant joined

      brandingEnabled: true,
      brandLogoURL: "https://picsum.photos/200",
      brandName: "Awesome startup",
      poweredBy: true,

      participantCanLeave: true, // if false, leave button won't be visible

      // Live stream meeting to youtube
      livestream: {
        autoStart: true,
        outputs: [
          // {
          //   url: "rtmp://x.rtmp.youtube.com/live2",
          //   streamKey: "<STREAM KEY FROM YOUTUBE>",
          // },
        ],
      },

      permissions: {
        askToJoin: false, // Ask joined participants for entry in meeting
        toggleParticipantMic: true, // Can toggle other participant's mic
        toggleParticipantWebcam: true, // Can toggle other participant's webcam
        drawOnWhiteboard: true, // Can draw on whiteboard
        toggleWhiteboard: true, // Can toggle whiteboard
        toggleRecording: true, // Can toggle meeting recording
        removeParticipant: true, // Can remove participant
        endMeeting: true, // Can end meeting
      },

      joinScreen: {
        visible: true, // Show the join screen ?
        title: "Daily scrum", // Meeting title
        meetingUrl: window.location.href, // Meeting joining url
      },

      pin: {
        allowed: true, // participant can pin any participant in meeting
        layout: "SPOTLIGHT", // meeting layout - GRID | SPOTLIGHT | SIDEBAR
      },

      leftScreen: {
        // visible when redirect on leave not provieded
        actionButton: {
          // optional action button
          label: "Video SDK Live", // action button label
          href: "https://videosdk.live/", // action button href
        },
      },

      notificationSoundEnabled: true,

      maxResolution: "sd", // "hd" or "sd"
    };

    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>

5: Run the application

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

$ npm install -g live-server
$ live-server --port=8000
Node.JS
$ python3 -m http.server
Python
$ php -S localhost:8000
PHP
Move the html file to C:\xampp\htdocs and start the XAMPP server
XAMPP

and open local host in your web browser

Video SDK Image

NOTE

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

Find our documentation here:

Quickstart for Prebuilt JS | video sdk Documentation
videosdk.live tutorials will help you to deep dive into details of all the SDK and API. We tried to include example of all the possible programming langaguges.
Video SDK Image