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.

[TzuHuanTai]

Thank you all guys.
After day and nights coding and debugging, I'll release the web and wrap up all other chores by this weekend.
Only the basic functions are support now, but I think it's enough for simple scenarios.

[TzuHuanTai]

Here is the web ui: Pi Camera Web
All setup process are the same as what you do on the app.

[beyonlo]

Here is the web ui: Pi Camera Web All setup process are the same as what you do on the app.

Hello @TzuHuanTai

Sorry, maybe I had missed something during the evolution together with other guys about this issue. I did not find in this project on github (RaspberryPi_WebRTC) the source code of web ui. Is the web ui source code in another project, or is it mandatory to use the web ui hosted in your server so you do not publish the source code for us and we do not host it (and to do modifications) in our servers?

[TzuHuanTai]

The ui source code is not provided.

[obenchekroun]

Hi @TzuHuanTai !

Thanks for the work !
I have spent a bit of time testing it. It works really well on desktop (macOS Sonoma, Safari version 17.5), and the configuration is quite straightforward. However, on my iPhone (iPhone 14 pro, iOS 16.5, with Safari as a web browser), the sound doesn't work. Everything else works on my phone (preview, video) except the sound. I use a cheap usb microphone plugged to the pi, which does work when streaming on desktop.

Please feel free to ask any question, I will try to help as much as I can.

The ui source code is not provided.
On another note, are planning on releasing the source code,

Thank you very much

EDIT : I did ended up having the sound working, not sure really how. I tried muting and unmuting it several times, on fullscreen mode and normal mode. It did work at the end, but I am not sure what is the issue and can't seem to replicate it now, as it loads the sound streaming with the video immediately. Maybe an issue with WebKit on iPhone taking long time to actually start streaming the sound/or failing to start streaming ?
I tried on Google Chrome on iPhone, needed to do the same tweak, to get the sound working. I am not that surprised, as if I recall correctly, browsers on the iPhone are bound to use WebKit as a browser engine, at least on old iOS versions.

[beyonlo]

The ui source code is not provided.

Hello @TzuHuanTai

Is there the possibility that you please at least share a very simple working example of a web ui for us? Do not need any auth mode, beautiful, or any other feature, just a simple example opening a video and doing the MQTT over WebSocket, and STUN/TURN Server stuff to get the video stream on the browser.

Let me please explain why that is important for me, and may be for others as well:

1. If I use the web ui from your server I will always need to have the internet to watch the cameras. But I live where there is no internet cable and I use Wireless from a tiny ISP provider, and that radio (wireless) internet is not stable, and sometimes with a little rain it stops working for many hours, or days. So, I would watch my cameras even when I have no internet. For that I need just host the web ui in my local server - the MQTT broker is in the local LAN as well.
2. I would also change a bit of web ui to add some notifications, like as a sensor, when an animal passes over the camera or to check another kind of sensor.
3. Of course, in this way it always depends that your server is up to watch my cameras, and sometimes some parts of the globe have the internet and others do not, that is the real world. So, hosting the web ui on my server I can have more security and control.

The project is yours and if you do not want to share even a very simple example (as a start point for us), I will understand - no problem. I know that there are the webrtc official samples, like as in this url, but unfortunately I'm not a good developer/frontend, plus MQTT and STUN/TURN Server configs, so if you share a ready very simple example as start point will be amazing.

Thank you in advance!

[TzuHuanTai]

Sorry for the late reply.
I'm thinking whether make a javascript package this few days.
If I write a c++ the client side, and package it up by python, js, java, c#, or so. That means all coding language can easily use it.

In fact, my client source code has hundreds or thousands of lines, which use different module, monitor connection status, and control a data transfer via datachannel.
I told with some of my friends, they said even though webrtc official site have a lot of example, it might take a lot of time just to learn it, and the code only handle the webrtc connection needs about 100 rows. As a frontend engineer, most of people don't have video streaming background, if there are some third-party package like videojs-webrtc-plugin, it would be much friendly and help everyone across the WebRTC berrier.

I assume the api look like this indeed simplify a lot of code:

let videoElement = document.getElementById('videoElement');
const congif = {
   rpiUid: xxxx,
   mqttHost: xxxx,
   mqttPort: xxxx,
   ....
};
let connObj = new PiCamera(congif);
connObj.attachMediaElement(videoElement);
connObj.connect();
connObj.snapshot();
connObj.onSnapshot((data:Uint8Array)=>{
    ...
});
connObj.disconnect();

This is the best way I've found so far, but I haven't made the decision to develop a package yet. There's still a lot of things need to take into account.

[TzuHuanTai]

I've tested the javascript client package for connecting to pi_webrtc.
npm: https://www.npmjs.com/package/picamera.js
github: https://github.com/TzuHuanTai/PiCamera.js