search

AgoraIO-Community / VideoUIKit-Web-React

A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code.
MIT License
53 stars 42 forks source link

Some Suggestions #1

Closed onyii5119 closed 2 years ago

onyii5119 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 https://github.com/AgoraIO-Community/Web-React-UIKit/issues/1#issuecomment-1031476741, 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 commented 2 years ago

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 https://github.com/AgoraIO-Community/Web-React-UIKit/issues/1#issuecomment-1031476741, 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 commented 2 years ago

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).