Dynamic Meeting Link - Prebuilt
If you don't want to have the same meeting id every time, you can generate a random id each time and use it. Let's see how it's done.
Step 1. Create createMeeting.html
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>
Step 2. Update your meeting.html
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 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>
//...
Step 3. Run and test​
- Node.js
- Python
- PHP
- WAMP
- XAMPP
$ npm install -g live-server
$ live-server --port=8000
and open http://localhost:8000/createMeeting.html to create meeting URL
$ python3 -m http.server
and open http://localhost:8000/createMeeting.html to create meeting URL
$ php -S localhost:8000
and open http://localhost:8000/createMeeting.html to create meeting URL
Move the HTML file to C:\wamp\www and start the WAMP server
and open http://localhost/createMeeting.html to create meeting URL
Move the HTML file to C:\xampp\htdocs and start the XAMPP server
and open http://localhost:8000/createMeeting.html to create meeting URL
Got a Question? Ask us on discord