Agora powers an average of over 50 billion minutes of human connections per month, and we’ve made it easier than ever before to build your own custom video chat app or launch your own live streaming service in as little as five lines of code with the release of our open-source, community-driven Web UIKit. We want to see your next project go to market in minutes instead of days!
The Agora Web UIKit is built on top of the Agora Web SDK using React. It gives you access to a high-level React component or a web component for non-React projects that you can add to your website and have a video call or live streaming experience ready to ship.
How it works
All you need to get started is an Agora Developer Account, it’s free to sign up here! Once you’re in the Agora console, create a new project and copy the Agora App ID, we’ll use this for our app.
Using Web Components
Just import the web component script. You can then use the web component by passing in your Agora App ID and channel name as attributes. You can customize the UIKit to enable active-speaker detection, change layouts, join as the audience, etc. using these attributes. You can find out more in the detailed blog.
That’s all you need to add video conferencing to your website! Here’s a basic live demo that you can play around with.
The React Approach
The Agora Web UIKit is built to be customized and extended from the ground up. You can customize the UI and select features like an active speaker, dual-stream mode, and joining as an audience just by passing in props. It’s written with Typescript and is built using modular functional components, so you can pick individual pieces and build anything you like.
You can then render the
<AgoraUIKit> component by passing in your Agora App ID and channel name as props:
If you want a deeper dive, you can read this blog covering the example in-depth. The project is open-source; you can check out the GitHub Repo and the API Reference. We’re looking forward to community contributions and your feedback.
If you have questions while using the Agora Web UIKit, I invite you to join the Agora Developer Slack community. You can ask your questions in the
#web-help-me channel. Feel free to open issues for feature requests or to report bugs on the GitHub Repo. Or you can reach out to me on Twitter.