Create a Virtual Event Platform With Voice & Video With Prebuilt SDK
Tags: developerblog, webrtc, virtualevents, webdev
Published: 2022-06-30 05:40:05

---
title: Create a Virtual Event Platform With Voice & Video With Prebuilt SDK
published: True
tags: DeveloperBlog,WebRTC,virtualevents, webdev
canonical_url: https://www.videosdk.live/blog/building-a-virtual-event-platform-with-prebuilt-sdk
---

 ![Building a Virtual Event platform with Prebuilt SDK](http://blog.videosdk.live/content/images/2022/05/Virtual-event-platform.jpg)

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](https://www.videosdk.live/v1/pricing). 100+ startups are using [Video SDK](https://www.videosdk.live/) to build powerful platforms in the Virtual event space. We provide PreBuild as well as [advanced virtual event platform features](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/getting-started) 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](https://discord.com/invite/Gpmj6eCq5u) and we will solve your issues the right way!

## 1: Create a Video SDK account and generate API Key

[**Sign Up**](https://app.vidoesdk.live/) on Video SDK to create your free account. Once you set up the account go to [settings>api-keys](https://app.videosdk.live/settings/api-keys) and generate a new **API key** for integration. (For more info, you can follow [How to generate API Key?](https://docs.videosdk.live/docs/guide/prebuilt-video-and-audio-calling/signup-and-create-api))

## 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**.

```js
<!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[​](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/dynamic-meeting-link#step-2-create-createmeetinghtml-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.

```js
<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.[​](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/dynamic-meeting-link#step-2-update-your-meetinghtml-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

```js
//...
<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.[​](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/dynamic-meeting-link#step-3-run-and-test)

- Node.js

```js
$ npm install -g live-server
$ live-server --port=8000
```
<!--kg-card-begin: markdown-->
### Find the NPM run start for Python, PHP, WAMP, and XAMPP [here](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/quick-start).
<!--kg-card-end: markdown-->
###   
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--><iframe width="560" height="315" src="https://www.youtube.com/embed/o8DIxmT1Ubg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe><!--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](https://docs.videosdk.live/api-reference/realtime-communication/start-hlsStream) 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](https://www.banuba.com/facear-sdk/face-filters?utm_source=adwords&utm_medium=ppc&utm_campaign=Brand+USA+Canada+India&utm_term=banuba&hsa_tgt=kwd-325576249823&hsa_grp=133935013084&hsa_mt=b&hsa_cam=15897989032&hsa_ver=3&hsa_src=g&hsa_net=adwords&hsa_kw=banuba&hsa_acc=6834955494&hsa_ad=575300001743&gclid=Cj0KCQjwyYKUBhDJARIsAMj9lkGud5Fj_CV8UOxiYTPkpt9YYQWOSJVS-emzsFTBSpouX7HpNCSIm6IaAq1_EALw_wcB) a Face Filter SDK that provides awesome Filters and detailed analytics such as face tracking, background subtraction, & more.

### Open source projects

<!--kg-card-begin: markdown-->
- **[Prebuilt React SDK](https://github.com/videosdk-live/videosdk-rtc-react-prebuilt-ui) 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](https://docs.videosdk.live/). If you face any difficulty with the implementation you can check out the [example on GitHub](https://github.com/videosdk-live/videosdk-rtc-javascript-sdk-example) or connect with us on our [discord community](https://discord.gg/Gpmj6eCq5u).