
Decode Like It's 1999: MPEG-1 Decoder in JavaScript - ronsor
http://phoboslab.org/log/2017/02/decode-it-like-its-1999
======
userbinator
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.

~~~
westoncb
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.

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

------
HugoDaniel
"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?"

:D

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

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

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

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

------
pjc50
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/](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.

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

~~~
seanmcdirmid
[https://en.m.wikipedia.org/wiki/OMeta](https://en.m.wikipedia.org/wiki/OMeta)

------
mncharity
> 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...](https://wiki.archlinux.org/index.php/Hardware_video_acceleration)
[2] [https://chromium-
review.googlesource.com/c/chromium/src/+/53...](https://chromium-
review.googlesource.com/c/chromium/src/+/532294) [3]
[https://bugzilla.mozilla.org/buglist.cgi?quicksearch=linux+h...](https://bugzilla.mozilla.org/buglist.cgi?quicksearch=linux+hardware+decoding)

------
A_Person
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?

------
Tade0
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.

~~~
yjftsjthsd-h
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

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

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

------
marpstar
Atwood's Law[1] at work again.

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

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

------
Nihilartikel
I've actually been using a web assembly port of FFMPEG
([https://github.com/Kagami/ffmpeg.js/blob/master/README.md](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](https://www.ultime.me/edit) For
reasonably sized mp4, mov, gif it decodes and encodes at a good speed.

------
rootw0rm
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.

------
vijaybritto
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!

~~~
pronoiac
Building an MPEG decoder, video and audio, in JavaScript, over years? _Sure!_

Using JavaScript build tools? _Lol nope!_

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

------
yeswecatan
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.

------
tjelen
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).

------
pronoiac
If the Björk video, All is Full of Love, on
[http://jsmpeg.com](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/](http://www.artofthetitle.com/title/westworld/)

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

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

------
mbrumlow
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](http://robot247.io)
[https://github.com/mbrumlow/webbot](https://github.com/mbrumlow/webbot)

------
samsonradu
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.

------
blt
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.

~~~
ygra
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.

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

------
dis-sys
It remembers me this video.

[https://www.youtube.com/watch?v=J4WSbjN9zng](https://www.youtube.com/watch?v=J4WSbjN9zng)

------
robert_foss
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.

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

------
mliker
This is great educational content. Thanks!

------
kruhft
Does mencoder support encoding of MPEG-1?

~~~
kruhft
Yup: [http://www.mplayerhq.hu/DOCS/HTML/en/menc-feat-
mpeg.html](http://www.mplayerhq.hu/DOCS/HTML/en/menc-feat-mpeg.html)

------
jamix
> Why use JSMpeg?

> WebRTC is not supported on iOS.

No longer true.

