feat: add HLS Support for webcams

[ericderace]

I use Wyze Cams V2 for webcams on my 3d Printer, via docker-wyze-bridge running on my Pi4. docker-wyze-bridge outputs (among others) HLS streams that can be streamed in a browser using hls.js.

I have hacked my way (I am not a developper) into making this work. I have tested it with two cams at the same time, and it works.

See my fork here: https://github.com/ericderace/mainsail.git

However, I'm sure it's not pretty as I am no developer, but feel free to use any of the code to build a proper implementation.

One issue I have with my implementation is that I cannot use a url like this: http://127.0.0.1:8888/ultimaker-2-max/stream.m3u8 as it gives a CORS error in the console, but http://10.10.16.68:8888/ultimaker-2-max/stream.m3u8 works.

Thanks!

[github-actions]

Language file analysis report:

File	Missing Keys	Unused Keys
da.json	18	0
de.json	17	1
en.json	0	1
es.json	104	1
fr.json	80	1
hu.json	103	1
it.json	260	1
ja.json	19	2
ko.json	106	1
nl.json	18	0
pl.json	103	1
ru.json	103	1
sv.json	221	1
tr.json	18	0
uk.json	80	1
zh.json	19	1
zh_TW.json	336	1

[github-actions]

Language file analysis report:

File	Missing Keys	Unused Keys
en.json	0	1
fr.json	80	1

[github-actions]

Language file analysis report:

File	Missing Keys	Unused Keys
en.json	0	1
fr.json	80	1

[meteyou]

I just cleaned up the code and added native HLS support (for android browsers, for example) and added a destroy beforeUnmount. Please double-check if this works for you.

[github-actions]

Language file analysis report:

File	Missing Keys	Unused Keys
en.json	0	1
fr.json	80	1

[ericderace]

I just tested it, it works for me

Tested these browsers:

• Firefox 109 on Windows 11
• Chrome 109 on Windows 11
• Chrome 109 on Android 13
• Firefox 109 on Android 13
• Chrome 108 on Ubuntu 22.04
• Firefox 109 on Ubuntu 22.04

I have two cameras set up, I can see one or both, switch between them and it all works. There's a bit of a lag with the stream though, but is probably due to my wifi cam/proxy setup. Might be better with WebRTC when it comes

I see far fewer requests in the console now - and the frequency of these requests matches what I see on the docker-wyze-bridge web app for the HLS stream.

Thanks. If I can be of more help (testing?), let me know.

[meteyou]

Yep. HLS has a high latency. We are trying to implement a WebRTC client in Mainsail and a WebRTC streamer in Crowsnest to have a low latency stream with a lower bandwidth than MJPEG.

But the PR looks good to me, and I will merge it in the next few days to be included in the next release. Thanks for contributing!

[github-actions]

Language file analysis report:

File	Missing Keys	Unused Keys
en.json	0	1
fr.json	80	1

[confuzled-dev]

I am considering a wyze camera. What frame rates can you achieve in mainsailOS

[ericderace]

Not sure about frame rate, but there is a bit of lag, about 2 - 5 seconds so I wouldn't recommend it. You also need a docker server to run wyze-bridge, so not strait forward

[grmocg]

HLS (or DASH) can be low latency too.
Is this of interest?

[meteyou]

@grmocg can you please explain this in more detail? i am far from being a pro when it comes to streams/formats/protocols.

[grmocg]

Both DASH and HLS have low-latency variants where they change how they use the container to allow demuxing (and thus playback) without having a whole chunk.

In combination with tune-zero-latency flags on ffmpeg, you can get sub-second latency without any issue on a low-error-rate connection.

The think to look for these days is "CMAF"
A presentation which includes some ffmpeg command-lines can be found here:
https://dvb.org/wp-content/uploads/2020/03/Dash-LL.pdf

I'm happy to construct an ffmpeg command-line if needed.

[meteyou]

@grmocg Thank you for your insightful information regarding low-latency variants of DASH and HLS, and the use of CMAF. This subject seems to be more related to backend operations. In our case, these functions would typically be handled by our backend webcam system called "Crowsnest". (https://github.com/mainsail-crew/crowsnest)

To ensure we cover all bases, I wanted to ask if this would require any specific client-side integration or if it is compatible with this HLS client. If we also need a customization on the frontend to be able to play the stream, pls open a separate FR for this.