Need help: To bridge functionality between Webview UI and Native UI

[bizready]

I am developing an audio/video app for an online classroom setup. Essentially, teacher students collaborate over audio/video app.

After many weeks of troubleshooting and development efforts, I made a decision to have the following setup.

1. All administration functionality (teacher, class, and student management) in the Quasar framework. I chose Quasar to have single code base for web and mobile.
2. The single codebase is great as long as all functionalities work together. Unfortunately, the conferencing (audio/video) WebRTC does not work on mobile (especially, on iOS and has some trouble on Android). WebRTC does work on the browser, but I need a different solution for mobile for audio/video.
3. Now, I am under tremendous trouble finding a solution such a way that functionality works with minimal code duplication. I am in the research mode -> (A) Develop a capacitor plugin for managing the audio/video part and still have admin functionality in Webview (B) Develop native ios, android code for audio/video and bridge Webview admin to native audio/video

Since I am new to the Capacitor as well as Mobile app development (in general), I need your help and support to get to the right solution for me and decide whether I should go with 3(A) or 3(B).

My feeling is that 3(A) is a good candidate if I want to call native functionality such as camera, audio for on-demand functionalities such as take a pic, upload image, resize, play mp3, play movie, etc. In my case, it is like Zoom or WebEx functionality where teachers and students will have engaged sessions by using audio/video. Can Webview use the plugin for continuous tasks like web conferencing? My concern here is that I am not an expert in handling audio/video work in the plugin (mic, speaker, active speakers, mute, unmute, etc).

I want to consider 3(B) because I already have a demo (mic, speaker management covered) code working for iOS and Android for audio/video and admin management in Quasar/Capacitor. My thought process is - it may be better to keep these two concerns separately.

1. Quasar/Capacitor for administration features (same codebase for web and mobile)
2. Utilize native iOS demo app for audio/video management - I need to enhance the demo app
3. Utilize native Android demo app for audio/video management - I need to enhance the demo app
4. When the app user wants to start the conference(audio/video), they can transition from Webview(Quasar/Capacitor) to native UI (iOS/Android).

I need your guidance on the above steps.

• Do you have any concerns in the above 4 steps of 3(B)?
• Is it possible to bridge user activity seamlessly between Webview and native UI (provided auth works fine)?
• Do you see any concerns in setting code for this bridging experience? Will Capacitor code base will have native code iOS and Android?
• Is there any pointer or tutorials or links that I can use on how to accomplishing seamless bridging?
• or, I need to stick to 3(A)?

I know this is long, and I really need your expert tips. Thanks in advance.

[imhoffd]

Hi @bizready!

If I'm understanding correctly, you're deciding on one of two options:

A. Use a Capacitor plugin for audio/video capturing and playback and manage everything in the Capacitor Web View.
B. Switch between native view(s) for audio/video capturing and playback and the Capacitor Web View for everything else.

If that's correct, then my answer would be that today your best option would be A. While it is possible to manage native views alongside the Capacitor Web View, Capacitor wasn't created with that use case in mind and you may run into problems. That being said, improving this is one of the priorities for Capacitor 3 (see #3182).

If you choose B, expect to deal with a lot of state management in two places, lots of bridge communication, etc. And, as I mentioned, you may run into problems in Capacitor.

I noticed you've been active in the WebRTC proposal. My hope is that the Capacitor community can come together and create a high-quality solution for dealing with all types of media, a la the Media proposal. If you're interested in helping, I'd be happy to chat in the Capacitor slack.

[bizready]

@dwieeb - you have summarized it precisely and thanks for your feedback. It looks like writing a plugin would be a lot of work and I am happy to contribute in any way that I can (except that I am a new bee in the mobile development world). I will connect over slack (bizready).