Client Setup - Prebuilt
Prebuilt SDK enables opportunity to integrate real-time communication SDK witout writing explicit code. It just requires 10 minutes to integrate.
It supports all the modern frameworks such as plain JavaScript, React JS, Vue and Angular.
Also check out this example code on github or download the full source code and unzip on your computer to get started quickly.
Setup Meeting using npm package manager​
Step 1: Install Package​
- NPM
- YARN
npm install @videosdk.live/rtc-js-prebuilt
yarn add @videosdk.live/rtc-js-prebuilt
Step 2: Initialize Meeting​
Copy API key generated from Signup & Create API Key , paste it in to apiKey attribute.
- React
- Angular
- Vue
import React, { useEffect } from "react";
import { VideoSDKMeeting } from "@videosdk.live/rtc-js-prebuilt";
export default function App() {
useEffect(() => {
const config = {
name: "John Doe",
apiKey: "<API KEY>", // generated in step 1
meetingId: "milkyway", // enter your meeting id
containerId: null,
/**
FEATURE ATTRIBUTES
*/
};
const meeting = new VideoSDKMeeting();
meeting.init(config);
}, []);
return <div></div>;
}
import { Component, OnInit } from "@angular/core";
import { VideoSDKMeeting } from "@videosdk.live/rtc-js-prebuilt";
import { environment } from "./../environments/environment";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
async ngOnInit() {
const config = {
name: "John Doe",
apiKey: "<API KEY>", // generated in step 1
meetingId: "milkyway", // enter your meeting id
containerId: null,
/**
FEATURE ATTRIBUTES
*/
};
const meeting = new VideoSDKMeeting();
meeting.init(config);
}
}
<script>
import { VideoSDKMeeting } from "@videosdk.live/rtc-js-prebuilt";
export default {
name: "App",
mounted: async function() {
const config = {
name: "John Doe",
apiKey: "<API KEY>", // generated in step 1
meetingId: "milkyway", // enter your meeting id
containerId: null,
/**
FEATURE ATTRIBUTES
*/
};
const meeting = new VideoSDKMeeting();
meeting.init(config);
},
};
</script>
Now, you can run it in your Web Browser.
Setup Meeting using script tag​
Step 1: Add script and setup the meeting​
Create an 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 Previous Step Signup & Create API Key.
<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,
/**
FEATURE ATTRIBUTES
*/
};
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>
Step 2: Run the application​
Install any http server if you don't already have one and run the server to join meeting from browser.
- Node.js
- Python
- PHP
- WAMP
- XAMPP
$ npm install -g live-server
$ live-server --port=8000
and open http://localhost:8000 in your web browser
$ python3 -m http.server
and open http://localhost:8000 in your web browser
$ php -S localhost:8000
and open http://localhost:8000 in your web browser
Move the html file to C:\wamp\www and start the WAMP server
and open http://localhost/index.html in your web browser
Move the html file to C:\xampp\htdocs and start the XAMPP server
and open http://localhost/index.html in your web browser
Stuck anywhere? Check out this example code on github or download the full source code and unzip on your computer.
Got a Question? 
Ask us on discord
