This content originally appeared on DEV Community and was authored by Arjun Kava
Video Calling is becoming norm for everyone nowadays and integrating Video API is as hard as building one. In this article, We are going to explore the Video Calling in JavaScript.
We will also implement a demo and use Video SDK to make a video call using rtc-js-prebuilt
Table of Content
- Introduction
- Setup
- Implementation
- Run the demo
- Cloud Record the meeting
- Go live on social media (RTMP out)
- Conclusion
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.
Video SDK Video Calling Prebuilt SDK provides best video calling experience with just 10 lines of code. It provides inbuilt support for
- 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.
Setup
Step 1: First of all, Register yourself to app.videosdk.live
Step 2: Generate an API key and Secret
Implementation
Step 1: 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
Step 2: Add Video SDK 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>
Step 3: Insert API key in your code to run it
apiKey: "<API-KEY>"
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
trueorfalseto 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>",
// },
],
}
Conclusion
In this article, I have explained Video Calling 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 Calling API
This content originally appeared on DEV Community and was authored by Arjun Kava
Arjun Kava | Sciencx (2021-10-05T12:49:59+00:00) How to build Video Calling in javascript. Retrieved from https://www.scien.cx/2021/10/05/how-to-build-video-calling-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.