Setup Meeting Using HTML Script Tag
Prebuilt SDK enables opportunity to integrate real-time communication SDK without writing explicit code. It just requires 10 minutes to integrate.
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 config = {
name: "Demo User",
meetingId: "milkyway",
apiKey: "<API KEY>",
containerId: null,
micEnabled: true,
webcamEnabled: true,
participantCanToggleSelfWebcam: true,
participantCanToggleSelfMic: true,
chatEnabled: true,
screenShareEnabled: true,
/*
Other Feature Properties
*/
};
const meeting = new VideoSDKMeeting();
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