Create Meeting URLs for an Agora Video Call with the Web UIKit
The easiest way to join a video call on your website is by sharing a unique link. In this tutorial, we’ll see how to access query parameters from a URL and use them with the Web UIKit. We’ll also look at how to generate unique links for your video calls or livestreams.
To know more about the Web UIKit, you can read the release blog or the technical deep-dive. You can find the Web UIKit on GitHub. You can also find the completed project for this blog post here.
Prerequisites
If your website is built with React, we recommend using the React package. You can also use the Web UIKit with other frameworks (or plain JavaScript) using the web-component release.
You’ll also need an Agora developer account (it’s free – sign up here!). You can find the completed projects on GitHub: React, JavaScript.
Setup for React
You can get the code for the example on GitHub. We’ll build on top of the example. You can now run npm i && npm start to start the React server and visit the hello world app on localhost:3000.
Setup for JavaScript
You can download the example project and get started by opening the index.html file.
Accessing Query Parameters
Let’s say we have our website hosted on example.com, and we want a user to join a room called test. We can create a link example.com/?channel=test, where we can add data to the query parameter (the key=value pair after the ? symbol in the URL). We can have multiple parameters separated by &: example.com/?channel=test&token=123.
We create a function called parseParams that uses the URLSearchParams function to return the query parameters from the URL. We add the key=value pairs to an object and return it.
Using the Query with the Web UIKit in React
We can simply call the parseParams function with the spread (…) operator inside the rtcProps. This pattern lets us have nice defaults in case the query parameters are missing. And it lets us overwrite any of the rtcProps. You can pass in any other supported props like role, layout, and activeSpeaker as well.
Using the Query with the Web UIKit in Vanilla JS
You can select the web component by using querySelector. You can then update the object properties. In the code snippet, I’m iterating over the parameters to update all the values present in the URL directly (skipping the parseParams function).
Note: The end user can easily modify query parameters in a URL. If you’re directly passing data directly to your app, you should sanitize the user input. For example, using this code, a user with their role set to “audience” can easily change it to “host” to join as a host, which can be undesirable for your app.
Bonus: Generating Links
A quick way to generate unique links is by using the current timestamp using the Date object in JavaScript. Here’s a simple function to create a new room:
Conclusion
If you have questions while following this blog post or using the Web UIKit, I invite you to join the Agora Developer Slack community, where you can ask them in the #web-help-me channel. Feel free to open issues for feature requests or to report bugs on the GitHub Repo.
