Can I use a web browser instead of the Pi Camera app?

[samthelion17]

This would allow me to view the stream from a bigger screen, like a laptop for example. Just the other day I was testing mediamtx for a project like this, so far I'm liking your implementation better.

[TzuHuanTai]

Yes, you can! I had a web-based UI actually, but I hadn't finished it yet, and then I switched to app implementation a few months ago.

[samthelion17]

How? Shed some light plz 🙏

[TzuHuanTai]

I used mqtt.js and reused the code from the webrtc official javascript demo in their Github, then, changed the signaling mechanism from the sample code to yours. Although it doesn't seem too difficult, there's a lot of extra work. :(

Here is the web demo, the UI is crude.

[KevinXuxuxu]

Could you opensource (or share) the code for the web UI version? This would enable accessing the video streaming from literally any device (instead of just android phone).

[TzuHuanTai]

I do have a plan to release a web UI/ios app that everyone can use like the Pi Camera app. Other features such as event trigger, motion detection, or p2p control gpio. However, I’m developing purely out of personal passion and ideals, without any funding or sponsorship. I’m only able to work on it during my spare time, the progress might be slower than expected. I hope this answers your question.

[obenchekroun]

Hi !

Really great project ! It works really well and I am impressed by the minimal delay it has ! Adding to @samthelion17, it would be great if you release the crude web demo you used, for testing with the web interface !

Thank you very much

[beyonlo]

Hi all!

Using a web browser will be amazing. Could you please @TzuHuanTai share your web-based UI? Even if it is not finished yet, maybe people can have a start to continue developing and/or if you share here as a project, people can contribute by doing pull requests to always have a better web-based UI.

Thank you in advance!

[TzuHuanTai]

First of all, I appreciate you guys like this project. I just finished the setting page in the past few days, the next step is to migrate the webrtc streaming code. If all goes well, I expect the first Web UI to be released by the end of this month.

[obenchekroun]

that's great ! thanks a lot for all this work !

[TzuHuanTai]

I have a question. Could you guys share some reasons/purposes why you need a Web UI? Knowing the requirements helps me design the Web UI, I hope it's easy to use for all people, not just me.

[samthelion17]

I have a question. Could you guys share some reasons/purposes why you need a Web UI? Knowing the requirements helps me design the Web UI, I hope it's easy to use for all people, not just me.

For me, I just want to be able to view the live feed on a bigger display and on any device, no matter the OS.

[beyonlo]

Hello @TzuHuanTai

I have some reasons (some the same as @samthelion17):

1. For high resolution streaming, it is possible to use the large display, using a PC/Notebook/Tablet for a great view.
2. Gnu/Linux and FreeBSD are very usable for me, but many people use it as well. But in general, with WebUI, any OS (and any device that supports a browser) can be used!
3. Is not mandatory (necessary) to install an App in the Smartphone and update the App each time that there is a new version. You can just open the Chrome of Android Phone and/or Safari of Iphone, open the URL and it works - same for other platforms (Linux, Windows, MACOS), etc.
4. With a WebUI OpenSource, we can do some changes on the source code for our needs (like extra pages for logs/notifications and so on) to fit better what we want.
5. Unless you have a framework that generates code for IOS and Android, you need to develop two different projects (with different languages/libs). Using Web UI, you need just one project.

Taking advantage of the opportunity I would like to know two things: a. What framework/language are you using to develop the WebUI? b. What framework/language are you using to develop the Android version?

Reinforcing the item 5 above, Flutter is an example where you can write just one code (one project) and it can build a version for WebUI, Android, IOS, MacOS, Linux or Windows. I'm not an expert of FLutter, I did only some tests with it using their very simple examples, but Flutter is an example about a framework that generates builds for everything.

[TzuHuanTai]

Thank all the replies. I'm just curious what people are looking for. It might change the priority of the new feature.

Answer @beyonlo 's questions. I used to develop it in Angular with the PWA feature but moved to the React-based framework this year. Now, I’m using React for the web and React Native for the Android app.

By the way, the live-streaming page is finished.

[obenchekroun]

Hi @TzuHuanTai,

It looks great !

I have a question. Could you guys share some reasons/purposes why you need a Web UI? Knowing the requirements helps me design the Web UI, I hope it's easy to use for all people, not just me.

For me, I have a few reasons :

• My primary phone is an iPhone so being usable on any OS is particularly useful
• I often work from home, and use it to keep an eye on my baby sleeping in his crib. Being able to put it in a corner window of my screen would be much appreciated, instead of having the app open on a phone

Hope this helps !

[silent817]

I see this as great project, I'll buy zero2W to try it. Only one question about webUI: can live view be opened just with one link? I am interested in adding it as start page to the browser on my old device and then opening the browser will start streaming automatically. Would be great doorbell camera I believe.