DEV Community

Cover image for Embed Video Call on Website & Application
Arjun Kava for Video SDK

Posted on • Updated on

Embed Video Call on Website & Application

Embed and Add video call and chat feature can be easily integrated into any website and application with just a few lines of code in just 5 steps and just 5 minutes. enabling 5000 users to video chat in a web and app.

UPDATE 1 (31st Oct 2021): Updated article with pin screen and layouts configuration

UPDATE 2 (15th Dec 2021): Updated article with whiteboard configuration

Check official Guide: Video SDK Prebuilt SDK for more information.

We will also implement a demo and use Video SDK to make a video call using rtc-js-prebuilt

Introduction

Video calling is becoming norm for everyone. According to Cisco, 87% of the workforce says they feel more connected to each other when using video.

What is video call embed?

Video SDK is provide embed video call in prebuilt SDK adding video calls on your website and application with just a few lines of code and nothing could be simpler than this best video chat experience with just 10 lines of code.

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.

  • 10,000 minutes free each month
  • 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.

Let's begin with the prebuilt sdk 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 JS and Angular JS.

Video Calling Embed in Any Website and App

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

Register yourself to Video SDK

2: Generate an API key and Secret

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.3.21/rtc-js-prebuilt.js"></script>


Enter fullscreen mode Exit fullscreen mode

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>",
          // },
        ],
      },

      whiteboardEnabled: true,

      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,
        toggleWhiteboard: true,

      },

      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.21/rtc-js-prebuilt.js";
  document.getElementsByTagName("head")[0].appendChild(script);
</script>


Enter fullscreen mode Exit fullscreen mode

5: Insert API key in your code to run it



apiKey: "<API-KEY>"


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Video Call Example

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",


Enter fullscreen mode Exit fullscreen mode

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

Recording button

Enable WhiteBoard

To enable whiteboard, you have to configure whiteboard flag and permissions.

  • whiteboardEnabled: if true, it will enable whiteboard
  • permission: you can also set permission of who can drawOnWhiteboard and toggleWhiteboard by using boolean value


whiteboardEnabled: true,
  permissions: {
    drawOnWhiteboard: true,
    toggleWhiteboard: true,
  },


Enter fullscreen mode Exit fullscreen mode

Video SDK whiteboard example

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>",
// },
],
}

Enter fullscreen mode Exit fullscreen mode




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.

Example of pin layouts

Better understanding of Layouts

GRID
  • 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
  • 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
  • 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",
}


Enter fullscreen mode Exit fullscreen mode

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

Official Github

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

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

<p>
Enter fullscreen mode Exit fullscreen mode

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


Top comments (13)

Collapse
 
sirmed profile image
Sirmed Mehmood

Thank you very much for this awsome post!

Collapse
 
arjunkava profile image
Arjun Kava

Welcome.

Collapse
 
agnel profile image
Agnel Waghela

Thank you Arjun, you made my day.

I was looking for a Video Calling API with chat and cloud support in js, to integrate in a tele-consulting app for an NGO that I'm developing.

Collapse
 
arjunkava profile image
Arjun Kava

Welcome, Agnel. Also, let us know if you need any help from our end to integrate it. You will find support channels at app.videosdk.live/

Thanks.

Collapse
 
venkatesan_g profile image
Venkatesan G

Hi

  1. Is the 10000 minutes free for every month per account? will it get renewed every 1st of the month? Can it be tracked?
  2. What would be the charges for every minute exceeding the free 10000 minutes? please advise.
Collapse
 
rajivinbangalor profile image
Rajiv Mukherjee

Arjun how can we do screenshare ?

Collapse
 
arjunkava profile image
Arjun Kava

Hey, @rajivinbangalor . Please follow this guide to share screen, docs.videosdk.live/docs/guide/preb...

Collapse
 
tr11 profile image
Tiago Rangel • Edited

Really cool post, thanks!

Collapse
 
pedroglp profile image
Pedroglp

Hello, I've tried to run through the onboarding and there is some issue that lets the website in looping.

Collapse
 
bigbott profile image
bigbott

I have run this page. Looks great. Video quality is acceptable, but audio quality is very low.

Collapse
 
arjunkava profile image
Arjun Kava

Hey, there are option to select region to run better mettings. Can you elobrate more on what kind of issues you've faced?

Collapse
 
kaleem_khan_6050c5d43ad6a profile image
Kaleem Khan

Hfjg

Collapse
 
delta8 profile image
delta8

HTML5 Video Chat: Real-time Chat for Your Website!

Visit html5-videochat.com and add a customized video chat to your website today.