Safari browser unable to load mjpeg

[heafox]

There is an issue on Safari, Windows is functioning normally.

There is no problem opening the mjpeg address directly, but loading with Flutter failed. URL: http://192.168.1.153:8080/?action=stream

After changing the content type to image/jpeg, I opened the URL directly and failed to load it, but the Flutter succeeded.

Primitive headers:

HTTP/1.0 200 OK
Connection: close
Server: MJPG-Streamer/0.2
Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0
Pragma: no-cache
Expires: Mon, 3 Jan 2000 12:34:56 GMT
Content-Type: multipart/x-mixed-replace;boundary=boundarydonotcross�

Modified headers:

Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0
Connection: close
Content-Type: image/jpeg
Date: Tue, 21 May 2024 14:59:08 GMT
Expires: Mon, 3 Jan 2000 12:34:56 GMT
Pragma: no-cache
Server: MJPG-Streamer/0.2
Transfer-Encoding: Identity

Thanks

[heafox]

I don't know where the problem is.

[Zekfad]

I am willing to help you, but that's not enough info, I need at least reproducible, your link is obviously a local network. All I know is that MJPEG is some sort of cat *.jpg > meme.jpeg. (Side note: I think that's reinvents mp4 in a bad way and throws hardware video decoding into the window) From code there's no obvious mistakes. Here's some questions:

• was there any errors in js console (fetch is very limited in error reporting)?
• do your data loads? is it correct?
• was response altered by browser behavior, e.g. cors?
• is there errors with default xhr based http client? (this may be inapplicable if your source is live stream of never ending data).

If there's a changes in behavior due to headers, it may be a browser thing, try to do manual fetch and see the data.

[Zekfad]

There's no fix from user side available besides using html image tag or iframe:

WebKit doesn't allow for multipart/x-mixed-replace XHR/Fetch.

See this mail list: https://www.mail-archive.com/webkit-dev@lists.webkit.org/msg28913.html

And mentioned source: https://github.com/WebKit/WebKit/blob/00575a1a4740a524567833f23e451e4a74be366e/Source/WebCore/loader/SubresourceLoader.cpp#L520

Also while testing I noticed that WebKit (on Windows) itself support such things and correctly parses multipart/x-mixed-replace and does what the name implies: replaces page content, when Chromium assumes media format in such case and cannot handle other types (namely HTML).

Here's the difference from debug tools (webkit on top, chrome on bottom):


[heafox]

Thank you, This is very helpful to me.