If you update the state that's passed as a prop, the UIKit will react to it (like the standard React design pattern). We added the role prop to the rtcProps switch between host and audience (by default the role is host). We can use our state to define our rtcProps. The isHost variable will track whether the user is a host or audience, and the isPinned variable is used to switch between the two prebuilt layouts: Let's add two new state variables: isHost and isPinned. Hosts can share their audio and video to everyone in the channel, while audience members can only receive video and audio from other hosts: But let's now take a look at how to convert this to a live streaming app where the users can join either as a host or an audience member. We have a video conferencing website ready to ship. You can override the default styles for each piece of the UIKit (such as buttons, videos, and containers) with your own. The UIKit component also accepts a third prop, called styleProps, which can be used to customize the look of the application by writing React styling. (Unmounting the AgoraUIKit component performs the required cleanup automatically.) In the return statement, we render the AgoraUIKit component with the rtcProps and callbacks object.
The callbacks object contains RTC events as keys and callback functions as their value - we use the EndCall event to update the state and unmount the AgoraUIKit component: We'll talk more about how to use tokens in a bit. Note: If your app is in secure mode, you can generate a token from the Agora console and pass it in for testing. You can use any alphanumeric string for the channel name.
Users on the same channel can communicate with each other. We define the Agora App ID and channel name in the rtcProps object along with our role. We'll render the UIKit component when it's set to true and unmount it when it's false. Inside the App component we have a state variable videoCall. We're importing the AgoraUIKit component from the agora-react-uikit package.
Let's clear the App.tsx file and start writing the code to build a video chatting app: We can pass in props to the component to customize the behavior and functionality. The component handles the logic and UI for our real-time video experience. This UIKit is easy to set up and contains a high-level component called AgoraUIKit. You can now run npm start to start the React server and visit the hello world app on localhost:3000. Note: At the time of writing this post, the current agora-react-uikit release is v0.0.5, and the current agora-rtc-sdk-ng release is v4.8.1. Npx create-react-app demo -template typescript To create a React project with Typescript, you can open a terminal and execute: You can get the code for the example on GitHub. If your website uses plain JavaScript or a different framework like Svelte, Vue, or Angular, you can use the UIKit as a web component! You can skip to the last section to learn more.Īn Agora developer account (It's free - sign up here!) TypeScript support, with no third-party dependencies Responsive layouts for desktop and mobileĬustomizable UI and functionality using React propertiesĪutomatically manage tokens (using two-click server deploy)ĭual-stream mode and active speaker detectionīuilt using modular functional components that can be recomposed Plug and play, no watermark or branding out of the box Support for video conferencing and live streaming If you want a deeper technical dive, read on! Now with the Agora Web UIKit, you can easily add video calling to your website with just five lines of code! It's fully featured to boot, and it comes with easy customization and is meant to be extended. When you're building a live video streaming or a video conferencing website with Agora, a few technical steps might slow you down.
0 kommentar(er)
