Björk – All is Full of Love, 1999 – MPEG1/MP2, 960x540 at 1.5Mbit/s, decoded in JavaScript

A JavaScript MPEG1 Video & MP2 Audio Decoder

JSMpeg is a Video Player written in JavaScript. It consists of an MPEG-TS Demuxer, WebAssembly MPEG1 Video & MP2 Audio Decoders, WebGL & Canvas2D Renderers and WebAudio Sound Output. JSMpeg can load static files via Ajax and allows low latency streaming (~50ms) via WebSocktes.

JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari & Edge) and comes in at 42kb gzipped.

See jsmpeg.com/perf.html for a performance comparison with different resolutions and features en-/disabled.

Using it can be as simple as this:

<script src="jsmpeg.min.js"></script>
<div class="jsmpeg" data-url="video.ts"></div>

Download

Low Latency Video & Audio Streaming that works everywhere – yes, even on the iPhone

JSMpeg can connect to a WebSocket server that sends out binary MPEG-TS data. Where this data comes from, is up to you.

The latency is only dependend on your source, the network conditions and how fast your browser, GPU and monitor can spit out frames. For a screen capture on a local network, it can be as low as 50ms.

One of the easiest ways to set this up is to use ffmpeg and a tiny nodejs WebSocket server. See the documentation on github for the details.

Projects using JSMpeg & further reading

Why use JSMpeg?

What's the alternative?

With JSMpeg you get:

Should you use JSMpeg for everything? Certainly not. If you just want to have a static video on your page, go with Youtube or encode it as WebM & MP4 and host it yourself.

If you need tight control over playback, realtime streaming or if you're just curious about Video & Audio codecs, JavaScript or WebGL, consider JSMpeg.

(c) Dominic Szablewskiphoboslab.org
made in Hesse <3