Show HN: MaryJane – Mjpeg server in 30 lines of async Python | Hacker News Reader

Show HN: MaryJane – Mjpeg server in 30 lines of async Python

github.com

104 pointsandrewstuart29 comments

Open articleView on HN

MaryJane MJPEG server in < 30 lines of Python.

Here is a demo: http://18.116.60.15:8080/maryjane/

Here's the 30 lines of Python: https://raw.githubusercontent.com/bootrino/maryjane/master/m...

Here is the github: https://github.com/bootrino/maryjane

Browsers are able to display images such as PNG, JPG and GIF.

A less known capability of browsers is to display a stream of JPG images. This is called MJPEG (motion JPEG).

All you need to do is specify the MPJEG server address in an image tag and it just works.

It's written in less than 30 lines of async Python.

This project is MIT licensed.

If I understand multipart/x-mixed-replace right, this could be used with other image formats as well? Really cool use of an almost forgotten technology.

Typically though other image formats have better options. gif, apng, webm, etc (and chrome killed support for the non image case). The main place x-mixed-replace makes sense is a dead simple webcam that takes a picture every x seconds. Even then, in the modern world it probably makes more sense to just implement some streaming video stuff. MJPEG is not bandwidth efficient.

#but-it-just-works

The fact that "it just works" by putting an address in an IMG tag is really important. Streaming setups can get complex fast and sometimes it's worth paying the bandwidth penalty of mjpeg in order to build something super simple.

As mentioned in a different comment - mjpeg is certainly less bandwidth efficient, but it's super simple to implement - just the Python code I've posted plus an image tag.

Also, streaming protocols tend to have a number of seconds latency, which for certain types of applications isn't acceptable. That's when mjpeg might do the job because it just instantly starts blasting frames down the tubes.

> Also, streaming protocols tend to have a number of seconds latency, which for certain types of applications isn't acceptable. That's when mjpeg might do the job because it just instantly starts blasting frames down the tubes.

In this case you might run into issues there. This demo is all on TCP which means head of line blocking. That's why you typically see MJPEG wrapped in rtp rather than http.

I agree that mjpeg is super simple and streaming support can get complicated very fast. There a certainly use cases where mjpeg is the correct trade off. But don't under estimate bandwidth scaling requirements - i think if you have 20 clients streaming 1080p@24 fps, you're already maxing out a 1 gbps line.

Even still though, latency can't be that bad for video formats with actual temporal compression in low latency mode. I'm not an expert in this area, but WebRTC is widely supported, uses vp9. When i do video conferencing with people the latency is pretty low, so this must be a solved problem.

I’ll have to disagree with you there. Oculus Link uses a (HW) h264 encoder and run at pretty high resolutions without multiple seconds of latency. Latency is in the network layer mostly (and maybe improper tuning of codecs) and that’s helped more by sending smaller data, not larger. Maybe if you don’t have HW acceleration, but that’s rare as even CPUs have Hw encoding blocks (Intel’s QuickSync for example).

Great name.

I wrote this in Tornado a bunch of years ago. Where do you go next? What else could you do?

A fun thing to do might be have write on on demand video thumbnail player.

To do this you'd have a bunch of video files at the back end, specify which one you want in the URL, then get Python to run ffmpeg, extracting jpeg frames from the specified video and writing the frames to the ramdrive /dev/shm. As the user rolls the mouse over, some JavaScript changes the img tag to point to the mjpeg server and the video plays.

It should be possible to do this in only four or five extra lines I think.

See the github readme for the correct ffmpeg command line to do this.

I do wonder if there's a way to stream audio in sync.

I like that. Could be neat if uploaded could specify key frames to jump to to start the preview.

Also seems like a hacky way to get video to play on my Tesla browser. I could probably couple this with a Raspberry Pi and pipe the audio to Bluetooth for the speakers, then stream the video content from the Pi to a web server that I access through the Tesla browser.

Seems to be a useful and "dumb" way of syncing playback across multiple devices, windows or browsers. Nice work

I've used the ffserver from ffmpeg for a few projects: https://trac.ffmpeg.org/wiki/ffserver

https://github.com/LeipeLeon/destaat

sadly (but understandable) ffserver has been removed from ffmpeg on 2018-01-06.

that's a 404 repo, my dude.

:facepalm:....

i've made it public, no need to keep it a secret :P

hmmm. i'd consider replacing the sleep with a wait on inotify. having the server and image renderer run on different non-synchronized clocks means that frames may occasionally be doubled/dropped.

here we go, aionotify: https://pypi.org/project/aionotify/

>> having the server and image renderer run on different non-synchronized clocks

Would you mind please helping me understand what this means, in detail?

I'm pretty sure there's no clock synchronisation anywhere.

I think they mean the clock involved with replacing the image every X ms + the clock in your python code. You could remove the python clock code in favour of being notified when the file changes.

That's my tired understanding, anyway.

There's no frame rate built into MJPEG, so the code that calculates frame budget cannot be avoided.

It might be a good idea to insert a inotify immediately before the file read. You'd still need the timing code though.

here's an example:

f_rate = frame rate = 30 fps (for example)

f_period = 1/f_rate = 1/30 = 33ms

imagine the server serves every f_period, and the image gets updated on the ramdisk every f_period + delta where delta = f_period/16 because the clock from the image updater is not synchronized with the server and is a little slower (by some idealized fixed amount).

in this case, every 16 frames, the image updater would advance past the server, and the server would serve a duplicate frame.

in practice, delta is often not fixed, and can be positive or negative and instead is described with a distribution called jitter. both the server and the image updater have jitter, so duplicate/dropped frames will occur as they leap ahead and behind each other with the +/- jitters for each unsynchronized clock getting added to their respective periods for each frame. (this is, of course, assuming they're running at the same rate, which they often do not- which is why ultimately you want one to be the primary clock and the other to be driven by it)

Ah yes this makes sense thanks, that's a helpful and clear explanation.

In this case, for my personal needs, I'm OK with this happening - my requirement is not for highly accurate frame timing.

Other people might however, in which case your advice should be taken into accoujnt.

One use for this is using old android tablets as ambient display screens - you just autostart a browser on an mjpeg url and update the image to update the screen. Note that mjpeg doesn't have a frame rate - it just renders the frames as they show up, so you don't actually have to keep sending them when they're not changing... except that chrome is buggy about not actually rendering the image right when it shows up :(

(I did a version of this in bash with netcat, and here-documents for the mime parts, which is where I ran into the problem. https://underjord.io/live-server-push-without-js.html was the inspiration for the display-screen case...)

You can do it in even fewer with Haskell :P

https://hub.darcs.net/thewakalix/flapper/browse/app/Main.hs

There is was a tiny http server called hibachi that was about 1500bytes(or whatever ioccc max?) and many years back I implemented mjpeg cgi script for it in busybox posix shell script. I forget how long it was but I would guess no more that 100 lines of sh.

What are the curly braces around the URL in <a>'s href attribute? Is there a spec for it?

A bug.

Reply on news.ycombinator.com