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