You can use the UIKit in two modes: In communication mode, you can have a maximum of 17 users on a call, and everyone can communicate with everyone else. The object type definition can be found here. And there’s a growing list of things to customise using settings. The settings object lets you customise how the UIKit works. Two layouts : floating and grid, with an option to build your own layout.Live streaming mode with your role as a broadcast or as an audience.Lots of visual customisation by writing only React Native styling.Buttons for muting the remote users’ audio and video locally in floating layout.Buttons for disabling the camera or the microphone and switching cameras for the local user.Allowing you to swap any stream to the larger display in the floating layout.Displaying the active speaker in the larger display in the floating layout.Automatically laying out all video streams.Default Functionalityīy default, Agora UIKit library includes the following functionality before any customisation: The UIKit component also accepts a third prop, called styleProps, which can be used to customise the look of the application by writing React Native styling. (Unmounting the AgoraUIKit component performs the required cleanup automatically.) In the return statement, we render the AgoraUIKit component with the connectionData and rtcCallbacks object. The rtcCallbacks 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 define the Agora App ID and channel name in the connectionData object. 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-rn-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 customise the behaviour and functionality. The component handles the logic and UI for our real-time video experience. This UIKit is simple to use and contains a high-level component called AgoraUIKit. You can now run npm run android or npm run ios to start the server and see the barebones React Native app. If you’re using an iOS device, you’ll need to run cd ios & pod install and configure app signing by opening ios/.xcworkspace in Xcode. Install the Agora React Native SDKs and UIKit: npm i react-native-agora agora-rn-uikit agora-react-native-rtmĪt the time of writing this post, the current agora-rn-uikit release is v4.0.0 and the current react-native-agora release is v3.7.0. Open a terminal and execute: npx react-native init demo -template react-native-template-typescript You can get the code for the example on GitHub, or you can create your own React Native project. A high level understanding of React Native development.You can refer more about AgoraRTC basic processes and objects in the bottom link, I will be posting a reference link for you. first of all, you need to ensure that the channel input field is not empty and then set joined state to true. Here, I have used the async-await method to handle the Join and Leave button event. Now in App.js, you need to import agora-rtc-sdk-ng import AgoraRTC from "agora-rtc-sdk-ng" make sure to import this in your App.js or file that you will do the channel initialization or other kinds of stuff. you need to paste your AppID from the Agora console and for that, you need to create an Agora account and create a project. I have used a separate file for creating variables.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |