Decode Like It's 1999: MPEG-1 Decoder in JavaScript | Hacker News Reader

Decode Like It's 1999: MPEG-1 Decoder in JavaScript

phoboslab.org

211 pointsronsor62 comments

Regardless of language, writing a decoder for a standard image or video format is a highly recommended exercise to develop your skills at implementating a specification (and optimisation, if you choose.) You don't have to jump into the deep end with H.264 or similar, and even MPEG-1 is beyond what I'd recommend for a beginner; something like H.261 would be good to start with, with MPEG-1 being the next step up.

The fun thing about experimenting with video codecs is that your results are visible in a very real way.

Along similar lines, writing a simple emulator (e.g. Chip-8) or a 3D model loader/renderer/animator (e.g. for md2 or md3 files, which have an open spec and lots of models available) would be similarly good I think, depending on your interest. In any case, you still get the implementing a spec practice and very visible results.

Compilers or interpreters are also great. In my experience the knowledge directly translates to everyday programming tasks.

Can definitely recommend this!

A few years ago I wrote a JPEG encoder for a class, and it was one of the most fun projects I've had at the university. Seeing a picture with those iconic compression artifacts produced by your own implementation feels pretty nice :)

"And suddenly you spent two hours of your life and downloaded several GB of tools. All to build a 20kb library, for a language that doesn't even need compiling. How do I build this library 2 years from now? 5 years?"

But the alternative the author suggests is to use UglifyJS - which you also need "node, homebrew and gigabytes of tools" for.

Author addressed this by saying that you can also just replace it with "cat" and it will all still work

Or just 20 seconds copypasting on one of the numerous free web services like uglifyjs.net

This is not under any realistic or sane conditions a solution.

In particular, worrying about not being able to reproduce something and then proposing to use a web app for it seems... counterproductive.

A colleague of mine "wrote" a H265 decoder in Javascript.

I put that in quotes, because it was a byproduct of a much cleverer project: http://www.argondesign.com/products/argon-streams-hevc/ ; he wrote a parser for the "human readable" H265 specification, using the O-Meta system. This supported a number of pluggable backends, one of which emitted a javascript program, and one of which was the actual saleable product of an H265 decoder validation test suite.

Wow that is a very interesting approach!

I cannot find anything under "O-Meta"; can you provide a few references?

https://en.m.wikipedia.org/wiki/OMeta

> Decode Like It's 1999

Here in the future, both Firefox and Chromium are still decoding MPEG in software, not hardware.[1]

Chromium is actively working to fix that[2]. Mozilla, not so much.[3]

I've been hitting this lately, as webcams use MPEG at high resolutions (to fit USB 2 bandwidth). It's painful for AR.

[1] https://wiki.archlinux.org/index.php/Hardware_video_accelera... [2] https://chromium-review.googlesource.com/c/chromium/src/+/53... [3] https://bugzilla.mozilla.org/buglist.cgi?quicksearch=linux+h...

Good writeup.

This is probably a silly question, but: The article says he has to use performance.now. But isn't one of the mitigations for Spectre and/or Meltdown, to reduce the accurance and/or resolution of performance.now? If so, would that affect his code?

I remember when this came out, because at that time we were in a desperate need to shrink the assets of a mobile slot game we were porting from flash to HTML5 for a customer - we had rougly 50MB of data(mostly animations), so the game failed to load on a 2G connection which apparently was the best thing one could get at the conference where the customer's sales rep was at that time.

We squeezed them to 10MB with minimal quality reduction, but another problem quickly arouse - this was late 2013 and the phones back then could barely handle such load and heated up tremendously.

All in all we negotiated a pretty deep cut in special effects which yielded ~25MB in reductions. A rotten compromise, but a compromise nonetheless.

On a phone, could you even see a difference from reducing quality? I've always intentionally gotten the lower quality ex. youtube streams on mobile because on a 4-5" screen I'll never miss those pixels

Sort of. We had a separate file for each animation that contained the grayscale alpha channel and some artifacts were showing.

Please be careful, this library has hidden GPL encumbrance issues. See my prior comment for details: https://news.ycombinator.com/item?id=13556718

Atwood's Law[1] at work again.

[1]: https://blog.codinghorror.com/the-principle-of-least-power/

Cool project. Now if I could just find some VCDs I would be in business.

I've actually been using a web assembly port of FFMPEG (https://github.com/Kagami/ffmpeg.js/blob/master/README.md) successfully for a while now in my clojure(script) WIP client-side meme editor for a while https://www.ultime.me/edit For reasonably sized mp4, mov, gif it decodes and encodes at a good speed.

Pretty fantastic post, thanks for sharing. I have a love/hate relationship with JS (which I think is normal?) However, this is one of the love moments. Excellent choice on the sample video too, the Director's Series DVDs have also been my test material for various encoding/decoding adventures.

Oh the shade on webpack and npm. Its brutal but for a 20kb library thats actually too much time to setup. Webpack4 has improved a lot now as it supports zero config mode now. All thats needed is a src folder with an index.js in it. Much welcomed change for smaller projects!

Building an MPEG decoder, video and audio, in JavaScript, over years? Sure!

Using JavaScript build tools? Lol nope!

See also Route9, a VP8/WebM decoder in JavaScript - https://people.xiph.org/~bens/route9/route9.html

Could anyone provide good resources to learn more about audio/video codecs? I know nothing about how they work at a technical level/how to write something like this myself.

If I remember it correctly MPEG-2 patents are supposed to expire this year. So maybe it's time for JSMPEG2? (Ok just kidding, the whole MPEG-2 spec looks huge).

If the Björk video, All is Full of Love, on http://jsmpeg.com site looks sorta secondhand familiar, it was cited as a large influence on the makers of the Westworld title sequence: http://www.artofthetitle.com/title/westworld/

MPEG-1 is more of a 1993-1995 Peak Usenet thing..

Oo-wee-oo, I look just like Buddy Holly...

My stupid robot site uses this! Although I have not had much time to keep any robots on line it can be found at following.

http://robot247.io https://github.com/mbrumlow/webbot

JSMpeg is a great product. I have used it for low-latency live streaming before MSE (Media Source Extensions) arrived in the major browsers. Nowadays the plugin-free alternatives for live streaming are much more efficient, push fragmented MP4s to the browsers and append to a MediaSource buffer using any modern codec supported.

cool project! But one question:

> A bug that still stands in some Browsers (Chrome and Safari) prevents WebGL from using the Uint8ClampedArray directly. Instead, for these browsers we have to create a Uint8Array view for each array for each frame. This operation is pretty fast since nothing needs to be copied, but I'd still like to do without it.

Why worry about it if you're not actually copying the buffer? It's like allocating one extra tiny object per frame, right? It seems like it would be totally insignificant compared to the rest of the workload.

Compare it to a compiler that refuses to compile invocations of methods with optional parameter correctly. Sure, you can just insert the missing arguments with their default values, but you shouldn't have to. It's an inconvenience and annoying, especially for something that should just work.

When you don't captcha your comment submission system...

It remembers me this video.

https://www.youtube.com/watch?v=J4WSbjN9zng

I would think that building ffmpeg with emscripten to produce WASM would be the way to go.

If the goal is anything but learning that is.

What is the resource usage of the decoder in terms of 1999 hardware versus 2018?

This is great educational content. Thanks!

Does mencoder support encoding of MPEG-1?

Yup: http://www.mplayerhq.hu/DOCS/HTML/en/menc-feat-mpeg.html

ffmpeg does too, with a built-in vcd preset too.

> Why use JSMpeg?

> WebRTC is not supported on iOS.

No longer true.

Reply on news.ycombinator.com