Thanks for coming up with the idea of a higher level API for demystifying Agora video processing. The Agora Web UI Kit is easy to use. I applaud you for that. Nonetheless, for a developer with need to integrate video into a business systems, some heavy customization might be needed. Look and feel is what UI is all about. It is great, one can recompose the UI and I think that's where most serious developers will put their focus on if they want to use the kit.

I am assuming you wrote the kit for easy integration to UI frameworks and in particular React developers. I know it is COOL to use TypeScript for development. But I can tell you that as a consultant that work with US companies "Raw React JS" is used 95% of the time because it is easier to integrate with other components used heavily in most companies.

My humble suggestions (others can help in the implementation)

1. A good example of the kit using just pure React (no TypeScript). There is simple TypeScript example already.
2. A detailed example of recomposing the kit using raw React and TypeScript with emphasis on:

• capturing local and remote video
• How to customize the video containers, buttons and icons with the freedom to place icons and control bars in any desired location
• In short a better exposure (example) on how to use most of the functions and props in raw React and TypeScript.

3. I am open to help build a POC application by recomposing the UI Kit.

Thanks Agora for your SDKs and special thanks to Ekaansh Arora for coming up with UI web kit.

Jonathan Ekwempu

I try to run the example project and add my app id in /example/src/App.tsx file. I am using the secure token for authentication so i add tokens in rtcProps and give a role as host and channel name which i used to generate the token. Still not able to view my local video. Screens show just blank

I am trying to integrate Agora UI Kits into my react app, the connection part works and I am able to connect to both RTM and RTC channels, now I want to be able to send a message to everyone in the channel, I see there is a "sendChannelMessage" method under "RtmContext" in the library but I am unable to figure out how to import and use this method? Even if I import RtmContext it doesn't seem to expose the sendChannelMessage method somehow? Please help me, thanks!

I tried referring to this: https://agoraio-community.github.io/Web-React-UIKit/interfaces/internal.rtmContext.html#sendChannelMessage but I'm unable to understand how to import this into React

I am trying to integrate UI Kit with my app, I generate join token server side and when I try to render the Agora UI Kit, I get the following error :

**"'AgoraRTCException', code: 'CAN_NOT_GET_GATEWAY_SERVER', message: 'AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid vendor key, can not find appid'**

I thought it was a mistake on my end, I went to the Agora dashboard and clicked on "create web demo link" and it didn't work there as well, the same error was popping up on the console.

P.S: My app ID is correct

know when the audio and video mute button is clicked,,

I have tried the following but it doesn't work

callbacks: { "local-user-mute-audio": (status) => { console.log('status', status) }, },

thank you

I want to add a new new component to LocalControls, I checked the repo but I didn't find any solution. Can you plz tell me how to do that? I want to add a timer and few other buttons as follows:

Hi @EkaanshArora, Thanks for the UiKit.

I have added the UIKit to one of our Gatsby project and it is working great but the problem is occuring during the build process. I am getting the error "window" is not available during server side rendering. error during running the build. The error is coming in the AgoraRTC_N-production.js file. I tried checking the condition of isBrowser() and then rendering the AgoraUIKit but still the same error is occuring. Please tell me how can I fix this issue. Thanks

Hi,

I have the following configuration and seems to not work for the LocalParticipant even though i set the camera and mic to false.

const [rtcProps, setRTCProps] = React.useState<RtcPropsInterface>({ CustomVideoPlaceholder: Placeholder, appId: "c532a7b1c4e04ad3a35052133adafaa6", channel: "", token: "", activeSpeaker: true, enableAudio: queryParams["audio"] === "on" ? true : false, enableVideo: queryParams["video"] === "on" ? true : false, role: "host", uid: authUserId as number, layout: layout.grid, disableRtm: true, });

Any idea why this is not working???

So , in the wiki There is an extra div closing tag under the example section Along with that, on 6th line of the same code snippet, SetRole is not defined (can be replaced with setHost perhaps)

There's an error when only some cusom icons are passed trough props. Project icons aren't shown if, for example, only call end icon is in props.

This fix verify if there's a custom icon with button name and show default icon if not instead.

There's an error when only some cusom icons are passed trough props. Project icons aren't shown if, for example, only call end icon is in props.

This fix verify if there's a custom icon with button name and show default icon if not instead.

Feature request: I know the name of the component is VideoUIKit, but I would really like a switch to start everybody without video (and keep them that way). I only need the audio and, I really like the code here, so is there a start-up-props etc. option to do this. If not then this is my feature request.

The Web API has the capability to switch between mirror and non-mirrored. However, this is not available for React UIKit.

See

https://docs.agora.io/en/Interactive%20Broadcast/API%20Reference/web_ng/interfaces/videoplayerconfig.html?platform=Web#mirror

Please add this feature as it is useful for specific use cases.

Hi, I would like to display the rear camera on mobile devices. I search the doc but could not find which setting to set. Could you provide any guide? Thank you.

Hello, I am using agora-react-web-uikit web component in a Vuejs application. Are there any ideas to add StyleProp using web component approach? Thank you