In today’s fast-paced digital world, real-time communication has become a crucial part of applications, whether it’s for team collaboration, customer support, or social interactions. Our prebuilt SDK makes it incredibly easy to add high-quality video and audio communication to your app all in just 10 minutes. No complex setup or deep backend expertise required.
Use Case:
- Online doctor consultations (telehealth).
- Live virtual classrooms for students.
- One-on-one fitness or yoga sessions.
- Instant video customer support.
- Live webinars and events.
- Real-time online tutoring.
- Secure legal consultations.
- Product demos in e-commerce.
- Virtual job interviews.
- Banking or finance video assistance.
Step-by-Step Guide to Using the Prebuilt SDK
1. Sign up for a free account on videosdk
Go to https://app.videosdk.live, create an account using Google or GitHub, and get a new API key
2. Generate an API key
3. Import the script into your HTML page
<script src="https://sdk.videosdk.live/rtc-js-prebuilt/0.2.6/rtc-js-prebuilt.js"></script>
4. Add script and set up the meeting
Create index.html, then initialize VideoSDKMeeting and use your apiKey from Step 2.
<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 step 1
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",
recordingAWSDirPath: `/meeting-recordings/${meetingId}/`, // automatically save recording in this s3 path
autoStartRecording: true, // auto start recording on participant joined
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
drawOnWhiteboard: true, // Can draw on whiteboard
toggleWhiteboard: true, // Can toggle whiteboard
toggleRecording: true, // Can toggle meeting recording
removeParticipant: true, // Can remove participant
endMeeting: true, // Can end meeting
},
joinScreen: {
visible: true, // Show the join screen ?
title: "Daily scrum", // Meeting title
meetingUrl: window.location.href, // Meeting joining url
},
pin: {
allowed: true, // participant can pin any participant in meeting
layout: "SPOTLIGHT", // meeting layout - GRID | SPOTLIGHT | SIDEBAR
},
leftScreen: {
// visible when redirect on leave not provieded
actionButton: {
// optional action button
label: "Video SDK Live", // action button label
href: "https://videosdk.live/", // action button href
},
},
notificationSoundEnabled: true,
maxResolution: "sd", // "hd" or "sd"
};
meeting.init(config);
});
script.src =
"https://sdk.videosdk.live/rtc-js-prebuilt/0.2.6/rtc-js-prebuilt.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>Copy
**5. Run the application
To run the app you will need live-server. If you don't have it installed already you can do it using:
npm install -g live-server
Once you have the live-server installed, just run it using:
live-server
Conclusion
Congratulations! You’ve successfully built a video chat app using the Video SDK in JavaScript. With just a few lines of code, you can add real-time video communication to your app.Check out our documentation for step-by-step guidance.
If you face any issues, explore our GitHub examples
We’d love to hear from you:
- Did you try building your own video chat app? How was your experience?
- Which feature are you most excited to add next?
- Was this guide easy to follow?
- Do you have any suggestions to make it better?
👉 Share your thoughts, hurdles, or success stories in the comments, or join our Discord community ↗. We can’t wait to learn from your journey and help you build even smarter, AI-powered communication tools!
Top comments (6)
this is really interesting 🔥🔥
Which feature are you most excited to add next?
please add recording and screen share feature
please check out this documentation other than recording and screen share, you can also add advanced features like live streaming, virtual background , whiteboard etc
docs.videosdk.live/prebuilt/guide/...
Nice article 🙌
thankyou @usman_awan