Agora Web UIKit: Add video calls or live streaming to your website in minutes


Agora powers an average of over 50 billion minutes of human connections per month, and we’ve made it easier than ever 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 and community web UIKit. We want to see your next project hit the market in minutes instead of days!

The UIKit encapsulates all the video call logic to give you access to a high-level component

The Agora Web UIKit is built on the Agora Web SDK using React. It gives you access to a high-level React component or 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 are in the Agora console, create a new project and copy the Agora App ID, we will use it for our application.

Using Web Components

The web components are awesome and allow Agora Web UIKit to be used in any web application. If your website is built with vanilla JavaScript or a framework like Angular, Vue.js or Svelte, you can use this approach. If your website uses React, you can skip to the next section.

Just import the web component script. You can then use the web component by passing your Agora app id and channel name as attributes. You can customize UIKit to enable active speaker detection, change layouts, join audience, and more. using these attributes. You can read more in the detailed blog.

That’s all you need to add video conferencing to your website! Here’s a basic live demo you can play around with.

The reaction approach

The Agora Web UIKit is designed to be customized and extended from scratch. You can customize the user interface and select features such as an active speaker, dual-stream mode, and join as an audience by simply switching on accessories. It’s written with Typescript and built using modular functional components, so you can choose individual parts and build whatever you want.

You can then render the component by passing your Agora App ID and channel name as props:

That’s all we can say about it. You can customize the functionality by modifying the accessories and you can learn more about the different accessories in the documentation. You can view a full example here.

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 repository and API reference. We look forward to community contributions and feedback.

We also have UIKits available for Android, iOS, React Native, and Flutter. You can also check them.

If you have any questions about using Agora Web UIKit, I invite you to join the Agora Developer Slack community. You can ask your questions on the #web-help-me channel. Feel free to open issues for feature requests or report bugs on the GitHub Repo. Or you can contact me on Twitter.

Source link


About Author

Comments are closed.