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

Presenting you the Embed video call

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 call using the Videosdk.live pre-built

Embedding a video call to your application becomes easy with Videosdk.live. 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 to 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 few steps. Each step describes the code snippet that one needs to use while constructing 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.live 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: Signup with videosdk.live

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

2: Add script to your project

Create an index.html file and add the following <script> tag at the end of your code's <body> tag.

index.html

 <script src="https://sdk.videosdk.live/rtc-js-prebuilt/0.1.4/rtc-js-prebuilt.js"></script>

3: Setup the meeting#

Intialize VideoSDKMeeting after including the script on the page. Replace the apikey with the one generated in Step 1.

<script>
  const meeting = new VideoSDKMeeting();

  const config = {
    name: "John Doe",
    apiKey: "YOUR 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",
    participantCanToggleRecording: true,

    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
    },
  };

  meeting.init(config);
</script>

4: 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:\wamp\www and start the WAMP server
WAMP
Move the html file to C:\xampp\htdocs and start the XAMPP server
XAMPP

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

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.