Build your virtual event platform with Video SDK using PreBuild APIs within minutes.
Building a virtual event platform is an excellent idea since the virtual event industry is growing rapidly with an estimated valuation to reach $774 billion by 2030. The only problem is finding the best video SDK to integrate into your app. And no doubt the are many Video SDKs out in the market but many are overpriced or lacking in features & customization or simply lack quality customer support. But with Video SDK we try to solve all the current industry dilemmas and provide you the experience possible!
Why choose Video SDK to build your Virtual event platform?
Video SDK is a video & audio conferencing service you can integrate into your app within a few minutes. It helps you build the best virtual event platform with 10k free monthly minutes. 100+ startups are using Video SDK to build powerful platforms in the Virtual event space. We provide PreBuild as well as advanced virtual event platform features to integrate into your app.
If you are building a virtual events platform using Low-Code or No-Code apps then check out our below tutorials.
- How to embed “Video Calling API” on any low-code web builder?
- How to build a video calling app with Bubble.io?
- How to build a video calling app on WordPress?
The steps to build a virtual event platform using Prebuilt SDK
Following the below steps will guide you to quickly build the best virtual event platform. Make sure to follow them accordingly and if you face any issues go ahead then go ahead and join our discord community and we will solve your issues the right way!
1: Create a Video SDK account and generate API Key
Sign Up on Video SDK to create your free account. Once you set up the account go to settings>api-keys and generate a new API key for integration. (For more info, you can follow How to generate API Key?)
2: Setup a meeting in your virtual event platform
Create a index.html file and add the following <script> tag at the end of your code's <body> tag. Initialize VideoSDKMeeting after the script gets loaded. Replace the apiKey with the one generated in Step 1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Videosdk.live RTC</title>
</head>
<body>
<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.3.1/rtc-js-prebuilt.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
</body>
</html>
3: Generate your unique meeting link
Create createMeeting.htm and add createMeeting() function
Add a <script> which will contain createMeeting() which will create and redirect to a new meeting. And add this method to onClick of <button>
Your <body> should look something like this.
<body>
<script>
// Function to create meeting ID
function createMeeting() {
let meetingId = 'xxxxyxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
console.log("http://"+ window.location.host + "?meetingId="+ meetingId)
document.getElementById("copyInput").value = "https://"+ window.location.host + "/meeting.html?meetingId="+ meetingId;
}
// Function to copy the link
function copyFunction() {
/* Get the text field */
var copyText = document.getElementById("copyInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
}
</script>
<div>
<button onclick="createMeeting()">Create Meeting</button>
<br/>
<input type="text" id="copyInput">
<button onclick="myFunction()">Copy Link</button>
</div>
</body>
4: Update to take the meetingId from the URL.
In this way, you will be able to access meetingId from the URL and each unique URL will work as a different room
//...
<script>
script.addEventListener("load", function (event) {
//Get URL query parameters
const url = new URLSearchParams(window.location.search);
//...
const config = {
// ...
meetingId: url.get("meetingId"), // Get meeting id from params.
// ...
};
const meeting = new VideoSDKMeeting();
meeting.init(config);
});
</script>
//...
5: Run and test
Install an HTTP server if you don't already have one and run the server to join the meeting from the browser.
- Node.js
$ npm install -g live-server
$ live-server --port=8000
Find the NPM run start for Python, PHP, WAMP, and XAMPP here.
PreBuild SDK features list
Below are the features of the virtual event platform. They can be easily implemented into your virtual event app. Simply input the 'true' or 'false' value in the <permission object > to your features for referring see the below video.
<!--kg-card-begin: html--><!--kg-card-end: html-->
Build a custom virtual event platform
With Video SDK you can create a huge number of custom features. They are very helpful because the custom features are specific to your industry niche. We have kept the implementation of these features as simple as possible for our developers as well as no code developers.
Interactive live streaming - Host up to 50,000 participants on your virtual event platform in a single meeting.
Break out room - Utilize the break out rooms to flexibly merge meetings or transfer host to participants & vice versa & more.
Custom video track - Integrate Banuba a Face Filter SDK that provides awesome Filters and detailed analytics such as face tracking, background subtraction, & more.
Open source projects
- Prebuilt React SDK UI Kit available on GitHub for free <!--kg-card-end: markdown-->
You can go to GitHub & and use our PreBuild SDK UI kit as it is open source. This means you can use our PreBuild video SDK for free as well as customize it as per your needs for your virtual event platform.
Conclusion
Congrats on integrating Video SDK in your virtual event app! If you wish to add functionalities like chat messaging, and screen sharing, you can always check out our documentation. If you face any difficulty with the implementation you can check out the example on GitHub or connect with us on our discord community.
Top comments (0)