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.
Note: You can also use official Npm package: rtc-js-prebuilt
4: Embed Video Calling javascript prebuilt code to your HTML page
<script>varscript=document.createElement("script");script.type="text/javascript";script.addEventListener("load",function (event){constmeeting=newVideoSDKMeeting();constconfig={name:"John Doe",apiKey:"<API KEY>",// generated in SetupmeetingId:"milkyway",// enter your meeting idcontainerId: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 youtubelivestream:{autoStart:true,outputs:[// {// url: "rtmp://x.rtmp.youtube.com/live2",// streamKey: "<STREAM KEY FROM YOUTUBE>",// },],},permissions:{askToJoin:false,// Ask joined participants for entry in meetingtoggleParticipantMic:true,// Can toggle other participant's mictoggleParticipantWebcam:true,// Can toggle other participant's webcam},joinScreen:{visible:true,// Show the join screen ?title:"Daily scrum",// Meeting titlemeetingUrl: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.
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.
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.