Add Video Conferencing to Your Website & Integrate and Embed high quality live Video conferencing API & SDK to your website and easy integration in just 10 minutes!

What are video conferencing?

Video Conferencing is basically like a middle-man between a client’s web browser, and some back-end service that you build or use. An API service can read and write information to a database, for example

If you are using a website that uses some kind of video conferencing, your web browser is getting your inputs, like your microphone, camera, or a stream of your desktop which can be sent through such an API to a video conferencing service.

So What’s the Purpose of Video conferencing API for Your Business Collaboration?

The video conferencing API and offer several benefits where two main bonuses are significant.

Faster Software Delivery (Time-to-market Value) : The robust APIs help businesses in creating video conference platforms with tools and infrastructure that are easy and quick to implement on cross-platforms.

Saves Quite a Lot of Resources : With different features enabled APIs and SDKs, developers or experts can integrate any specific chat functionality on any platform with less time consumption.

Embed video conferencing in your application and web in just 10 minutes!

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 callsconferencing pre-built

Embedding a video conferencing to your application becomes easy with Videosdk.live. With our Pre-built, you can add video conferencing 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.

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

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

5.Video Conferencing in Any Website

1: First of all, Register yourself to app.videosdk.live

2: Generate an API key and Secret

Implementation

3: Import the script in your html page

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

Note: You can also use official Npm package: rtc-js-prebuilt

4: Embed Video Calling javascript prebuilt code to your HTML page

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

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

    meeting.init(config);
  });

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

5: Insert API key in your code to run it

apiKey: "<API-KEY>"

Note: To restrict use of your API key on other domains, you can add domain URL which will block use of your API key in other domains.

Run the demo

To run the demo, you have to use any local server. Best could be Xampp or IIS as per your environment. We are going to use live-server package to run simple http server.

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

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

Record the meeting

To record the meeting, You have to first enable recording flag in the configuration.

• recordingEnabled: set true or false to enable and disable online recordings
• recordingWebhookUrl: Callback url, generally helps to store recording details on your database.

recordingEnabled: true,
 recordingWebhookUrl: "https://www.videosdk.live/callback",

After enabling recording option, you'll be able to see recording button on the screen. Click on it to start and stop recording

Go live on social media

To enable live streaming, you have to configure list of stream key and URL. We only support RTMP protocol enabled broadcasting.

• autoStart: If true, it will trigger re-streaming automatically when meeting will start.

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

Pin Screen

To enable pin screen, you have to configure pin property. It includes two major properties:

• allowed: If it is true then that participant can pin or unpin other participants in the meeting, by default it is set to false.
• layout: It should be a any of GRID or SPOTLIGHT or SIDEBAR, by default it is set to GRID.

Better understanding of Layouts

• GRID: This layout is default layout if no participants are pinned, it will look same as a normal meeting grid layout, when any participant is pinned that participant will be moved on top of the main screen grid above all non pinned participants
• SIDEBAR: This layout will have one main screen view and other sidebar grid layout. Only pinned participant will be visible in this layout, all unpinned participants will not be visible in this layout. If more than one participant is pinned then the first participant who was pinned will appear in main screen layout and all other remaining pinned participants will be visible in sidebar.
• SPOTLIGHT: This layout will only contain main screen layout, multiple pinned participants will be visible in main screen view. Same as SIDEBAR layout only pinned participants will be visible in main screen.

pin: {
 allowed: true,
 layout: "SPOTLIGHT",
}

Conclusion

In this article, I have explained Video Chat in JavaScript. You can modify couple of parameters in code according to your need. This was the small introduction to Video SDK Prebuilt SDK.

Here is video version of the same.

I hope this blog helped you understand Video Calling of Video SDK. For more information visit official documentation of Video SDK.

P.S. Find official example of Video SDK No Code Prebuilt App

Quickstart for Prebuilt JS | videosdk.live 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.

🚀Get 10,000 minutes free every month🚀