Sagar Kava

Posted on Jul 22, 2021 • Originally published at videosdk.live on Jul 22, 2021

How to Add Video Conferencing to Your Website

#webdev #javascript #css #chat

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.

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

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

videosdk-live / videosdk-rtc-js-prebuilt-embedded-example

Low Code Prebuilt example of Video SDK using plain JS and HTML.

Video SDK No Code Prebuilt App.

THIS REPO is DEPRECATED. Please refer to https://github.com/videosdk-live/videosdk-rtc-prebuilt-examples

What is it?

This code sample demonstrates a one-to-one and group video call application built with Video SDK RTC Prebuilt SDK and Video SDK RTC JS SDK

Built for serverless video calling experience.
Scale it upto 5,000 participants with low code.
10,000 minutes free on monthly basis.
Inbuilt video and audio quality optimization.
Inbuilt chat poll, whiteboard, Q and A support.

Features

Completely Low code and serverless.
Video API with real-time audio, video and data streams
5,000+ participants support
Chat support with rich media.
Screen sharing with HD and Full HD.
Play realtime video in meeting
Connect it with social media such as Facebook, Youtube etc (RTMP out support).
Intelligent speaker switch
Record your meetings on cloud
Inbuilt support of whiteboard, poll and Q & A.
Customize UI as per your needs.

Browser Support

Visit our…

View on GitHub

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🚀

Top comments (1)

chris • Aug 5 '21

How can I integrate videosdk to Hasura?

DEV Community