Experimental HLS support

Chudsaviet · June 5, 2020, 3:39am

Hey, @jneilliii. How everything is working for you?
What I’m waiting for is @foosel or other maintainer words on if we shall integrate it into main code, of just as a plugin.

jneilliii · June 5, 2020, 1:52pm

I haven't really been able to do any additional testing unfortunately, had to rebuild my pi4/hyperpixel setup.

Chudsaviet · July 3, 2020, 2:18am

@foosel, please take a look into my latest question - shall we make HLS support a merge request to main branch, or a plugin?

foosel · July 3, 2020, 8:36am

If you don't limit it to HLS but actually make it generic support for webcam via video tag (I can't estimate how difficult that would be right now, if at all), I'd be happy to merge into core (maintenance branch).

jneilliii · July 3, 2020, 1:32pm

If that CORS issue doesn't get resolved then I think you might be asking for headaches on this one @foosel.

foosel · July 3, 2020, 1:46pm

Ah, I overlooked that. In that case plugin until the teething pains are resolved.

Chudsaviet · July 5, 2020, 12:41am

CORS is a mechanism that manages restrictions with including resources from different domain. In OctoPi case, the plan is to include the HLS stream in the same HAProxy instance, which will eliminate CORS issues.
Otherwise, there are some HTTP header/HTML parameters that can tell CORS to allow external resources.
The issues @jneilliii faced are there because it's experimental feature, in production CORS issues will be resolved.

What I'm worrying about:

Now the streamer type (MJPG or HLS) is detected by URL's ending. If it ends with 'm3u8' - it's HLS. I think it's easier to do it like this than add a separate drop down menu to settings page. But it limits the URL flexibility, so in rare cases it won't work.
I'm not sure I will be able to support flip/mirror capabilities on UI level like OctoPrint have for MJPG stream. I will research this question. But generally, the mirror/flip/other filters can and shall be done on ffmpeg level.

chyrla · July 15, 2020, 9:13pm

Hi, yeah i'm in a "rare case" cause if i let my url http://192.168.0.31/img/stream.m3u8 it does not work, it need http://192.168.0.31/img/stream.m3u8?channel=1

If you have a way to allow that kind of url ?

Maybe instead of ending by .m3u8 it could be a "if contain" .m3u8 ?

jneilliii · July 15, 2020, 9:19pm

I just took a look at the plugin's code and it appears it should already be allowing for that in this function.

github.com

jneilliii/OctoPrint-HLSWebcam/blob/50ecd21550db042bf941a0e29451ef4b83f26259/octoprint_hlswebcam/static/js/hlswebcam.js#L553-L572


self._determine_stream_type = function(streamUrl) {
    // TODO: Determine stream type by resource contents, not by extension.
    if (streamUrl) {
        var lastDotPosition = streamUrl.lastIndexOf(".");
        var firstQuotationSignPosition = streamUrl.indexOf("?");
        if (lastDotPosition > -1) {
            if (firstQuotationSignPosition > -1) {
                var extension = streamUrl.slice(lastDotPosition+1, firstQuotationSignPosition-1);
            } else {
                var extension = streamUrl.slice(lastDotPosition+1);
            }
            if (extension == "m3u8") {
                return "hls";
            };
        };
        return "mjpg";
    } else {
        throw "Empty streamUrl!";
    };
};

I wonder if maybe restarting OctoPrint is necessary to detect the URL change maybe?

chyrla · July 15, 2020, 9:26pm

Cant figure it out, i tried things but meh, same result till now

jneilliii · July 15, 2020, 9:31pm

It might be CORS related based on previous discussions because you're loading the stream from a different server other than where OctoPrint is running.

chyrla · July 15, 2020, 9:34pm

With HLS Play from chrome strore, it works even without the ?channel=1

The camera, for information, is this one : https://www.sercomm.com/contpage.aspx?langid=1&type=prod3&L1id=2&L2id=3&L3id=9&Prodid=457

But with my ISP firmware on it

Chudsaviet · July 16, 2020, 12:26am

Try Chrome plugin “Allow CORS” - https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
It’s not a production solution, but if it will work with this plugin - it’s a CORS issue.
Alternatively you can look into browser console.

chyrla · July 16, 2020, 7:00am

Hi, i looked in the console and yeah, it looks like tit's a CORS issue : Access to XMLHttpRequest at 'http://192.168.0.31/img/stream.m3u8' from origin 'http://octopi.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But i don't get how to set the extension to make it work

Chudsaviet · July 20, 2020, 12:10am

@foosel, @jneilliii, here is the merge request to delel branch: https://github.com/OctoPrint/OctoPrint/pull/3647 .
Look into the merge request description for CORS issues explanation and possible workarounds.
Please, review and put your thoughts.

Chudsaviet · July 20, 2020, 12:12am

@chyrla, look into the merge request too, maybe you will find a workaround.

simpat1zq · July 20, 2020, 2:45pm

So I skimmed through the thread, and see that there is a plugin, but all a pull request to OP. Should I wait for the pull request to get implemented, or should I be OK grabbing the plugin while I wait?

Chudsaviet · July 20, 2020, 4:00pm

Grab the plugin and mind CORS issues.

chyrla · July 21, 2020, 7:53pm

Well ok CORS chrome app was just not activated...

So, no more CORS issue, but i have a "Unchecked runtime.lastError: The message port closed before a response was received." error in console. here /#tab_plugin_hlswebcam:1

I don't know if this is the problem, but i still have the player with infinite loading screen.

EDIT :
Solved the error, it was from real-debrid extension. But it does not fix my infinite loading. No error anywhere but no stream.

Tried on Google chrome and Firefox :

Chudsaviet · July 26, 2020, 8:31pm

I have made an OctoPi branch with Octoprint 1.4.0+HLS patches and HLS by default.
I suppose it can be used for testing before HLS code will be merged to Octoprint release.
Build instructions inside.

@chyrla, there you can look how to proxy your HLS via HAProxy.