Embed Video Calls API & SDK Your Own Website and App

How Video Calling Will Change the Future of Business

If the latest video calling trends are anything to go by, the future of business is set to be revolutionized by video calling. It simplifies a lot of processes that were once considered doable only face to face or with an individual’s physical presence. Today, a lot of these processes have been taken online, leaving top talents free to pursue higher-level achievements and goals.

Presenting you the Prebuilt

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.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.

Prebuilt SDK 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

• HIPAA Compliance in enterprise mode

• 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

To incorporate video calling API within your existing app, you will require the following four components:

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, and more.

Step 1: Signup with videosdk.live

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

Step 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="sdk.videosdk.live/rtc-js-prebuilt/0.1.5/rt…"></script>

Step 3: Setup the meeting

Initialize 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: "videosdk.live",

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

    chatEnabled: true,
    screenShareEnabled: true,
    pollEnabled: true,
    whiteBoardEnabled: true,
    raiseHandEnabled: true,

    recordingEnabled: true,
    recordingWebhookUrl: "videosdk.live/callback",
    participantCanToggleRecording: true,

    brandingEnabled: true,
    brandLogoURL: "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>

Step 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.

Node.js

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

Python

$ python3 -m http.server

PHP

$ php -S localhost:8000

WAMP

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

XAMPP

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

and open 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: Click here

Connect with us. We are happy to serve you!

More Click Here - videosdk.live Thank you.