Some Suggestions

[onyii5119]

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

[EkaanshArora]

Hi @onyii5119, thank you so much for your feedback!

We're working on the blog draft to cover in detail how to recompose the UIKit, you can check out the project repo

I think TypeScript adds a lot to the developer experience but using it is completely optional with the Web UIKit, I'm adding a non-typescript example to this branch based on your feedback.

1. no-typescript branch
2. You can check out the mentioned example: typescript and non-typescript. We'll add it to the docs/wiki for better visibility.

We'll continue to work on adding detailed guides for the different parts that you mentioned.

Excited to hear what you think, thanks!

[onyii5119]

Good morning Ekaash. Thank you for the feedback. That was gracious of you. I checked out the no-typescript branch, I noticed you have started removing TypeScript from the modules, but I still see TypeScript as a dependency in package.json. It would be nice to just remove the TypeScript dependency and have a clean raw React implementation. My opinion is that to remove TypeScript you should start from package.json Thanks for the work you are doing. Jonathan Ekwempu

…

On Mon, Feb 7, 2022 at 8:35 AM Ekaansh Arora ***@***.***> wrote: Hi @onyii5119 <https://github.com/onyii5119>, thank you so much for your feedback! We're working on the blog draft ***@***.***/publishing-your-agora-livestream-to-youtube-facebook-or-twitch-using-the-web-uikit-media-push-b18e03f164ca> to cover in detail how to recompose the UIKit, you can check out the project repo <https://github.com/EkaanshArora/Agora-Web-UIKit-RTMP/> I think TypeScript adds a lot to the developer experience but using it is completely optional with the Web UIKit, I'm adding a non-typescript example to this branch <https://github.com/AgoraIO-Community/Web-React-UIKit/tree/no-typescript> based on your feedback. 1. no-typescript branch <https://github.com/AgoraIO-Community/Web-React-UIKit/tree/no-typescript> 2. You can check out the mentioned example: typescript <https://github.com/EkaanshArora/Agora-Web-UIKit-RTMP> and non-typescript <https://github.com/EkaanshArora/Agora-Web-UIKit-RTMP/tree/no-typescript>. We'll add it to the docs/wiki for better visibility. We'll continue to work on adding detailed guides for the different parts that you mentioned. Excited to hear what you think, thanks! — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABAJXTLFGKUTJCLPDJ4ZYWDUZ7DCRANCNFSM5NMWBYZA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[onyii5119]

I noticed that in the github repository, the TypeScript dependency was removed from package.json but when I clone the repository to my workspace I see it there. That's strange!!! I noticed the same issue with "Agora Web UIKit RTMP" repository. Moreover, I noticed the code (RTMP.txs) only requires you to supply an RTMP URL. Most CDNs require you to also provide a streaming key. What you are building today would be very useful in industries tomorrow. Keep up the good work. Thanks, Jonathan Ekwempu

…

On Mon, Feb 7, 2022 at 8:35 AM Ekaansh Arora ***@***.***> wrote: Hi @onyii5119 <https://github.com/onyii5119>, thank you so much for your feedback! We're working on the blog draft ***@***.***/publishing-your-agora-livestream-to-youtube-facebook-or-twitch-using-the-web-uikit-media-push-b18e03f164ca> to cover in detail how to recompose the UIKit, you can check out the project repo <https://github.com/EkaanshArora/Agora-Web-UIKit-RTMP/> I think TypeScript adds a lot to the developer experience but using it is completely optional with the Web UIKit, I'm adding a non-typescript example to this branch <https://github.com/AgoraIO-Community/Web-React-UIKit/tree/no-typescript> based on your feedback. 1. no-typescript branch <https://github.com/AgoraIO-Community/Web-React-UIKit/tree/no-typescript> 2. You can check out the mentioned example: typescript <https://github.com/EkaanshArora/Agora-Web-UIKit-RTMP> and non-typescript <https://github.com/EkaanshArora/Agora-Web-UIKit-RTMP/tree/no-typescript>. We'll add it to the docs/wiki for better visibility. We'll continue to work on adding detailed guides for the different parts that you mentioned. Excited to hear what you think, thanks! — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABAJXTLFGKUTJCLPDJ4ZYWDUZ7DCRANCNFSM5NMWBYZA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[EkaanshArora]

Try clearing ./node_modules and reinstalling the dependencies.
Or better yet create a fresh react project with your preferred configuration (npx create-react-app demo) and then you just copy-paste the App.tsx file from ./example, make sure you install the UIKit (npm i agora-react-uikit).