Build your virtual event platform with VideoSDK 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 best experience possible!

Why choose VideoSDK to build your Virtual event platform?

VideoSDK 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 VideoSDK 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.

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 VideoSDK 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>

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 reference see the below video.


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 breakout rooms to flexibly merge meetings or transfer hosts 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

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.