Rewrite

LICENSE

@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright (c) 2016 Dominic Szablewski
+Copyright (c) 2017 Dominic Szablewski
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,161 +1,236 @@
-# jsmpeg
+# JSMpeg – MPEG1 Video & MP2 Audio Decoder in JavaScript
 
-#### An MPEG1 Video Decoder in JavaScript ####
+JSMpeg is a Video Player written in JavaScript. It consists of an MPEG-TS demuxer, MPEG1 video & MP2 audio decoders, WebGL & Canvas2D renderers and WebAudio sound output. JSMpeg can load static videos via Ajax and allows low latency streaming (~75ms) via WebSocktes.
 
-jsmpeg is a MPEG1 Decoder, written in JavaScript. It's "hand ported", i.e. not compiled with
-emscripten or similar. This will probably make it obsolete with the advent of asmjs.
+JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari, Edge) and comes in at just 20kb gzipped.
 
-Some demos and more info: [phoboslab.org/log/2013/05/mpeg1-video-decoder-in-javascript](http://www.phoboslab.org/log/2013/05/mpeg1-video-decoder-in-javascript)
+Using it can be as simple as this:
+```html
+<script src="jsmpeg.min.js"></script>
+<div class="jsmpeg" data-url="video.ts"></div>
+```
 
+Some more info and demos: [jsmpeg.com](http://jsmpeg.com/)
 
-## API ##
 
+## Usage
 
-### Constructor ###
+A JSMpeg video player can either be created in HTML using the CSS class `jsmpeg` for the container:
 
-`var player = new jsmpeg(file [, options])`
+```html
+<div class="jsmpeg" data-url="<url>"></div>
+```
 
-The `file` argument accepts a URL to a .mpg file or a (yet unconnected) WebSocket instance for streaming playback.
+or by directly calling the `JSMpeg.Player()` constructor in JavaScript:
 
-The `options` argument to the `jsmpeg()` supports the following properties:
+```javascript
+var player = new JSMpeg.Player(url [, options]);
+```
 
-- `benchmark` whether to log benchmark results to the browser's console
-- `progressive` whether to start playback as soon as the first chunks have been loaded. Uses HTTP range-requests. Default `false`.
-- `progressiveThrottled` whether to throttle downloading chunks until they're needed for playback. Requires `progressive`; default `false`.
-- `canvas` the HTML Canvas element to use; jsmpeg will create its own Canvas element if none is provided
-- `autoplay` whether playback should start automatically after loading
-- `loop` whether playback is looped
-- `seekable` whether a seek-index is build during load time; neccessary for `seekToFrame` and `seekToTime` methods
-- `preserveDrawingBuffer` whether the WebGL context is created with preserveDrawingBuffer - necessary for "screenshots" via `canvas.toDataURL()`; default `false`.
-- `onload` a function that's called once, after the .mpg file has been completely loaded
-- `ondecodeframe` a function that's called after every frame that's decoded and rendered to the canvas
-- `onfinished` a function that's called when playback ends
+Note that using the HTML Element (internally `JSMpeg.VideoElement`) provides some features on top of `JSMpeg.Player`. Namely a SVG pause/play button and the ability to "unlock" audio on iOS devices.
 
+The `url` argument accepts a URL to an MPEG .ts file or a WebSocket server (ws://...).
 
-### Methods ###
+The `options` argument supports the following properties:
 
-- `play()` begin playback
-- `pause()` pause playback
-- `stop()` stop playback and revert play position to the beginning
-- `seekToFrame(frame)` seek to the specified frame (Number)
-- `seekToTime(seconds)` seek to the specified time (Number)
-- `nextFrame()` if playback is paused, decode and render the next frame; returns then HTML Canvas element
+- `canvas` – the HTML Canvas elment to use for video rendering. If none is given, the renderer will create its own Canvas element.
+- `loop` – whether to loop the video (static files only). Default `true`.
+- `autoplay` - whether to start playing immediately (static files only). Default `false`.
+- `audio` - whether to decode audio. Default `true`.
+- `video` - whether to decode video. Default `true`.
+- `poster` – URL to an image to use as the poster to show before the video plays.
+- `pauseWhenHidden` – whether to pause playback when the tab is inactive. Default `true`. Note that browsers usually throttle JS in inactive tabs anyway.
+- `disableGl` - whether to disable WebGL and always use the Canvas2D renderer. Default `false`.
+- `preserveDrawingBuffer` – whether the WebGL context is created with `preserveDrawingBuffer` - necessary for "screenshots" via `canvas.toDataURL()`. Default `false`.
+- `progressive` - whether to load data in chunks (static files only). When enabled, playback can begin before the whole source has been completely loaded. Default `true`.
+- `throttled` - when using `progressive`, whether to defer loading chunks when they're not needed for playback yet. Default `true`
+- `chunkSize` - when using `progressive`, the chunk size in bytes to load at a time. Default `1024*1024` (1mb).
+- `decodeFirstFrame` - whether to decode and display the first frame of the video. Useful to set up the Canvas size and use the frame as the "poster" image. This has no effect when using `autoplay` or streaming sources. Default `true`.
+- `maxAudioLag` – when streaming, the maximum enqueued audio length in seconds.
+- `videoBufferSize` – when streaming, size in bytes for the video decode buffer. Default 512*1024 (512kb). You may have to increase this for very high bitrates.
+- `audioBufferSize` – when streaming, size in bytes for the audio decode buffer. Default 128*1024 (128kb). You may have to increase this for very high bitrates.
 
-When live streaming, jsmpeg supports the following methods for recording the stream clientside
-- `canRecord()` returns `true` when streaming has started and recording can begin, `false` otherwise
-- `startRecording(callback)` attempts to start recording, calls the optional callback when recording started - usually when the next intraframe was received
-- `stopRecording()` stops recording and returns a `Blob` with the recorded .mpg data
+All options except from `canvas` can also be used with the HTML Element through `data-` attributes. E.g. to specify looping and autoplay in JavaScript:
 
+```javascript
+var player = new JSMpeg.Player('video.ts' {loop: true, autoplay: true});
+```
 
+or HTML
+```html
+<div class="jsmpeg" data-url="video.ts" 
+	data-loop="true" data-autoplay="true"></div>
+```
 
-## Usage Examples ##
+Note that `camelCased` options have to be hyphenated when used as data attributes. E.g. `decodeFirstFrame: true` becomes `data-decode-first-frame="true"` for the HTML element.
 
-```javascript
-// Synopsis: var player = new jsmpeg(urlToFile, options);
-// The 'options' argument and all of its properties is optional. If no canvas element 
-// is given, jsmpeg will create its own, to be accessed at .canvas
 
-// Example:
-var canvas = document.getElementById('videoCanvas');
-var player = new jsmpeg('file.mpeg', {canvas: canvas, autoplay: true, loop: true});
+## JSMpeg.Player API
 
-player.pause();
-player.play();
-player.stop();
+A `JSMpeg.Player` instance supports the following methods and properties:
 
+- `.play()` – start playback
+- `.pause()` – pause playback
+- `.stop()` – stop playback and seek to the beginning
+- `.volume` – get or set the audio volume (0-1)
+- `.currentTime` – get or set the current playback position in seconds
 
-// If you pass 'seekable: true' in the options, you can seek to a specific frame
-// or time in the video.
 
-var player = new jsmpeg('file.mpeg', {canvas: canvas, seekable: true});
+## Encoding Video/Audio for JSMpeg
 
-player.seekToFrame(1200); // Seek to intra frame before frame 1200
-player.seekToTime(20); // Seek to intra frame before 20sec
+JSMpeg only supports playback of MPEG-TS containers with the MPEG1 Video Codec and the MP2 Audio Codec. The Video Decoder does not handle B-Frames correctly (though no modern encoder seems to use these by default anyway) and the width of the video has to be a multiple of 2.
 
-// seekToFrame() and seekToTime() only seek to the closest, previous intra frame by
-// default. If you want to seek to the exact frame or time, pass 'true' as second
-// parameter.
-// Depending on the input video, this can be potentially slow, as jsmpeg has
-// to decode all frames between the previous intra frame and the seek target
+You can encode a suitable video using [ffmpeg](https://ffmpeg.org/) like this:
 
-player.seekToFrame(1200, true); // Seek to frame 1200 exactly
+```sh
+ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts
+```
 
+You can also control the video size (`-s`), framerate (`-r`), video bitrate (`-b:v`), audio bitrate (`-b:a`), number of audio channels (`-ac`), sampling rate (`-ar`) and much more. Please refer to the ffmpeg documentation for the details.
 
-// Passing 'seekable: true' also populates the total frame count and duration
-// of the video
+Comprehensive example:
+```sh
+ffmpeg -i in.mp4 -f mpegts \
+	-codec:v mpeg1video -s 960x540 -b:v 1500k -r 30 -bf 0 \
+	-codec:a mp2 -ar 44100 -ac 1 -b:a 128k \
+	out.ts
+```
 
-console.log('Duration: '+player.duration+' seconds ('+player.frameCount+' frames)')
 
+## Performance Considerations
 
+While JSMpeg can handle 720p video at 30fps even on an iPhone 5S, keep in mind that MPEG1 is not as efficient as modern codecs. MPEG1 needs quite a bit of bandwidth for HD video. 720p begins to look okay-ish at 2 Mbits/s (that's 250kb/s). Also, the higher the bitrate, the more work JavaScript has to do to decode it.
 
-// An 'onload' callback can be specified in the 'options' argument
-var mpegLoaded = function( player ) {
-	console.log('Loaded', player);
-};
-var player = new jsmpeg('file.mpeg', {onload: mpegLoaded});
+This should not be a problem for static files, or if you're only streaming within your local WiFi. If you don't need to support mobile devices, 1080p at 10mbit/s works just fine (if your encoder can keep up). For everything else I would advise you to use 540p (960x540) at 2Mbit/s max.
 
-// If you don't use 'autoplay' and don't explicitly call .play(), you can get individual
-// video frames (a canvas element) like so:
-var frame = null;
-while( (frame = player.nextFrame()) ) {
-	someOtherCanvasContext.drawImage(frame, 0, 0);
-}
-```
 
+## Streaming via WebSockets
 
+JSMpeg can connect to a WebSocket server that sends out binary MPEG-TS data. When streaming, JSMpeg tries to keep latency as low as possible - it immediately decodes everything it has, ignoring video and audio timestamps altogether. To keep everything in sync (and latency low), audio data should be interleaved between video frames very frequently (`-muxdelay` in ffmpeg).
 
-### Live Streaming ###
+A separate, buffered streaming mode, where JSMpeg pre-loads a few seconds of data and presents everything with exact timing and audio/video sync is conceivable, but currently not implemented.
 
-jsmpeg supports streaming live video through WebSockets. You can use ffmpeg and a nodejs server to serve the MPEG video. See this [blog post](http://phoboslab.org/log/2013/09/html5-live-video-streaming-via-websockets) for the details of setting up a server. Also have a look at the `stream-server.js` and `stream-example.html`.
+The internal buffers for video and audio are fairly small (512kb and 128kb respectively) and JSMpeg will discard old (even unplayed) data to make room for newly arriving data without much fuzz. This could introduce decoding artifacts when there's a network congestion, but ensures that latency is kept at a minimum. If necessary You can increase the `videoBufferSize` and `audioBufferSize` through the options.
 
-To configure jsmpeg to connect to the stream server, simply pass a WebSocket connection instead of a filename to the constructor:
+JSMpeg comes with a tiny WebSocket "relay", written in Node.js. This server accepts an MPEG-TS source over HTTP and serves it via WebSocket to all connecting Browsers. The incoming HTTP stream can be generated using [ffmpeg](https://ffmpeg.org/), gstreamer or by other means.
 
-```javascript
-// Setup the WebSocket connection and start the player
-var client = new WebSocket( 'ws://example.com:8084/' );
-var player = new jsmpeg(client, {canvas:canvas});
+The split between the source and the WebSocket relay is necessary, because ffmpeg doesn't speak the WebSocket protocol. However, this split also allows you to install the WebSocket relay on a public server and share your stream on the Internet (typically NAT in your router prevents the public Internet from connecting _into_ your local network).
+
+In short, it works like this:
+
+1) run the websocket-relay.js
+2) run ffmpeg, send output to the relay's HTTP port
+3) connect JSMpeg in the browser to the relay's Websocket port
+
+
+## Example Setup for Streaming: Raspberry Pi Live Webcam
+
+For this example, ffmpeg and the WebSocket relay run on the same system. This allows you to view the stream in your local network, but not on the public internet.
+
+This example assumes that your webcam is compatible with Video4Linux2 and appears as `/dev/video0` in the filesystem. Most USB webcams support the UVC standard and should work just fine. The onboard Raspberry Camera can be made available as V4L2 device by loading a kernel module: `sudo modprobe bcm2835-v4l2`.
+
+
+1) Install ffmpeg (See [How to install ffmpeg on Debian / Raspbian](http://superuser.com/questions/286675/how-to-install-ffmpeg-on-debian)). Using ffmpeg, we can capture the webcam video & audio and encode it into MPEG1/MP2.
+
+2) Install Node.js and npm (See [Installing Node.js on Debian and Ubuntu based Linux distributions](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions) for newer versions). The Websocket relay is written in Node.js
+
+3) Install http-server. We will use this to serve the static files (view-stream.html, jsmpeg.min.js), so that we can view the website with the video in our browser. Any other webserver would work as well (nginx, apache, etc.):
+`sudo npm -g install http-server`
+
+4) Install git and clone this repository (or just download it as ZIP and unpack)
+```
+sudo apt-get install git
+git clone https://github.com/phoboslab/jsmpeg.git
 ```
 
-###Stream Recording###
+5) Change into the jsmpeg/ directory
+`cd jsmpeg/`
 
-To record an MPEG stream clientside in the browser jsmpeg provides the `.startRecording(cb)` and `.stopRecording()` methods. `.stopRecording()` returns a `Blob` object that can be used to create a download link.
+6) Install the Node.js Websocket Library:
+`npm install ws`
 
-```javascript
-player.startRecording(function(player){
-	// Called when recording really starts; usually 
-	// when the next intra frame is received
-});
+7) Start the Websocket relay. Provide a password and a port for the incomming HTTP video stream and a Websocket port that we can connect to in the browser:
+`node websocket-relay.js supersecret 8081 8082`
 
-// ...
+8) In a new terminal window (still in the `jsmpeg/` directory, start the `http-server` so we can serve the view-stream.html to the browser:
+`http-server`
 
-// Stop recording and create a download link
-var blob = player.stopRecording();
+9) Open the streaming website in your browser. The `http-server` will tell you the ip (usually `192.168.[...]`) and port (usually `8080`) where it's running on:
+`http://192.168.[...]:8080/view-stream.html`
 
-var filename = 'jsmpeg-recording.mpg';
-var a = document.getElementById('downloadLink');
-a.innerHTML = filename;
-a.download = fileName;
-a.href = window.URL.createObjectURL(blob);
+10) In a third terminal window, start ffmpeg to capture the webcam video and send it to the Websocket relay. Provide the password and port (from step 8) in the destination URL:
+```
+ffmpeg \
+	-f v4l2 \
+		-framerate 25 -video_size 640x480 -i /dev/video0 \
+	-f mpegts \
+		-codec:v mpeg1video -s 640x480 -b:v 1000k -bf 0 \
+	http://localhost:8081/supersecret
 ```
 
+You should now see a live webcam image in your browser. 
 
+If ffmpeg failed to open the input video, it's likely that your webcam does not support the given resolution, format or framerate. To get a list of compatible modes run:
 
-## Limitations ##
+`ffmpeg -f v4l2 -list_formats all -i /dev/video0`
 
-- Playback can only start when the file is fully loaded (when not streaming through WebSockets). I'm waiting for chunked XHR with ArrayBuffers to arrive in browsers.
-- MPEG files with B-Frames look weird - frames are not reordered. This should be relatively easy
-to fix, but most encoders seem to not use B-Frames at all by default.
-- The width of the MPEG video has to be a multiple of 2.
-- Only raw MPEG video streams are supported. The decoder hates Stream Packet Headers in between
-macroblocks.
 
-You can use [FFmpeg](http://www.ffmpeg.org/) to encode videos in a suited format. This will crop
-the size to a multiple of 2, omit B-Frames and force a raw video stream:
+To add the webcam audio, just call ffmpeg with two separate inputs.
 
 ```
-ffmpeg -i in.mp4 -f mpeg1video -vf "crop=iw-mod(iw\,2):ih-mod(ih\,2)" -b 0 out.mpg
+ffmpeg \
+	-f v4l2 \
+		-framerate 25 -video_size 640x480 -i /dev/video0 \
+	-f alsa \
+		-ar 44100 -c 2 -i -i hw:0 \
+	-f mpegts \
+		-codec:v mpeg1video -s 640x480 -b:v 1000k -bf 0 \
+		-codec:a mp2 -b:a 128k \
+		-muxdelay 0.001 \
+	http://localhost:8081/supersecret
+```
+
+Note the `muxdelay` argument. This should reduce lag, but doesn't always work when streaming video and audio - see remarks below.:
+
+
+## Some remarks about ffmpeg muxing and latency
+
+Adding an audio stream to the MPEG-TS can sometimes introduce considerable latency. I especially found this to be a problem on linux using ALSA and V4L2 (using AVFoundation on macOS worked just fine). However, there is a simple workaround: just run two instances of ffmpeg in parallel. One for audio, one for video. Send both outputs to the same Websocket relay. Thanks to the simplicity of the MPEG-TS format, proper "muxing" of the two streams happens automatically in the relay.
+
 ```
+ffmpeg \
+	-f v4l2 \
+		-framerate 25 -video_size 640x480 -i /dev/video0 \
+	-f mpegts \
+		-codec:v mpeg1video -s 640x480 -b:v 1000k -bf 0 \
+		-muxdelay 0.001 \
+	http://localhost:8081/supersecret
+
+# In a second terminal
+ffmpeg \
+	-f alsa \
+		-ar 44100 -c 2 -i -i hw:0 \
+	-f mpegts \
+		-codec:a mp2 -b:a 128k \
+		-muxdelay 0.001 \
+	http://localhost:8081/supersecret
+```
+In my tests, USB Webcams introduce about ~180ms of latency and there seems to be nothing we can do about it. The Raspberry Pi however has a [camera module](https://www.raspberrypi.org/products/camera-module-v2/) that provides lower latency video capture.
+
+To capture webcam input on Windows or macOS using ffmpeg, see the [ffmpeg Capture/Webcam Wiki](https://trac.ffmpeg.org/wiki/Capture/Webcam).
+
+
+## JSMpeg Architecture and Internals
+
+This library was built in a fairly modular fashion while keeping overhead at a minimum. Implementing new Demuxers, Decoders, Outputs (Renderers, Audio Devices) or Sources should be possible without changing any other parts. However, you would still need to subclass the `JSMpeg.Player` in order to use any new modules.
+
+Have a look a the [jsmpeg.js source](https://github.com/phoboslab/jsmpeg/blob/master/src/jsmpg.js) for an overview of how the modules interconnect and what APIs they should provide. I also wrote a blog post about some of JSMpeg's internals: [Decode It Like It's 1999](http://phoboslab.org/log/2017/01/decode-it-like-it-s-1999).
+
+Using parts of the library without creating a full player should also be fairly straightforward. E.g. you can create a stand-alone instance of the `JSMpeg.Decoder.MPEG1Video` class, `.connect()` a renderer, `.write()` some data to it and `.decode()` a frame, without touching JSMpeg's other parts.
+
+
+## Previous Version
+
+The JSMpeg version currently living in this repo is a complete rewrite of the original jsmpeg library that was just able to decode raw mpeg1video. If you're looking for the old version, see the [v0.2 tag](https://github.com/phoboslab/jsmpeg/releases/tag/v0.2).
 
-## Inspiration ##
 
-jsmpeg is based on [Java MPEG-1 Video Decoder and Player](http://sourceforge.net/projects/javampeg1video/) by Korandi Zoltan and inspired by [MPEG Decoder in Java ME](http://www.developer.nokia.com/Community/Wiki/MPEG_decoder_in_Java_ME) by Nokia.

build.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+uglifyjs \
+	src/jsmpeg.js \
+	src/video-element.js \
+	src/player.js \
+	src/buffer.js \
+	src/ajax.js \
+	src/ajax-progressive.js \
+	src/websocket.js \
+	src/ts.js \
+	src/decoder.js \
+	src/mpeg1.js \
+	src/mp2.js \
+	src/webgl.js \
+	src/canvas2d.js \
+	src/webaudio.js \
+	-o jsmpeg.min.js

src/ajax-progressive.js

@@ -0,0 +1,122 @@
+JSMpeg.Source.AjaxProgressive = (function(){ "use strict";
+
+var AjaxProgressiveSource = function(url, options) {
+	this.url = url;
+	this.destination = null;
+	this.request = null;
+
+	this.completed = false;
+	this.established = false;
+	this.progress = 0;
+
+	this.fileSize = 0;
+	this.loadedSize = 0;
+	this.chunkSize = options.chunkSize || 1024*1024;
+
+	this.isLoading = false;
+	this.loadStartTime = 0;
+	this.throttled = options.throttled !== false;
+};
+
+AjaxProgressiveSource.prototype.connect = function(destination) {
+	this.destination = destination;
+};
+
+AjaxProgressiveSource.prototype.start = function() {
+	this.request = new XMLHttpRequest();
+
+	this.request.onreadystatechange = function() {
+		if (this.request.readyState === this.request.DONE) {
+			this.fileSize = parseInt(
+				this.request.getResponseHeader("Content-Length")
+			);
+			this.loadNextChunk();
+		}
+	}.bind(this);
+
+	this.request.onprogress = this.onProgress.bind(this);
+	this.request.open('HEAD', this.url);
+	this.request.send();
+};
+
+AjaxProgressiveSource.prototype.resume = function(secondsHeadroom) {
+	if (this.isLoading || !this.throttled) {
+		return;
+	}
+
+	// Guess the worst case loading time with lots of safety margin. This is
+	// somewhat arbitrary...
+	var worstCaseLoadingTime = this.loadTime * 8 + 2;
+	if (worstCaseLoadingTime > secondsHeadroom) {
+		this.loadNextChunk();
+	}
+};
+
+AjaxProgressiveSource.prototype.abort = function() {
+	this.request.abort();
+};
+
+AjaxProgressiveSource.prototype.loadNextChunk = function() {
+	var start = this.loadedSize,
+		end = Math.min(this.loadedSize + this.chunkSize-1, this.fileSize-1);
+	
+	if (start >= this.fileSize) {
+		this.completed = true;
+		return;
+	}
+	
+	this.isLoading = true;
+	this.loadStartTime = JSMpeg.Now();
+	this.request = new XMLHttpRequest();
+
+	this.request.onreadystatechange = function() {		
+		if (
+			this.request.readyState === this.request.DONE && 
+			this.request.status >= 200 && this.request.status < 300
+		) {
+			this.onChunkLoad(this.request.response);
+		}
+		else if (this.request.readyState === this.request.DONE) {
+			// Retry?
+			if (this.loadFails++ < 3) {
+				this.loadNextChunk();
+			}
+		}
+	}.bind(this);
+	
+	if (start === 0) {
+		this.request.onprogress = this.onProgress.bind(this);
+	}
+
+	this.request.open('GET', this.url+'?'+start+"-"+end);
+	this.request.setRequestHeader("Range", "bytes="+start+"-"+end);
+	this.request.responseType = "arraybuffer";
+	this.request.send();
+};
+
+AjaxProgressiveSource.prototype.onProgress = function(ev) {
+	this.progress = (ev.loaded / ev.total);
+};
+
+AjaxProgressiveSource.prototype.onChunkLoad = function(data) {
+	this.established = true;
+	this.progress = 1;
+	this.loadedSize += data.byteLength;
+	this.loadFails = 0;
+	this.isLoading = false;
+
+	if (this.destination) {
+		this.destination.write(data);
+	}
+
+	this.loadTime = JSMpeg.Now() - this.loadStartTime;
+	if (!this.throttled) {
+		this.loadNextChunk();
+	}
+};
+
+return AjaxProgressiveSource;
+
+})();
+
+

src/ajax.js

@@ -0,0 +1,61 @@
+JSMpeg.Source.Ajax = (function(){ "use strict";
+
+var AjaxSource = function(url, options) {
+	this.url = url;
+	this.destination = null;
+	this.request = null;
+
+	this.completed = false;
+	this.established = false;
+	this.progress = 0;
+};
+
+AjaxSource.prototype.connect = function(destination) {
+	this.destination = destination;
+};
+
+AjaxSource.prototype.start = function() {
+	this.request = new XMLHttpRequest();
+
+	this.request.onreadystatechange = function() {
+		if (
+			this.request.readyState === this.request.DONE && 
+			this.request.status === 200
+		) {
+			this.onLoad(this.request.response);
+		}
+	}.bind(this);
+
+	this.request.onprogress = this.onProgress.bind(this);
+	this.request.open('GET', this.url);
+	this.request.responseType = "arraybuffer";
+	this.request.send();
+};
+
+AjaxSource.prototype.resume = function(secondsHeadroom) {
+	// Nothing to do here
+};
+
+AjaxSource.prototype.abort = function() {
+	this.request.abort();
+};
+
+AjaxSource.prototype.onProgress = function(ev) {
+	this.progress = (ev.loaded / ev.total);
+};
+
+AjaxSource.prototype.onLoad = function(data) {
+	this.established = true;
+	this.completed = true;
+	this.progress = 1;
+
+	if (this.destination) {
+		this.destination.write(data);
+	}
+};
+
+return AjaxSource;
+
+})();
+
+

src/buffer.js

@@ -0,0 +1,196 @@
+JSMpeg.BitBuffer = (function(){ "use strict";
+
+var BitBuffer = function(bufferOrLength, mode) {
+	if (typeof(bufferOrLength) === 'object') {
+		this.bytes = (bufferOrLength instanceof Uint8Array)
+			? bufferOrLength 
+			: new Uint8Array(bufferOrLength);
+
+		this.byteLength = this.bytes.length;
+	}
+	else {
+		this.bytes = new Uint8Array(bufferOrLength || 1024*1024);	
+		this.byteLength = 0;
+	}
+
+	this.mode = mode || BitBuffer.MODE.EXPAND;
+	this.index = 0;
+};
+
+BitBuffer.prototype.resize = function(size) {
+	var newBytes = new Uint8Array(size);
+	if (this.byteLength !== 0) {
+		this.byteLength = Math.min(this.byteLength, size);
+		newBytes.set(this.bytes, 0, this.byteLength);
+	}
+	this.bytes = newBytes;
+	this.index = Math.min(this.index, this.byteLength << 3);
+};
+
+BitBuffer.prototype.evict = function(sizeNeeded) {
+	var bytePos = this.index >> 3,
+		available = this.bytes.length - this.byteLength;
+	
+	// If the current index is the write position, we can simply reset both
+	// to 0. Also reset (and throw away yet unread data) if we won't be able
+	// to fit the new data in even after a normal eviction.
+	if (
+		this.index === this.byteLength << 3 ||
+		sizeNeeded > available + bytePos // emergency evac
+	) {
+		this.byteLength = 0;
+		this.index = 0;
+		return;
+	}
+	else if (bytePos === 0) {
+		// Nothing read yet - we can't evict anything
+		return;
+	}
+	
+	// Some browsers don't support copyWithin() yet - we may have to do 
+	// it manually using set and a subarray
+	if (this.bytes.copyWithin) {
+		this.bytes.copyWithin(0, bytePos, this.byteLength);
+	}
+	else {
+		this.bytes.set(this.bytes.subarray(bytePos, this.byteLength));
+	}
+
+	this.byteLength = this.byteLength - bytePos;
+	this.index -= bytePos << 3;
+	return;
+};
+
+BitBuffer.prototype.write = function(buffers) {
+	var isArrayOfBuffers = (typeof(buffers[0]) === 'object'),
+		totalLength = 0,
+		available = this.bytes.length - this.byteLength;
+
+	// Calculate total byte length
+	if (isArrayOfBuffers) {
+		var totalLength = 0;
+		for (var i = 0; i < buffers.length; i++) {
+			totalLength += buffers[i].byteLength;
+		}
+	}
+	else {
+		totalLength = buffers.byteLength;
+	}
+
+	// Do we need to resize or evict?
+	if (totalLength > available) {
+		if (this.mode === BitBuffer.MODE.EXPAND) {
+			var newSize = Math.max(
+				this.bytes.length * 2,
+				totalLength - available
+			);
+			this.resize(newSize)
+		}
+		else {
+			this.evict(totalLength);
+		}
+	}
+
+	if (isArrayOfBuffers) {
+		for (var i = 0; i < buffers.length; i++) {
+			this.appendSingleBuffer(buffers[i]);
+		}
+	}
+	else {
+		this.appendSingleBuffer(buffers);
+	}
+};
+
+BitBuffer.prototype.appendSingleBuffer = function(buffer) {
+	buffer = buffer instanceof Uint8Array
+		? buffer 
+		: new Uint8Array(buffer);
+	
+	this.bytes.set(buffer, this.byteLength);
+	this.byteLength += buffer.length;
+};
+
+BitBuffer.prototype.findNextStartCode = function() {	
+	for (var i = (this.index+7 >> 3); i < this.byteLength; i++) {
+		if(
+			this.bytes[i] == 0x00 &&
+			this.bytes[i+1] == 0x00 &&
+			this.bytes[i+2] == 0x01
+		) {
+			this.index = (i+4) << 3;
+			return this.bytes[i+3];
+		}
+	}
+	this.index = (this.byteLength << 3);
+	return -1;
+};
+
+BitBuffer.prototype.findStartCode = function(code) {
+	var current = 0;
+	while (true) {
+		current = this.findNextStartCode();
+		if (current === code || current === -1) {
+			return current;
+		}
+	}
+	return -1;
+};
+
+BitBuffer.prototype.nextBytesAreStartCode = function() {
+	var i = (this.index+7 >> 3);
+	return (
+		i >= this.byteLength || (
+			this.bytes[i] == 0x00 && 
+			this.bytes[i+1] == 0x00 &&
+			this.bytes[i+2] == 0x01
+		)
+	);
+};
+
+BitBuffer.prototype.peek = function(count) {
+	var offset = this.index;
+	var value = 0;
+	while (count) {
+		var currentByte = this.bytes[offset >> 3],
+			remaining = 8 - (offset & 7), // remaining bits in byte
+			read = remaining < count ? remaining : count, // bits in this run
+			shift = remaining - read,
+			mask = (0xff >> (8-read));
+
+		value = (value << read) | ((currentByte & (mask << shift)) >> shift);
+
+		offset += read;
+		count -= read;
+	}
+
+	return value;
+}
+
+BitBuffer.prototype.read = function(count) {
+	var value = this.peek(count);
+	this.index += count;
+	return value;
+};
+
+BitBuffer.prototype.skip = function(count) {
+	return (this.index += count);
+};
+
+BitBuffer.prototype.rewind = function(count) {
+	this.index = Math.max(this.index - count, 0);
+};
+
+BitBuffer.prototype.has = function(count) {
+	return ((this.byteLength << 3) - this.index) >= count;
+};
+
+BitBuffer.MODE = {
+	EVICT: 1,
+	EXPAND: 2
+};
+
+return BitBuffer;
+
+})();
+
+

src/canvas2d.js

@@ -0,0 +1,115 @@
+JSMpeg.Renderer.Canvas2D = (function(){ "use strict";
+
+var CanvasRenderer = function(options) {
+	this.canvas = options.canvas || document.createElement('canvas');
+	this.width = this.canvas.width;
+	this.height = this.canvas.height;
+	this.enabled = true;
+
+	this.context = this.canvas.getContext('2d');
+};
+
+CanvasRenderer.prototype.resize = function(width, height) {
+	this.width = width|0;
+	this.height = height|0;
+
+	this.canvas.width = this.width;
+	this.canvas.height = this.height;
+
+	this.imageData = this.context.getImageData(0, 0, this.width, this.height);
+	this.imageData.data.fill(255);
+};
+
+CanvasRenderer.prototype.renderProgress = function(progress) {
+	var 
+		w = this.canvas.width,
+		h = this.canvas.height,
+		ctx = this.context;
+
+	ctx.fillStyle = '#222';
+	ctx.fillRect(0, 0, w, h);
+	ctx.fillStyle = '#fff';
+	ctx.fillRect(0, h - h * progress, w, h * progress);
+};
+
+CanvasRenderer.prototype.render = function(y, cb, cr) {
+	this.YCbCrToRGBA(y, cb, cr, this.imageData.data);
+	this.context.putImageData(this.imageData, 0, 0);
+};
+
+CanvasRenderer.prototype.YCbCrToRGBA = function(y, cb, cr, rgba) {
+	if (!this.enabled) {
+		return;
+	}
+
+	// Chroma values are the same for each block of 4 pixels, so we proccess
+	// 2 lines at a time, 2 neighboring pixels each.
+	// I wish we could use 32bit writes to the RGBA buffer instead of writing
+	// each byte separately, but we need the automatic clamping of the RGBA
+	// buffer.
+	
+	var w = ((this.width + 15) >> 4) << 4,
+		w2 = w >> 1;
+
+	var yIndex1 = 0,
+		yIndex2 = w,
+		yNext2Lines = w + (w - this.width);
+
+	var cIndex = 0,
+		cNextLine = w2 - (this.width >> 1);
+
+	var rgbaIndex1 = 0,
+		rgbaIndex2 = this.width * 4,
+		rgbaNext2Lines = this.width * 4;
+
+	var cols = this.width >> 1,
+		rows = this.height >> 1;
+
+	var ccb, ccr, r, g, b;
+
+	for (var row = 0; row < rows; row++) {
+		for (var col = 0; col < cols; col++) {
+			ccb = cb[cIndex];
+			ccr = cr[cIndex];
+			cIndex++;
+
+			r = (ccb + ((ccb * 103) >> 8)) - 179;
+			g = ((ccr * 88) >> 8) - 44 + ((ccb * 183) >> 8) - 91;
+			b = (ccr + ((ccr * 198) >> 8)) - 227;
+
+			// Line 1
+			var y1 = y[yIndex1++];
+			var y2 = y[yIndex1++];
+			rgba[rgbaIndex1]   = y1 + r;
+			rgba[rgbaIndex1+1] = y1 - g;
+			rgba[rgbaIndex1+2] = y1 + b;
+			rgba[rgbaIndex1+4] = y2 + r;
+			rgba[rgbaIndex1+5] = y2 - g;
+			rgba[rgbaIndex1+6] = y2 + b;
+			rgbaIndex1 += 8;
+
+			// Line 2
+			var y3 = y[yIndex2++];
+			var y4 = y[yIndex2++];
+			rgba[rgbaIndex2]   = y3 + r;
+			rgba[rgbaIndex2+1] = y3 - g;
+			rgba[rgbaIndex2+2] = y3 + b;
+			rgba[rgbaIndex2+4] = y4 + r;
+			rgba[rgbaIndex2+5] = y4 - g;
+			rgba[rgbaIndex2+6] = y4 + b;
+			rgbaIndex2 += 8;
+		}
+
+		yIndex1 += yNext2Lines;
+		yIndex2 += yNext2Lines;
+		rgbaIndex1 += rgbaNext2Lines;
+		rgbaIndex2 += rgbaNext2Lines;
+		cIndex += cNextLine;
+	}
+};
+
+return CanvasRenderer;
+
+})();
+
+

src/decoder.js

@@ -0,0 +1,96 @@
+JSMpeg.Decoder.Base = (function(){ "use strict";
+
+var BaseDecoder = function(options) {
+	this.destination = null;
+	this.canPlay = false;
+
+	this.collectTimestamps = !options.streaming;
+	this.timestamps = [];
+	this.timestampIndex = 0;
+
+	this.startTime = 0;
+	this.decodedTime = 0;
+
+	Object.defineProperty(this, 'currentTime', {get: this.getCurrentTime});
+};
+
+BaseDecoder.prototype.connect = function(destination) {
+	this.destination = destination;
+};
+
+BaseDecoder.prototype.write = function(pts, buffers) {
+	if (this.collectTimestamps) {
+		if (this.timestamps.length === 0) {
+			this.startTime = pts;
+			this.decodedTime = pts;
+		}
+		this.timestamps.push({index: this.bits.byteLength << 3, time: pts});
+	}
+
+	this.bits.write(buffers);
+	this.canPlay = true;
+};
+
+BaseDecoder.prototype.seek = function(time) {
+	if (!this.collectTimestamps) {
+		return;
+	}
+
+	this.timestampIndex = 0;
+	for (var i = 0; i < this.timestamps.length; i++) {
+		if (this.timestamps[i].time > time) {
+			break;
+		}
+		this.timestampIndex = i;
+	}
+
+	var ts = this.timestamps[this.timestampIndex];
+	if (ts) {
+		this.bits.index = ts.index;
+		this.decodedTime = ts.time;
+	}
+	else {
+		this.bits.index = 0;
+		this.decodedTime = this.startTime;
+	}
+};
+
+BaseDecoder.prototype.decode = function() {
+	this.advanceDecodedTime(0);
+};
+
+BaseDecoder.prototype.advanceDecodedTime = function(seconds) {
+	if (this.collectTimestamps) {
+		var newTimestampIndex = -1;
+		for (var i = this.timestampIndex; i < this.timestamps.length; i++) {
+			if (this.timestamps[i].index > this.bits.index) {
+				break;
+			}
+			newTimestampIndex = i;
+		}
+
+		// Did we find a new PTS, different from the last? If so, we don't have
+		// to advance the decoded time manually and can instead sync it exactly
+		// to the PTS.
+		if (
+			newTimestampIndex !== -1 && 
+			newTimestampIndex !== this.timestampIndex
+		) {
+			this.timestampIndex = newTimestampIndex;
+			this.decodedTime = this.timestamps[this.timestampIndex].time;
+			return;
+		}
+	}
+
+	this.decodedTime += seconds;
+};
+
+BaseDecoder.prototype.getCurrentTime = function() {
+	return this.decodedTime;
+};
+
+return BaseDecoder;
+
+})();
+
+

src/jsmpeg.js

@@ -0,0 +1,94 @@
+/*! jsmpeg v1.0 | (c) Dominic Szablewski | MIT license */
+
+
+// This sets up the JSMpeg "Namespace". The object is empty apart from the Now()
+// utility function and the automatic CreateVideoElements() after DOMReady.
+var JSMpeg = {
+
+	// The Player sets up the connections between source, demuxer, decoders,
+	// renderer and audio output. It ties everything together, is responsible
+	// of scheduling decoding and provides some convenience methods for
+	// external users.
+	Player: null,
+
+	// A Video Element wraps the Player, shows HTML controls to start/pause
+	// the video and handles Audio unlocking on iOS. VideoElements can be
+	// created directly in HTML using the <div class="jsmpeg"/> tag.
+	VideoElement: null,
+	
+	// The BitBuffer wraps a Uint8Array and allows reading an arbitrary number
+	// of bits at a time. On writing, the BitBuffer either expands its
+	// internal buffer (for static files) or deletes old data (for streaming).
+	BitBuffer: null,
+
+	// A Source provides raw data from HTTP, a WebSocket connection or any
+	// other mean. Sources must support the following API:
+	//   .connect(destinationNode)
+	//   .write(buffer)
+	//   .start() - start reading
+	//   .resume(headroom) - continue reading; headroom to play pos in seconds
+	//   .established - boolean, true after connection is established
+	//   .completed - boolean, true if the source is completely loaded
+	//   .progress - float 0-1
+	Source: {}, 
+
+	// A Demuxer may sit between a Source and a Decoder. It separates the
+	// incoming raw data into Video, Audio and other Streams. API:
+	//   .connect(streamId, destinationNode)
+	//   .write(buffer)
+	//   .currentTime – float, in seconds
+	//   .startTime - float, in seconds
+	Demuxer: {},
+
+	// A Decoder accepts an incoming Stream of raw Audio or Video data, buffers
+	// it and upon `.decode()` decodes a single frame of data. Video decoders
+	// call `destinationNode.render(Y, Cr, CB)` with the decoded pixel data;
+	// Audio decoders call `destinationNode.play(left, right)` with the decoded
+	// PCM data. API:
+	//   .connect(destinationNode)
+	//   .write(pts, buffer)
+	//   .decode()
+	//   .seek(time)
+	//   .currentTime - float, in seconds
+	//   .startTime - float, in seconds
+	Decoder: {},
+
+	// A Renderer accepts raw YCrCb data in 3 separate buffers via the render()
+	// method. Renderers typically convert the data into the RGBA color space
+	// and draw it on a Canvas, but other output - such as writing PNGs - would
+	// be conceivable. API:
+	//   .render(y, cr, cb) - pixel data as Uint8Arrays
+	//   .enabled - wether the renderer does anything upon receiving data
+	Renderer: {},
+
+	// Audio Outputs accept raw Stero PCM data in 2 separate buffers via the
+	// play() method. Outputs typically play the audio on the user's device.
+	// API:
+	//   .play(sampleRate, left, right) - rate in herz; PCM data as Uint8Arrays
+	//   .stop()
+	//   .enqueuedTime - float, in seconds
+	//   .enabled - wether the output does anything upon receiving data
+	AudioOutput: {}, 
+
+	Now: function() {
+		return window.performance 
+			? window.performance.now() / 1000
+			: Date.now() / 1000;
+	},
+
+	CreateVideoElements: function() {
+		var elements = document.querySelectorAll('.jsmpeg');
+		for (var i = 0; i < elements.length; i++) {
+			new JSMpeg.VideoElement(elements[i]);
+		}
+	}
+};
+
+// Automatically create players for all found <div class="jsmpeg"/> elements.
+if (document.readyState === 'complete') {
+	JSMpeg.CreateVideoElements();
+}
+else {
+	document.addEventListener('DOMContentLoaded', JSMpeg.CreateVideoElements);
+}
+

src/mp2.js

@@ -0,0 +1,682 @@
+JSMpeg.Decoder.MP2Audio = (function(){ "use strict";
+
+// Based on kjmp2 by Martin J. Fiedler
+// http://keyj.emphy.de/kjmp2/
+
+var MP2 = function(options) {
+	JSMpeg.Decoder.Base.call(this, options);
+
+	var bufferSize = options.audioBufferSize || 128*1024;
+	var bufferMode = options.streaming
+		? JSMpeg.BitBuffer.MODE.EVICT
+		: JSMpeg.BitBuffer.MODE.EXPAND;
+
+	this.bits = new JSMpeg.BitBuffer(bufferSize, bufferMode);
+
+	this.left = new Float32Array(1152);
+	this.right = new Float32Array(1152);
+	this.sampleRate = 44100;
+	
+	this.D = new Float32Array(1024);
+	this.D.set(MP2.SYNTHESIS_WINDOW, 0);
+	this.D.set(MP2.SYNTHESIS_WINDOW, 512);
+	this.V = new Float32Array(1024);
+	this.U = new Int32Array(32);
+	this.VPos = 0;
+
+	this.allocation = [new Array(32), new Array(32)];
+	this.scaleFactorInfo = [new Uint8Array(32), new Uint8Array(32)];
+	this.scaleFactor = [new Array(32), new Array(32)];
+	this.sample = [new Array(32), new Array(32)];
+	
+	for (var j = 0; j < 2; j++) {
+		for (var i = 0; i < 32; i++) {
+			this.scaleFactor[j][i] = [0, 0, 0];
+			this.sample[j][i] = [0, 0, 0];
+		}
+	}
+};
+
+MP2.prototype = Object.create(JSMpeg.Decoder.Base.prototype);
+MP2.prototype.constructor = MP2;
+
+MP2.prototype.decode = function() {
+	var pos = this.bits.index >> 3;
+	if (pos >= this.bits.byteLength) {
+		return false;
+	}
+
+	var decoded = this.decodeFrame(this.left, this.right);
+	this.bits.index = (pos + decoded) << 3;
+
+	if (!decoded) {
+		return false;
+	}
+
+	if (this.destination) {
+		this.destination.play(this.sampleRate, this.left, this.right);
+	}
+
+	this.advanceDecodedTime(this.left.length / this.sampleRate);
+	return true;
+};
+
+MP2.prototype.getCurrentTime = function() {
+	var enqueuedTime = this.destination ? this.destination.enqueuedTime : 0;
+	return this.decodedTime - enqueuedTime;
+};
+
+MP2.prototype.decodeFrame = function(left, right) {
+	// Check for valid header: syncword OK, MPEG-Audio Layer 2
+	var sync = this.bits.read(11),
+		version = this.bits.read(2),
+		layer = this.bits.read(2),
+		hasCRC = !this.bits.read(1);
+
+	if (
+		sync !== MP2.FRAME_SYNC ||
+		version !== MP2.VERSION.MPEG_1 ||
+		layer !== MP2.LAYER.II
+	) {
+		return 0; // Invalid header or unsupported version
+	}
+
+	var bitrateIndex = this.bits.read(4) - 1;
+	if (bitrateIndex > 13) {
+		return 0;  // Invalid bit rate or 'free format'
+	}
+
+	var sampleRateIndex = this.bits.read(2);
+	var sampleRate = MP2.SAMPLE_RATE[sampleRateIndex];
+	if (sampleRateIndex === 3) {
+		return 0; // Invalid sample rate
+	}
+	if (version === MP2.VERSION.MPEG_2) {
+		sampleRateIndex += 4;
+		bitrateIndex += 14;
+	}
+	var padding = this.bits.read(1),
+		privat = this.bits.read(1),
+		mode = this.bits.read(2);
+
+	// Parse the mode_extension, set up the stereo bound
+	var bound = 0;
+	if (mode === MP2.MODE.JOINT_STEREO) {
+		bound = (this.bits.read(2) + 1) << 2;
+	}
+	else {
+		this.bits.skip(2);
+		bound = (mode === MP2.MODE.MONO) ? 0 : 32;
+	}
+
+	// Discard the last 4 bits of the header and the CRC value, if present
+	this.bits.skip(4);
+	if (hasCRC) {
+		this.bits.skip(16);
+	}
+
+	// Compute the frame size
+	var bitrate = MP2.BIT_RATE[bitrateIndex],
+		sampleRate = MP2.SAMPLE_RATE[sampleRateIndex],
+		frameSize = ((144000 * bitrate / sampleRate) + padding)|0;
+	
+
+	// Prepare the quantizer table lookups
+	var tab3 = 0;
+	var sblimit = 0;
+	if (version === MP2.VERSION.MPEG_2) {
+		// MPEG-2 (LSR)
+		tab3 = 2;
+		sblimit = 30;
+	}
+	else {
+		// MPEG-1
+		var tab1 = (mode === MP2.MODE.MONO) ? 0 : 1;
+		var tab2 = MP2.QUANT_LUT_STEP_1[tab1][bitrateIndex];
+		tab3 = MP2.QUANT_LUT_STEP_2[tab2][sampleRateIndex];
+		sblimit = tab3 & 63;
+		tab3 >>= 6;
+	}
+
+	if (bound > sblimit) {
+		bound = sblimit;
+	}
+
+	// Read the allocation information
+	for (var sb = 0; sb < bound; sb++) {
+		this.allocation[0][sb] = this.readAllocation(sb, tab3);
+		this.allocation[1][sb] = this.readAllocation(sb, tab3);
+	}
+
+	for (var sb = bound; sb < sblimit; sb++) {
+		this.allocation[0][sb] = 
+			this.allocation[1][sb] =
+			this.readAllocation(sb, tab3);
+	}
+
+	// Read scale factor selector information
+	var channels = (mode === MP2.MODE.MONO) ? 1 : 2;
+	for (var sb = 0;  sb < sblimit; sb++) {
+		for (ch = 0;  ch < channels; ch++) {
+			if (this.allocation[ch][sb]) {
+				this.scaleFactorInfo[ch][sb] = this.bits.read(2);
+			}
+		}
+		if (mode === MP2.MODE.MONO) {
+			this.scaleFactorInfo[1][sb] = this.scaleFactorInfo[0][sb];
+		}
+	}
+
+	// Read scale factors
+	for (var sb = 0;  sb < sblimit; sb++) {
+		for (var ch = 0;  ch < channels; ch++) {
+			if (this.allocation[ch][sb]) {
+				var sf = this.scaleFactor[ch][sb];
+				switch (this.scaleFactorInfo[ch][sb]) {
+					case 0:
+						sf[0] = this.bits.read(6);
+						sf[1] = this.bits.read(6);
+						sf[2] = this.bits.read(6);
+						break;
+					case 1:
+						sf[0] =
+						sf[1] = this.bits.read(6);
+						sf[2] = this.bits.read(6);
+						break;
+					case 2:
+						sf[0] =
+						sf[1] =
+						sf[2] = this.bits.read(6);
+						break;
+					case 3:
+						sf[0] = this.bits.read(6);
+						sf[1] =
+						sf[2] = this.bits.read(6);
+						break;
+				}
+			}
+		}
+		if (mode === MP2.MODE.MONO) {
+			this.scaleFactor[1][sb][0] = this.scaleFactor[0][sb][0];
+			this.scaleFactor[1][sb][1] = this.scaleFactor[0][sb][1];
+			this.scaleFactor[1][sb][2] = this.scaleFactor[0][sb][2];
+		}
+	}
+
+	// Coefficient input and reconstruction
+	var outPos = 0;
+	for (var part = 0; part < 3; part++) {
+		for (var granule = 0; granule < 4; granule++) {
+
+			// Read the samples
+			for (var sb = 0; sb < bound; sb++) {
+				this.readSamples(0, sb, part);
+				this.readSamples(1, sb, part);
+			}
+			for (var sb = bound; sb < sblimit; sb++) {
+				this.readSamples(0, sb, part);
+				this.sample[1][sb][0] = this.sample[0][sb][0];
+				this.sample[1][sb][1] = this.sample[0][sb][1];
+				this.sample[1][sb][2] = this.sample[0][sb][2];
+			}
+			for (var sb = sblimit; sb < 32; sb++) {
+				this.sample[0][sb][0] = 0;
+				this.sample[0][sb][1] = 0;
+				this.sample[0][sb][2] = 0;
+				this.sample[1][sb][0] = 0;
+				this.sample[1][sb][1] = 0;
+				this.sample[1][sb][2] = 0;
+			}
+
+			// Synthesis loop
+			for (var p = 0; p < 3; p++) {
+				// Shifting step
+				this.VPos = (this.VPos - 64) & 1023;
+
+				for (var ch = 0;  ch < 2; ch++) {
+					MP2.MatrixTransform(this.sample[ch], p, this.V, this.VPos);
+
+					// Build U, windowing, calculate output
+					this.U.fill(0);
+
+					var dIndex = 512 - (this.VPos >> 1);
+					var vIndex = (this.VPos % 128) >> 1;
+					while (vIndex < 1024) {
+						for (var i = 0; i < 32; ++i) {
+							this.U[i] += this.D[dIndex++] * this.V[vIndex++];
+						}
+
+						vIndex += 128-32;
+						dIndex += 64-32;
+					}
+
+					vIndex = (128-32 + 1024) - vIndex;
+					dIndex -= (512 - 32);
+					while (vIndex < 1024) {
+						for (var i = 0; i < 32; ++i) {
+							this.U[i] += this.D[dIndex++] * this.V[vIndex++];
+						}
+
+						vIndex += 128-32;
+						dIndex += 64-32;
+					}
+
+					// Output samples
+					var outChannel = ch === 0 ? left : right;
+					for (var j = 0; j < 32; j++) {
+						outChannel[outPos + j] = this.U[j] / 2147418112;
+					}
+				} // End of synthesis channel loop
+				outPos += 32;
+			} // End of synthesis sub-block loop
+
+		} // Decoding of the granule finished
+	}
+
+	this.sampleRate = sampleRate;
+	return frameSize;
+};
+
+MP2.prototype.readAllocation = function(sb, tab3) {
+	var tab4 = MP2.QUANT_LUT_STEP_3[tab3][sb];
+	var qtab = MP2.QUANT_LUT_STEP4[tab4 & 15][this.bits.read(tab4 >> 4)];
+	return qtab ? (MP2.QUANT_TAB[qtab - 1]) : 0;
+};
+
+MP2.prototype.readSamples = function(ch, sb, part) {
+	var q = this.allocation[ch][sb],
+		sf = this.scaleFactor[ch][sb][part],
+		sample = this.sample[ch][sb],
+		val = 0;
+
+	if (!q) {
+		// No bits allocated for this subband
+		sample[0] = sample[1] = sample[2] = 0;
+		return;
+	}
+
+	// Resolve scalefactor
+	if (sf === 63) {
+		sf = 0;
+	}
+	else {
+		var shift = (sf / 3)|0;
+		sf = (MP2.SCALEFACTOR_BASE[sf % 3] + ((1 << shift) >> 1)) >> shift;
+	}
+
+	// Decode samples
+	var adj = q.levels;
+	if (q.group) {
+		// Decode grouped samples
+		val = this.bits.read(q.bits);
+		sample[0] = val % adj;
+		val = (val / adj)|0;
+		sample[1] = val % adj;
+		sample[2] = (val / adj)|0;
+	}
+	else {
+		// Decode direct samples
+		sample[0] = this.bits.read(q.bits);
+		sample[1] = this.bits.read(q.bits);
+		sample[2] = this.bits.read(q.bits);
+	}
+
+	// Postmultiply samples
+	var scale = (65536 / (adj + 1))|0;
+	adj = ((adj + 1) >> 1) - 1;
+
+	val = (adj - sample[0]) * scale;
+	sample[0] = (val * (sf >> 12) + ((val * (sf & 4095) + 2048) >> 12)) >> 12;
+
+	val = (adj - sample[1]) * scale;
+	sample[1] = (val * (sf >> 12) + ((val * (sf & 4095) + 2048) >> 12)) >> 12;
+
+	val = (adj - sample[2]) * scale;
+	sample[2] = (val * (sf >> 12) + ((val * (sf & 4095) + 2048) >> 12)) >> 12;
+};
+
+MP2.MatrixTransform = function(s, ss, d, dp) {
+	var t01, t02, t03, t04, t05, t06, t07, t08, t09, t10, t11, t12,
+		t13, t14, t15, t16, t17, t18, t19, t20, t21, t22, t23, t24,
+		t25, t26, t27, t28, t29, t30, t31, t32, t33;
+
+	t01 = s[ 0][ss] + s[31][ss]; t02 = (s[ 0][ss] - s[31][ss]) * 0.500602998235;
+	t03 = s[ 1][ss] + s[30][ss]; t04 = (s[ 1][ss] - s[30][ss]) * 0.505470959898;
+	t05 = s[ 2][ss] + s[29][ss]; t06 = (s[ 2][ss] - s[29][ss]) * 0.515447309923;
+	t07 = s[ 3][ss] + s[28][ss]; t08 = (s[ 3][ss] - s[28][ss]) * 0.53104259109;
+	t09 = s[ 4][ss] + s[27][ss]; t10 = (s[ 4][ss] - s[27][ss]) * 0.553103896034;
+	t11 = s[ 5][ss] + s[26][ss]; t12 = (s[ 5][ss] - s[26][ss]) * 0.582934968206;
+	t13 = s[ 6][ss] + s[25][ss]; t14 = (s[ 6][ss] - s[25][ss]) * 0.622504123036;
+	t15 = s[ 7][ss] + s[24][ss]; t16 = (s[ 7][ss] - s[24][ss]) * 0.674808341455;
+	t17 = s[ 8][ss] + s[23][ss]; t18 = (s[ 8][ss] - s[23][ss]) * 0.744536271002;
+	t19 = s[ 9][ss] + s[22][ss]; t20 = (s[ 9][ss] - s[22][ss]) * 0.839349645416;
+	t21 = s[10][ss] + s[21][ss]; t22 = (s[10][ss] - s[21][ss]) * 0.972568237862;
+	t23 = s[11][ss] + s[20][ss]; t24 = (s[11][ss] - s[20][ss]) * 1.16943993343;
+	t25 = s[12][ss] + s[19][ss]; t26 = (s[12][ss] - s[19][ss]) * 1.48416461631;
+	t27 = s[13][ss] + s[18][ss]; t28 = (s[13][ss] - s[18][ss]) * 2.05778100995;
+	t29 = s[14][ss] + s[17][ss]; t30 = (s[14][ss] - s[17][ss]) * 3.40760841847;
+	t31 = s[15][ss] + s[16][ss]; t32 = (s[15][ss] - s[16][ss]) * 10.1900081235;
+
+	t33 = t01 + t31; t31 = (t01 - t31) * 0.502419286188;
+	t01 = t03 + t29; t29 = (t03 - t29) * 0.52249861494;
+	t03 = t05 + t27; t27 = (t05 - t27) * 0.566944034816;
+	t05 = t07 + t25; t25 = (t07 - t25) * 0.64682178336;
+	t07 = t09 + t23; t23 = (t09 - t23) * 0.788154623451;
+	t09 = t11 + t21; t21 = (t11 - t21) * 1.06067768599;
+	t11 = t13 + t19; t19 = (t13 - t19) * 1.72244709824;
+	t13 = t15 + t17; t17 = (t15 - t17) * 5.10114861869;
+	t15 = t33 + t13; t13 = (t33 - t13) * 0.509795579104;
+	t33 = t01 + t11; t01 = (t01 - t11) * 0.601344886935;
+	t11 = t03 + t09; t09 = (t03 - t09) * 0.899976223136;
+	t03 = t05 + t07; t07 = (t05 - t07) * 2.56291544774;
+	t05 = t15 + t03; t15 = (t15 - t03) * 0.541196100146;
+	t03 = t33 + t11; t11 = (t33 - t11) * 1.30656296488;
+	t33 = t05 + t03; t05 = (t05 - t03) * 0.707106781187;
+	t03 = t15 + t11; t15 = (t15 - t11) * 0.707106781187;
+	t03 += t15;
+	t11 = t13 + t07; t13 = (t13 - t07) * 0.541196100146;
+	t07 = t01 + t09; t09 = (t01 - t09) * 1.30656296488;
+	t01 = t11 + t07; t07 = (t11 - t07) * 0.707106781187;
+	t11 = t13 + t09; t13 = (t13 - t09) * 0.707106781187;
+	t11 += t13; t01 += t11; 
+	t11 += t07; t07 += t13;
+	t09 = t31 + t17; t31 = (t31 - t17) * 0.509795579104;
+	t17 = t29 + t19; t29 = (t29 - t19) * 0.601344886935;
+	t19 = t27 + t21; t21 = (t27 - t21) * 0.899976223136;
+	t27 = t25 + t23; t23 = (t25 - t23) * 2.56291544774;
+	t25 = t09 + t27; t09 = (t09 - t27) * 0.541196100146;
+	t27 = t17 + t19; t19 = (t17 - t19) * 1.30656296488;
+	t17 = t25 + t27; t27 = (t25 - t27) * 0.707106781187;
+	t25 = t09 + t19; t19 = (t09 - t19) * 0.707106781187;
+	t25 += t19;
+	t09 = t31 + t23; t31 = (t31 - t23) * 0.541196100146;
+	t23 = t29 + t21; t21 = (t29 - t21) * 1.30656296488;
+	t29 = t09 + t23; t23 = (t09 - t23) * 0.707106781187;
+	t09 = t31 + t21; t31 = (t31 - t21) * 0.707106781187;
+	t09 += t31;	t29 += t09;	t09 += t23;	t23 += t31;
+	t17 += t29;	t29 += t25;	t25 += t09;	t09 += t27;
+	t27 += t23;	t23 += t19; t19 += t31;	
+	t21 = t02 + t32; t02 = (t02 - t32) * 0.502419286188;
+	t32 = t04 + t30; t04 = (t04 - t30) * 0.52249861494;
+	t30 = t06 + t28; t28 = (t06 - t28) * 0.566944034816;
+	t06 = t08 + t26; t08 = (t08 - t26) * 0.64682178336;
+	t26 = t10 + t24; t10 = (t10 - t24) * 0.788154623451;
+	t24 = t12 + t22; t22 = (t12 - t22) * 1.06067768599;
+	t12 = t14 + t20; t20 = (t14 - t20) * 1.72244709824;
+	t14 = t16 + t18; t16 = (t16 - t18) * 5.10114861869;
+	t18 = t21 + t14; t14 = (t21 - t14) * 0.509795579104;
+	t21 = t32 + t12; t32 = (t32 - t12) * 0.601344886935;
+	t12 = t30 + t24; t24 = (t30 - t24) * 0.899976223136;
+	t30 = t06 + t26; t26 = (t06 - t26) * 2.56291544774;
+	t06 = t18 + t30; t18 = (t18 - t30) * 0.541196100146;
+	t30 = t21 + t12; t12 = (t21 - t12) * 1.30656296488;
+	t21 = t06 + t30; t30 = (t06 - t30) * 0.707106781187;
+	t06 = t18 + t12; t12 = (t18 - t12) * 0.707106781187;
+	t06 += t12;
+	t18 = t14 + t26; t26 = (t14 - t26) * 0.541196100146;
+	t14 = t32 + t24; t24 = (t32 - t24) * 1.30656296488;
+	t32 = t18 + t14; t14 = (t18 - t14) * 0.707106781187;
+	t18 = t26 + t24; t24 = (t26 - t24) * 0.707106781187;
+	t18 += t24; t32 += t18; 
+	t18 += t14; t26 = t14 + t24;
+	t14 = t02 + t16; t02 = (t02 - t16) * 0.509795579104;
+	t16 = t04 + t20; t04 = (t04 - t20) * 0.601344886935;
+	t20 = t28 + t22; t22 = (t28 - t22) * 0.899976223136;
+	t28 = t08 + t10; t10 = (t08 - t10) * 2.56291544774;
+	t08 = t14 + t28; t14 = (t14 - t28) * 0.541196100146;
+	t28 = t16 + t20; t20 = (t16 - t20) * 1.30656296488;
+	t16 = t08 + t28; t28 = (t08 - t28) * 0.707106781187;
+	t08 = t14 + t20; t20 = (t14 - t20) * 0.707106781187;
+	t08 += t20;
+	t14 = t02 + t10; t02 = (t02 - t10) * 0.541196100146;
+	t10 = t04 + t22; t22 = (t04 - t22) * 1.30656296488;
+	t04 = t14 + t10; t10 = (t14 - t10) * 0.707106781187;
+	t14 = t02 + t22; t02 = (t02 - t22) * 0.707106781187;
+	t14 += t02;	t04 += t14;	t14 += t10;	t10 += t02;
+	t16 += t04;	t04 += t08;	t08 += t14;	t14 += t28;
+	t28 += t10;	t10 += t20;	t20 += t02;	t21 += t16;
+	t16 += t32;	t32 += t04;	t04 += t06;	t06 += t08;
+	t08 += t18;	t18 += t14;	t14 += t30;	t30 += t28;
+	t28 += t26;	t26 += t10;	t10 += t12;	t12 += t20;
+	t20 += t24;	t24 += t02;
+
+	d[dp + 48] = -t33;
+	d[dp + 49] = d[dp + 47] = -t21;
+	d[dp + 50] = d[dp + 46] = -t17;
+	d[dp + 51] = d[dp + 45] = -t16;
+	d[dp + 52] = d[dp + 44] = -t01;
+	d[dp + 53] = d[dp + 43] = -t32;
+	d[dp + 54] = d[dp + 42] = -t29;
+	d[dp + 55] = d[dp + 41] = -t04;
+	d[dp + 56] = d[dp + 40] = -t03;
+	d[dp + 57] = d[dp + 39] = -t06;
+	d[dp + 58] = d[dp + 38] = -t25;
+	d[dp + 59] = d[dp + 37] = -t08;
+	d[dp + 60] = d[dp + 36] = -t11;
+	d[dp + 61] = d[dp + 35] = -t18;
+	d[dp + 62] = d[dp + 34] = -t09;
+	d[dp + 63] = d[dp + 33] = -t14;
+	d[dp + 32] = -t05;
+	d[dp +  0] = t05; d[dp + 31] = -t30;
+	d[dp +  1] = t30; d[dp + 30] = -t27;
+	d[dp +  2] = t27; d[dp + 29] = -t28;
+	d[dp +  3] = t28; d[dp + 28] = -t07;
+	d[dp +  4] = t07; d[dp + 27] = -t26;
+	d[dp +  5] = t26; d[dp + 26] = -t23;
+	d[dp +  6] = t23; d[dp + 25] = -t10;
+	d[dp +  7] = t10; d[dp + 24] = -t15;
+	d[dp +  8] = t15; d[dp + 23] = -t12;
+	d[dp +  9] = t12; d[dp + 22] = -t19;
+	d[dp + 10] = t19; d[dp + 21] = -t20;
+	d[dp + 11] = t20; d[dp + 20] = -t13;
+	d[dp + 12] = t13; d[dp + 19] = -t24;
+	d[dp + 13] = t24; d[dp + 18] = -t31;
+	d[dp + 14] = t31; d[dp + 17] = -t02;
+	d[dp + 15] = t02; d[dp + 16] =  0.0;
+};
+
+MP2.FRAME_SYNC = 0x7ff;
+
+MP2.VERSION = {
+	MPEG_2_5: 0x0,
+	MPEG_2: 0x2,
+	MPEG_1: 0x3
+};
+
+MP2.LAYER = {
+	III: 0x1,
+	II: 0x2,
+	I: 0x3
+};
+
+MP2.MODE = {
+	STEREO: 0x0,
+	JOINT_STEREO: 0x1,
+	DUAL_CHANNEL: 0x2,
+	MONO: 0x3
+};
+
+MP2.SAMPLE_RATE = new Uint16Array([
+	44100, 48000, 32000, 0, // MPEG-1
+	22050, 24000, 16000, 0  // MPEG-2
+]);
+
+MP2.BIT_RATE = new Uint16Array([
+	32, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320, 384, // MPEG-1
+	 8, 16, 24, 32, 40, 48,  56,  64,  80,  96, 112, 128, 144, 160  // MPEG-2
+]);
+
+MP2.SCALEFACTOR_BASE = new Uint32Array([
+	0x02000000, 0x01965FEA, 0x01428A30
+]);
+
+MP2.SYNTHESIS_WINDOW = new Float32Array([
+	     0.0,     -0.5,     -0.5,     -0.5,     -0.5,     -0.5,
+	    -0.5,     -1.0,     -1.0,     -1.0,     -1.0,     -1.5,
+	    -1.5,     -2.0,     -2.0,     -2.5,     -2.5,     -3.0,
+	    -3.5,     -3.5,     -4.0,     -4.5,     -5.0,     -5.5,
+	    -6.5,     -7.0,     -8.0,     -8.5,     -9.5,    -10.5,
+	   -12.0,    -13.0,    -14.5,    -15.5,    -17.5,    -19.0,
+	   -20.5,    -22.5,    -24.5,    -26.5,    -29.0,    -31.5,
+	   -34.0,    -36.5,    -39.5,    -42.5,    -45.5,    -48.5,
+	   -52.0,    -55.5,    -58.5,    -62.5,    -66.0,    -69.5,
+	   -73.5,    -77.0,    -80.5,    -84.5,    -88.0,    -91.5,
+	   -95.0,    -98.0,   -101.0,   -104.0,    106.5,    109.0,
+	   111.0,    112.5,    113.5,    114.0,    114.0,    113.5,
+	   112.0,    110.5,    107.5,    104.0,    100.0,     94.5,
+	    88.5,     81.5,     73.0,     63.5,     53.0,     41.5,
+	    28.5,     14.5,     -1.0,    -18.0,    -36.0,    -55.5,
+	   -76.5,    -98.5,   -122.0,   -147.0,   -173.5,   -200.5,
+	  -229.5,   -259.5,   -290.5,   -322.5,   -355.5,   -389.5,
+	  -424.0,   -459.5,   -495.5,   -532.0,   -568.5,   -605.0,
+	  -641.5,   -678.0,   -714.0,   -749.0,   -783.5,   -817.0,
+	  -849.0,   -879.5,   -908.5,   -935.0,   -959.5,   -981.0,
+	 -1000.5,  -1016.0,  -1028.5,  -1037.5,  -1042.5,  -1043.5,
+	 -1040.0,  -1031.5,   1018.5,   1000.0,    976.0,    946.5,
+	   911.0,    869.5,    822.0,    767.5,    707.0,    640.0,
+	   565.5,    485.0,    397.0,    302.5,    201.0,     92.5,
+	   -22.5,   -144.0,   -272.5,   -407.0,   -547.5,   -694.0,
+	  -846.0,  -1003.0,  -1165.0,  -1331.5,  -1502.0,  -1675.5,
+	 -1852.5,  -2031.5,  -2212.5,  -2394.0,  -2576.5,  -2758.5,
+	 -2939.5,  -3118.5,  -3294.5,  -3467.5,  -3635.5,  -3798.5,
+	 -3955.0,  -4104.5,  -4245.5,  -4377.5,  -4499.0,  -4609.5,
+	 -4708.0,  -4792.5,  -4863.5,  -4919.0,  -4958.0,  -4979.5,
+	 -4983.0,  -4967.5,  -4931.5,  -4875.0,  -4796.0,  -4694.5,
+	 -4569.5,  -4420.0,  -4246.0,  -4046.0,  -3820.0,  -3567.0,
+	  3287.0,   2979.5,   2644.0,   2280.5,   1888.0,   1467.5,
+	  1018.5,    541.0,     35.0,   -499.0,  -1061.0,  -1650.0,
+	 -2266.5,  -2909.0,  -3577.0,  -4270.0,  -4987.5,  -5727.5,
+	 -6490.0,  -7274.0,  -8077.5,  -8899.5,  -9739.0, -10594.5,
+	-11464.5, -12347.0, -13241.0, -14144.5, -15056.0, -15973.5,
+	-16895.5, -17820.0, -18744.5, -19668.0, -20588.0, -21503.0,
+	-22410.5, -23308.5, -24195.0, -25068.5, -25926.5, -26767.0,
+	-27589.0, -28389.0, -29166.5, -29919.0, -30644.5, -31342.0,
+	-32009.5, -32645.0, -33247.0, -33814.5, -34346.0, -34839.5,
+	-35295.0, -35710.0, -36084.5, -36417.5, -36707.5, -36954.0,
+	-37156.5, -37315.0, -37428.0, -37496.0,  37519.0,  37496.0,
+	 37428.0,  37315.0,  37156.5,  36954.0,  36707.5,  36417.5,
+	 36084.5,  35710.0,  35295.0,  34839.5,  34346.0,  33814.5,
+	 33247.0,  32645.0,  32009.5,  31342.0,  30644.5,  29919.0,
+	 29166.5,  28389.0,  27589.0,  26767.0,  25926.5,  25068.5,
+	 24195.0,  23308.5,  22410.5,  21503.0,  20588.0,  19668.0,
+	 18744.5,  17820.0,  16895.5,  15973.5,  15056.0,  14144.5,
+	 13241.0,  12347.0,  11464.5,  10594.5,   9739.0,   8899.5,
+	  8077.5,   7274.0,   6490.0,   5727.5,   4987.5,   4270.0,
+	  3577.0,   2909.0,   2266.5,   1650.0,   1061.0,    499.0,
+	   -35.0,   -541.0,  -1018.5,  -1467.5,  -1888.0,  -2280.5,
+	 -2644.0,  -2979.5,   3287.0,   3567.0,   3820.0,   4046.0,
+	  4246.0,   4420.0,   4569.5,   4694.5,   4796.0,   4875.0,
+	  4931.5,   4967.5,   4983.0,   4979.5,   4958.0,   4919.0,
+	  4863.5,   4792.5,   4708.0,   4609.5,   4499.0,   4377.5,
+	  4245.5,   4104.5,   3955.0,   3798.5,   3635.5,   3467.5,
+	  3294.5,   3118.5,   2939.5,   2758.5,   2576.5,   2394.0,
+	  2212.5,   2031.5,   1852.5,   1675.5,   1502.0,   1331.5,
+	  1165.0,   1003.0,    846.0,    694.0,    547.5,    407.0,
+	   272.5,    144.0,     22.5,    -92.5,   -201.0,   -302.5,
+	  -397.0,   -485.0,   -565.5,   -640.0,   -707.0,   -767.5,
+	  -822.0,   -869.5,   -911.0,   -946.5,   -976.0,  -1000.0,
+	  1018.5,   1031.5,   1040.0,   1043.5,   1042.5,   1037.5,
+	  1028.5,   1016.0,   1000.5,    981.0,    959.5,    935.0,
+	   908.5,    879.5,    849.0,    817.0,    783.5,    749.0,
+	   714.0,    678.0,    641.5,    605.0,    568.5,    532.0,
+	   495.5,    459.5,    424.0,    389.5,    355.5,    322.5,
+	   290.5,    259.5,    229.5,    200.5,    173.5,    147.0,
+	   122.0,     98.5,     76.5,     55.5,     36.0,     18.0,
+		1.0,    -14.5,    -28.5,    -41.5,    -53.0,    -63.5,
+	   -73.0,    -81.5,    -88.5,    -94.5,   -100.0,   -104.0,
+	  -107.5,   -110.5,   -112.0,   -113.5,   -114.0,   -114.0,
+	  -113.5,   -112.5,   -111.0,   -109.0,    106.5,    104.0,
+	   101.0,     98.0,     95.0,     91.5,     88.0,     84.5,
+	    80.5,     77.0,     73.5,     69.5,     66.0,     62.5,
+	    58.5,     55.5,     52.0,     48.5,     45.5,     42.5,
+	    39.5,     36.5,     34.0,     31.5,     29.0,     26.5,
+	    24.5,     22.5,     20.5,     19.0,     17.5,     15.5,
+	    14.5,     13.0,     12.0,     10.5,      9.5,      8.5,
+	     8.0,      7.0,      6.5,      5.5,      5.0,      4.5,
+	     4.0,      3.5,      3.5,      3.0,      2.5,      2.5,
+	     2.0,      2.0,      1.5,      1.5,      1.0,      1.0,
+	     1.0,      1.0,      0.5,      0.5,      0.5,      0.5,
+	     0.5,      0.5
+]);
+
+// Quantizer lookup, step 1: bitrate classes
+MP2.QUANT_LUT_STEP_1 = [
+ 	// 32, 48, 56, 64, 80, 96,112,128,160,192,224,256,320,384 <- bitrate
+	[   0,  0,  1,  1,  1,  2,  2,  2,  2,  2,  2,  2,  2,  2], // mono
+	// 16, 24, 28, 32, 40, 48, 56, 64, 80, 96,112,128,160,192 <- bitrate / chan
+	[   0,  0,  0,  0,  0,  0,  1,  1,  1,  2,  2,  2,  2,  2] // stereo
+];
+
+// Quantizer lookup, step 2: bitrate class, sample rate -> B2 table idx, sblimit
+MP2.QUANT_TAB = {
+	A: (27 | 64), // Table 3-B.2a: high-rate, sblimit = 27
+	B: (30 | 64), // Table 3-B.2b: high-rate, sblimit = 30
+	C:   8,       // Table 3-B.2c:  low-rate, sblimit =  8
+	D:  12        // Table 3-B.2d:  low-rate, sblimit = 12
+};
+
+MP2.QUANT_LUT_STEP_2 = [
+	//   44.1 kHz,        48 kHz,          32 kHz
+	[MP2.QUANT_TAB.C, MP2.QUANT_TAB.C, MP2.QUANT_TAB.D], // 32 - 48 kbit/sec/ch
+	[MP2.QUANT_TAB.A, MP2.QUANT_TAB.A, MP2.QUANT_TAB.A], // 56 - 80 kbit/sec/ch
+	[MP2.QUANT_TAB.B, MP2.QUANT_TAB.A, MP2.QUANT_TAB.B]  // 96+	 kbit/sec/ch
+];
+
+// Quantizer lookup, step 3: B2 table, subband -> nbal, row index
+// (upper 4 bits: nbal, lower 4 bits: row index)
+MP2.QUANT_LUT_STEP_3 = [
+	// Low-rate table (3-B.2c and 3-B.2d)
+	[
+		0x44,0x44,
+	  	0x34,0x34,0x34,0x34,0x34,0x34,0x34,0x34,0x34,0x34
+	],
+	// High-rate table (3-B.2a and 3-B.2b)
+	[
+		0x43,0x43,0x43,
+		0x42,0x42,0x42,0x42,0x42,0x42,0x42,0x42,
+		0x31,0x31,0x31,0x31,0x31,0x31,0x31,0x31,0x31,0x31,0x31,0x31,
+		0x20,0x20,0x20,0x20,0x20,0x20,0x20
+	],
+	// MPEG-2 LSR table (B.2 in ISO 13818-3)
+	[
+		0x45,0x45,0x45,0x45,
+		0x34,0x34,0x34,0x34,0x34,0x34,0x34,
+		0x24,0x24,0x24,0x24,0x24,0x24,0x24,0x24,0x24,0x24,
+					   0x24,0x24,0x24,0x24,0x24,0x24,0x24,0x24,0x24	
+	]
+];
+
+// Quantizer lookup, step 4: table row, allocation[] value -> quant table index
+MP2.QUANT_LUT_STEP4 = [
+	[0, 1, 2, 17],
+	[0, 1, 2, 3, 4, 5, 6, 17],
+	[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 17],
+	[0, 1, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
+	[0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 17],
+	[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
+];
+
+MP2.QUANT_TAB = [
+	{levels:     3, group: 1, bits:  5},  //  1
+	{levels:     5, group: 1, bits:  7},  //  2
+	{levels:     7, group: 0, bits:  3},  //  3
+	{levels:     9, group: 1, bits: 10},  //  4
+	{levels:    15, group: 0, bits:  4},  //  5
+	{levels:    31, group: 0, bits:  5},  //  6
+	{levels:    63, group: 0, bits:  6},  //  7
+	{levels:   127, group: 0, bits:  7},  //  8
+	{levels:   255, group: 0, bits:  8},  //  9
+	{levels:   511, group: 0, bits:  9},  // 10
+	{levels:  1023, group: 0, bits: 10},  // 11
+	{levels:  2047, group: 0, bits: 11},  // 12
+	{levels:  4095, group: 0, bits: 12},  // 13
+	{levels:  8191, group: 0, bits: 13},  // 14
+	{levels: 16383, group: 0, bits: 14},  // 15
+	{levels: 32767, group: 0, bits: 15},  // 16
+	{levels: 65535, group: 0, bits: 16}   // 17
+];
+
+return MP2;
+
+})();
+

src/player.js

@@ -0,0 +1,243 @@
+JSMpeg.Player = (function(){ "use strict";
+
+var Player = function(url, options) {
+	this.options = options || {};
+
+	if (url.match(/^wss?:\/\//)) {
+		this.source = new JSMpeg.Source.WebSocket(url, options);
+		options.streaming = true;
+	}
+	else if (options.progressive !== false) {
+		this.source = new JSMpeg.Source.AjaxProgressive(url, options);
+		options.streaming = false;
+	}
+	else {
+		this.source = new JSMpeg.Source.Ajax(url, options);
+		options.streaming = false;
+	}
+
+	this.maxAudioLag = options.maxAudioLag || 0.25;
+	this.loop = options.loop !== false;
+	this.autoplay = !!options.autoplay || options.streaming;
+
+	this.demuxer = new JSMpeg.Demuxer.TS(options);
+	this.source.connect(this.demuxer);
+
+	if (options.video !== false) {
+		this.video = new JSMpeg.Decoder.MPEG1Video(options);
+		this.renderer = !options.disableGl && JSMpeg.Renderer.WebGL.IsSupported()
+			? new JSMpeg.Renderer.WebGL(options)
+			: new JSMpeg.Renderer.Canvas2D(options);
+		this.demuxer.connect(JSMpeg.Demuxer.TS.STREAM.VIDEO_1, this.video);
+		this.video.connect(this.renderer);
+	}
+
+	if (options.audio !== false && JSMpeg.AudioOutput.WebAudio.IsSupported()) {
+		this.audio = new JSMpeg.Decoder.MP2Audio(options);
+		this.audioOut = new JSMpeg.AudioOutput.WebAudio(options);
+		this.demuxer.connect(JSMpeg.Demuxer.TS.STREAM.AUDIO_1, this.audio);
+		this.audio.connect(this.audioOut);
+	}
+
+	Object.defineProperty(this, 'currentTime', {
+		get: this.getCurrentTime,
+		set: this.setCurrentTime
+	});
+	Object.defineProperty(this, 'volume', {
+		get: this.getVolume,
+		set: this.setVolume
+	});
+
+	this.unpauseOnShow = false;
+	if (options.pauseWhenHidden !== false) {
+		document.addEventListener('visibilitychange', this.showHide.bind(this));
+	}
+
+	this.source.start();
+
+	if (this.autoplay) {
+		this.play();
+	}
+};
+
+Player.prototype.showHide = function(ev) {
+	if (document.visibilityState === 'hidden') {
+		this.unpauseOnShow = this.wantsToPlay;
+		this.pause();
+	}
+	else if (this.unpauseOnShow) {
+		this.play();
+	}
+};
+
+Player.prototype.play = function(ev) {
+	this.animationId = requestAnimationFrame(this.update.bind(this));
+	this.wantsToPlay = true;
+};
+
+Player.prototype.pause = function(ev) {
+	cancelAnimationFrame(this.animationId);
+	this.wantsToPlay = false;
+	this.isPlaying = false;
+
+	if (this.audio && this.audio.canPlay) {
+		// Seek to the currentTime again - audio may already be enqueued a bit
+		// further, so we have to rewind it.
+		this.audioOut.stop();
+		this.seek(this.currentTime);
+	}
+};
+
+Player.prototype.getVolume = function() {
+	return this.audioOut ? this.audioOut.volume : 0;
+};
+
+Player.prototype.setVolume = function(volume) {
+	if (this.audioOut) {
+		this.audioOut.volume = volume;
+	}
+};
+
+Player.prototype.stop = function(ev) {
+	this.pause();
+	this.seek(0);
+	if (this.video && this.options.decodeFirstFrame !== false) {
+		this.video.decode();
+	}
+};
+
+Player.prototype.seek = function(time) {
+	var startOffset = this.audio && this.audio.canPlay
+		? this.audio.startTime
+		: this.video.startTime;
+
+	if (this.video) {
+		this.video.seek(time + startOffset);
+	}
+	if (this.audio) {
+		this.audio.seek(time + startOffset);
+	}
+
+	this.startTime = JSMpeg.Now() - time;
+};
+
+Player.prototype.getCurrentTime = function() {
+	return this.audio && this.audio.canPlay
+		? this.audio.currentTime - this.audio.startTime
+		: this.video.currentTime - this.video.startTime;
+};
+
+Player.prototype.setCurrentTime = function(time) {
+	this.seek(time);
+};
+
+Player.prototype.update = function() {
+	this.animationId = requestAnimationFrame(this.update.bind(this));
+
+	if (!this.source.established) {
+		if (this.renderer) {
+			this.renderer.renderProgress(this.source.progress);
+		}
+		return;
+	}
+
+	if (!this.isPlaying) {
+		this.isPlaying = true;
+		this.startTime = JSMpeg.Now() - this.currentTime;
+	}
+
+	if (this.options.streaming) {
+		this.updateForStreaming();
+	}
+	else {
+		this.updateForStaticFile();
+	}
+};
+
+Player.prototype.updateForStreaming = function() {
+	// When streaming, immediately decode everything we have buffered up until
+	// now to minimize playback latency.
+
+	if (this.video) {
+		this.video.decode();
+	}
+
+	if (this.audio) {
+		var decoded = false;
+		do {
+			// If there's a lot of audio enqueued already, disable output and
+			// catch up with the encoding.
+			if (this.audioOut.enqueuedTime > this.maxAudioLag) {
+				this.audioOut.resetEnqueuedTime();
+				this.audioOut.enabled = false;
+			}
+			decoded = this.audio.decode();		
+		} while (decoded);
+		this.audioOut.enabled = true;
+	}
+};
+
+Player.prototype.updateForStaticFile = function() {
+	var notEnoughData = false,
+		headroom = 0;
+
+	// If we have an audio track, we always try to sync the video to the audio.
+	// Gaps and discontinuities are far more percetable in audio than in video.
+
+	if (this.audio && this.audio.canPlay) {
+		// Do we have to decode and enqueue some more audio data?
+		while (
+			!notEnoughData && 
+			this.audio.decodedTime - this.audio.currentTime < 0.25
+		) {
+			notEnoughData = !this.audio.decode();
+		}
+
+		// Sync video to audio
+		if (this.video && this.video.currentTime < this.audio.currentTime) {
+			notEnoughData = !this.video.decode();
+		}
+
+		headroom = this.demuxer.currentTime - this.audio.currentTime;
+	}
+
+
+	else if (this.video) {
+		// Video only - sync it to player's wallclock
+		var targetTime = (JSMpeg.Now() - this.startTime) + this.video.startTime,
+			lateTime = targetTime - this.video.currentTime,
+			frameTime = 1/this.video.frameRate;
+
+		if (this.video && lateTime > 0) {
+			// If the video is too far behind (>2 frames), simply reset the
+			// target time to the next frame instead of trying to catch up.
+			if (lateTime > frameTime * 2) {
+				this.startTime += lateTime;
+			}
+
+			notEnoughData = !this.video.decode();
+		}
+
+		headroom = this.demuxer.currentTime - targetTime;
+	}
+
+	// Notify the source of the playhead headroom, so it can decide whether to
+	// continue loading further data.
+	this.source.resume(headroom);
+
+	// If we failed to decode and the source is complete, it means we reached
+	// the end of our data. We may want to loop.
+	if (notEnoughData && this.source.completed) {
+		if (this.loop) {
+			this.seek(0);
+		}
+		else {
+			this.pause();
+		}
+	}
+};
+
+return Player;
+
+})();
+

src/ts.js

@@ -0,0 +1,190 @@
+JSMpeg.Demuxer.TS = (function(){ "use strict";
+
+var TS = function(options) {
+	this.bits = null;
+	this.leftoverBytes = null;
+
+	this.guessVideoFrameEnd = true;
+	this.pidsToStreamIds = {};
+
+	this.pesPacketInfo = {};
+	this.startTime = 0;
+	this.currentTime = 0;
+};
+
+TS.prototype.connect = function(streamId, destination) {
+	this.pesPacketInfo[streamId] = {
+		destination: destination,
+		currentLength: 0,
+		totalLength: 0,
+		pts: 0,
+		buffers: []
+	};
+};
+
+TS.prototype.write = function(buffer) {
+	if (this.leftoverBytes) {
+		var totalLength = buffer.byteLength + this.leftoverBytes.byteLength;
+		this.bits = new JSMpeg.BitBuffer(totalLength);
+		this.bits.write([this.leftoverBytes, buffer]);
+	}
+	else {
+		this.bits = new JSMpeg.BitBuffer(buffer);
+	}
+
+	while (this.bits.has(188 << 3)) {
+		this.parsePacket();
+	}
+
+	var leftoverCount = this.bits.byteLength - (this.bits.index >> 3);
+	this.leftoverBytes = leftoverCount > 0
+		? this.bits.bytes.subarray(this.bits.index >> 3)
+		: null;
+};
+
+TS.prototype.parsePacket = function() {
+	var end = (this.bits.index >> 3) + 188;
+
+	if (this.bits.read(8) !== 0x47) {
+		throw("Sync Token not found");
+	}
+
+	var transportError = this.bits.read(1),
+		payloadStart = this.bits.read(1),
+		transportPriority = this.bits.read(1),
+		pid = this.bits.read(13),
+		transportScrambling = this.bits.read(2),
+		adaptationField = this.bits.read(2),
+		continuityCounter = this.bits.read(4);
+
+
+	// If this is the start of a new payload; signal the end of the previous
+	// frame, if we didn't do so already.
+	var streamId = this.pidsToStreamIds[pid];
+	if (payloadStart && streamId) {
+		var pi = this.pesPacketInfo[streamId];
+		if (pi && pi.currentLength) {
+			this.packetComplete(pi);
+		}
+	}
+
+	// Extract current payload
+	if (adaptationField & 0x1) {
+		if ((adaptationField & 0x2)) {
+			var adaptationFieldLength = this.bits.read(8);
+			this.bits.skip(adaptationFieldLength << 3);
+		}
+
+		if (payloadStart && this.bits.nextBytesAreStartCode()) {
+			this.bits.skip(24);
+			streamId = this.bits.read(8);
+			this.pidsToStreamIds[pid] = streamId;
+
+			var packetLength = this.bits.read(16)
+			this.bits.skip(8);
+			var ptsDtsFlag = this.bits.read(2);
+			this.bits.skip(6);
+			var headerLength = this.bits.read(8);
+			var payloadBeginIndex = this.bits.index + (headerLength << 3);
+			
+			var pi = this.pesPacketInfo[streamId];
+			if (pi) {
+				var pts = 0;
+				if (ptsDtsFlag & 0x2) {
+					// The Presentation Timestamp is encoded as 33(!) bit
+					// integer, but has a "marker bit" inserted at weird places
+					// in between, making the whole thing 5 bytes in size.
+					// You can't make this shit up...
+					this.bits.skip(4);
+					var p32_30 = this.bits.read(3);
+					this.bits.skip(1);
+					var p29_15 = this.bits.read(15);
+					this.bits.skip(1);
+					var p14_0 = this.bits.read(15);
+					this.bits.skip(1);
+
+					// Can't use bit shifts here; we need 33 bits of precision,
+					// so we're using JavaScript's double number type. Also
+					// devide by the 90khz clock to get the pts in seconds
+					pts = (p32_30 * 1073741824 + p29_15 * 32768 + p14_0)/90000;
+					
+					this.currentTime = pts;
+					if (this.startTime === -1) {
+						this.startTime = pts;
+					}
+				}
+
+				var payloadLength = packetLength 
+					? packetLength - headerLength - 3
+					: 0;
+				this.packetStart(pi, pts, payloadLength);
+			}
+
+			// Skip the rest of the header without parsing it
+			this.bits.index = payloadBeginIndex;
+		}
+
+		if (streamId) {
+			// Attempt to detect if the PES packet is complete. For Audio (and
+			// other) packets, we received a total packet length with the PES 
+			// header, so we can check the current length.
+
+			// For Video packets, we have to guess the end by detecting if this
+			// TS packet was padded - there's no good reason to pad a TS packet 
+			// in between, but it might just fit exactly. If this fails, we can
+			// only wait for the next PES header for that stream.
+
+			var pi = this.pesPacketInfo[streamId];
+			if (pi) {
+				var start = this.bits.index >> 3;
+				var complete = this.packetAddData(pi, start, end);
+
+				var hasPadding = !payloadStart && (adaptationField & 0x2);
+				if (complete || (this.guessVideoFrameEnd && hasPadding)) {
+					this.packetComplete(pi);	
+				}
+			}
+		}
+	}
+
+	this.bits.index = end << 3;
+};
+
+TS.prototype.packetStart = function(pi, pts, payloadLength) {
+	pi.totalLength = payloadLength;
+	pi.currentLength = 0;
+	pi.pts = pts;
+};
+
+TS.prototype.packetAddData = function(pi, start, end) {
+	pi.buffers.push(this.bits.bytes.subarray(start, end));
+	pi.currentLength += end - start;
+
+	var complete = (pi.totalLength !== 0 && pi.currentLength >= pi.totalLength);
+	return complete;
+};
+
+TS.prototype.packetComplete = function(pi) {
+	pi.destination.write(pi.pts, pi.buffers);
+	pi.totalLength = 0;
+	pi.currentLength = 0;
+	pi.buffers = [];
+};
+
+TS.STREAM = {
+	PACK_HEADER: 0xBA,
+	SYSTEM_HEADER: 0xBB,
+	PROGRAM_MAP: 0xBC,
+	PRIVATE_1: 0xBD,
+	PADDING: 0xBE,
+	PRIVATE_2: 0xBF,
+	AUDIO_1: 0xC0,
+	VIDEO_1: 0xE0,
+	DIRECTORY: 0xFF
+};
+
+return TS;
+
+})();
+
+

src/video-element.js

@@ -0,0 +1,161 @@
+JSMpeg.VideoElement = (function(){ "use strict";
+
+var VideoElement = function(element) {	
+	var url = element.dataset.url;
+
+	if (!url) {
+		throw ("VideoElement has no `data-url` attribute");
+	}
+
+	// Setup the div container, canvas and play button
+	var addStyles = function(element, styles) {
+		for (var name in styles) {
+			element.style[name] = styles[name];
+		}
+	};
+
+	this.container = element;
+	addStyles(this.container, {
+		display: 'inline-block',
+		position: 'relative',
+		minWidth: '80px', minHeight: '80px'
+	});
+
+	this.canvas = document.createElement('canvas');
+	this.canvas.width = 960;
+	this.canvas.height = 540;
+	addStyles(this.canvas, {
+		display: 'block',
+		width: '100%'
+	});
+	this.container.appendChild(this.canvas);
+
+	this.playButton = document.createElement('div');
+	this.playButton.innerHTML = VideoElement.PLAY_BUTTON;
+	addStyles(this.playButton, {
+		zIndex: 2, position: 'absolute',
+		top: '0', bottom: '0', left: '0', right: '0',
+		maxWidth: '75px', maxHeight: '75px',
+		margin: 'auto',
+		opacity: '0.7',
+		cursor: 'pointer'
+	});
+	this.container.appendChild(this.playButton);	
+
+	// Parse the data-options - we try to decode the values as json. This way
+	// we can get proper boolean and number values. If JSON.parse() fails,
+	// treat it as a string.
+	var options = {canvas: this.canvas};
+	for (var option in element.dataset) {
+		try {
+			options[option] = JSON.parse(element.dataset[option]);
+		}
+		catch(err) {
+			options[option] = element.dataset[option];
+		}
+	}
+
+	// Create the player instance
+	this.player = new JSMpeg.Player(url, options);
+
+	// Setup the poster element, if any
+	if (options.poster && !options.autoplay && !this.player.options.streaming) {
+		options.decodeFirstFrame = false;
+		this.poster = new Image();
+		this.poster.src = options.poster;
+		this.poster.addEventListener('load', this.posterLoaded)
+		addStyles(this.poster, {
+			display: 'block', zIndex: 1, position: 'absolute',
+			top: 0, left: 0, bottom: 0, right: 0
+		});
+		this.container.appendChild(this.poster);
+	}
+
+	// Add the click handler if this video is pausable
+	if (!this.player.options.streaming) {
+		this.container.addEventListener('click', this.onClick.bind(this));
+	}
+
+	// Hide the play button if this video immediately begins playing
+	if (options.autoplay || this.player.options.streaming) {
+		this.playButton.style.display = 'none';
+	}
+
+	// Set up the unlock audio buton for iOS devices. iOS only allows us to 
+	// play audio after a user action has initiated playing. For autoplay or 
+	// streaming players we set up a muted speaker icon as the button. For all
+	// others, we can simply use the play button.
+	if (this.player.audioOut && !this.player.audioOut.unlocked) {
+		var unlockAudioElement = this.container;
+
+		if (options.autoplay || this.player.options.streaming) {
+			this.unmuteButton = document.createElement('div');
+			this.unmuteButton.innerHTML = VideoElement.UNMUTE_BUTTON;
+			addStyles(this.unmuteButton, {
+				zIndex: 2, position: 'absolute',
+				bottom: '10px', right: '20px',
+				width: '75px', height: '75px',
+				margin: 'auto',
+				opacity: '0.7',
+				cursor: 'pointer'				
+			});
+			this.container.appendChild(this.unmuteButton);
+			unlockAudioElement = this.unmuteButton;
+		}
+
+		this.unlockAudioBound = this.onUnlockAudio.bind(this, unlockAudioElement);
+		unlockAudioElement.addEventListener('touchstart', this.unlockAudioBound, false);
+		unlockAudioElement.addEventListener('click', this.unlockAudioBound, true);
+	}
+};
+
+VideoElement.prototype.onUnlockAudio = function(element, ev) {
+	if (this.unmuteButton) {
+		ev.preventDefault();
+		ev.stopPropagation();
+	}
+	this.player.audioOut.unlock(function(){
+		if (this.unmuteButton) {
+			this.unmuteButton.style.display = 'none';
+		}
+		element.removeEventListener('touchstart', this.unlockAudioBound);
+		element.removeEventListener('click', this.unlockAudioBound);
+	}.bind(this));
+};
+
+VideoElement.prototype.onClick = function(ev) {
+	if (this.player.isPlaying) {
+		this.player.pause();
+		this.playButton.style.display = 'block';
+	}
+	else {
+		this.player.play();
+		this.playButton.style.display = 'none';
+		if (this.poster) {
+			this.poster.style.display = 'none';
+		}
+	}
+};
+
+VideoElement.PLAY_BUTTON = 
+	'<svg style="max-width: 75px; max-height: 75px;" ' +
+		'viewBox="0 0 200 200" alt="Play video">' +
+		'<circle cx="100" cy="100" r="90" fill="none" '+
+			'stroke-width="15" stroke="#fff"/>' +
+		'<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>' +
+	'</svg>';
+
+VideoElement.UNMUTE_BUTTON = 
+	'<svg style="max-width: 75px; max-height: 75px;" viewBox="0 0 75 75">' +
+		'<polygon class="audio-speaker" stroke="none" fill="#fff" '+
+			'points="39,13 22,28 6,28 6,47 21,47 39,62 39,13"/>' +
+		'<g stroke="#fff" stroke-width="5">' +
+			'<path d="M 49,50 69,26"/>' +
+			'<path d="M 69,50 49,26"/>' +
+		'</g>' +
+	'</svg>';
+
+return VideoElement;
+
+})();
+

src/webaudio.js

@@ -0,0 +1,131 @@
+JSMpeg.AudioOutput.WebAudio = (function() { "use strict";
+
+var WebAudioOut = function(options) {
+	this.context = WebAudioOut.CachedContext =
+		WebAudioOut.CachedContext ||
+		new (window.AudioContext || window.webkitAudioContext)();
+
+	this.gain = this.context.createGain();
+	this.gain.connect(this.context.destination);
+	this.destination = this.gain;
+
+	this.startTime = 0;
+	this.buffer = null;
+	this.wallclockStartTime = 0;
+	this.volume = 1;
+	this.enabled = true;
+
+	this.unlocked = !WebAudioOut.NeedsUnlocking();
+	
+	Object.defineProperty(this, 'enqueuedTime', {get: this.getEnqueuedTime});
+};
+
+WebAudioOut.prototype.play = function(sampleRate, left, right) {
+	if (!this.enabled) {
+		return;
+	}
+
+	// If the context is not unlocked yet, we simply advance the start time
+	// to "fake" actually playing audio. This will keep the video in sync.
+	if (!this.unlocked) {
+		var ts = JSMpeg.Now()
+		if (this.wallclockStartTime < ts) {
+			this.wallclockStartTime = ts;
+		}
+		this.wallclockStartTime += left.length / sampleRate;
+		return;
+	}
+
+
+	this.gain.gain.value = this.volume;
+
+	var buffer = this.context.createBuffer(2, left.length, sampleRate);
+	buffer.getChannelData(0).set(left);
+	buffer.getChannelData(1).set(right);
+
+	var source = this.context.createBufferSource();
+	source.buffer = buffer;
+	source.connect(this.destination);
+
+	var now = this.context.currentTime;
+	var duration = buffer.duration;
+	if (this.startTime < now) {
+		this.startTime = now;
+		this.wallclockStartTime = JSMpeg.Now();
+	}
+
+	source.start(this.startTime);
+	this.startTime += duration;
+	this.wallclockStartTime += duration;
+};
+
+WebAudioOut.prototype.stop = function() {
+	// Meh; there seems to be no simple way to get a list of currently
+	// active source nodes from the Audio Context, and maintaining this
+	// list ourselfs would be a pain, so we just set the gain to 0
+	// to cut off all enqueued audio instantly.
+	this.gain.gain.value = 0;
+};
+
+WebAudioOut.prototype.getEnqueuedTime = function() {
+	// The AudioContext.currentTime is only updated every so often, so if we
+	// want to get exact timing, we need to rely on the system time.
+	return Math.max(this.wallclockStartTime - JSMpeg.Now(), 0)
+};
+
+WebAudioOut.prototype.resetEnqueuedTime = function() {
+	this.startTime = this.context.currentTime;
+	this.wallclockStartTime = JSMpeg.Now();
+};
+
+WebAudioOut.prototype.unlock = function(callback) {
+	if (this.unlocked) {
+		if (callback) {
+			callback();
+		}
+		return;
+	}
+
+	this.unlockCallback = callback;
+	
+	// Create empty buffer and play it
+	var buffer = this.context.createBuffer(1, 1, 22050);
+	var source = this.context.createBufferSource();
+	source.buffer = buffer;
+	source.connect(this.destination);
+	source.start(0);
+
+	setTimeout(this.checkIfUnlocked.bind(this, source, 0), 0);
+};
+
+WebAudioOut.prototype.checkIfUnlocked = function(source, attempt) {
+	if (
+		source.playbackState === source.PLAYING_STATE || 
+		source.playbackState === source.FINISHED_STATE
+	) {
+		this.unlocked = true;
+		if (this.unlockCallback) {
+			this.unlockCallback();
+			this.unlockCallback = null;	
+		}
+	}
+	else if (attempt < 10) {
+		// Jeez, what a shit show. Thanks iOS!
+		setTimeout(this.checkIfUnlocked.bind(this, source, attempt+1), 100);
+	}
+};
+
+WebAudioOut.NeedsUnlocking = function() {
+	return /iPhone|iPad|iPod/i.test(navigator.userAgent);
+};
+
+WebAudioOut.IsSupported = function() {
+	return (window.AudioContext || window.webkitAudioContext);
+};
+
+WebAudioOut.CachedContext = null;
+
+return WebAudioOut;
+
+})();
+

src/webgl.js

@@ -0,0 +1,230 @@
+JSMpeg.Renderer.WebGL = (function(){ "use strict";
+
+var WebGLRenderer = function(options) {
+	this.canvas = options.canvas || document.createElement('canvas');
+	this.width = this.canvas.width;
+	this.height = this.canvas.height;
+	this.enabled = true;
+
+	var contextCreateOptions = {
+		preserveDrawingBuffer: !!options.preserveDrawingBuffer,
+		alpha: false,
+		depth: false,
+		stencil: false,
+		antialias: false
+	};
+
+	this.gl = 
+		this.canvas.getContext('webgl', contextCreateOptions) || 
+		this.canvas.getContext('experimental-webgl', contextCreateOptions);
+
+	if (!this.gl) {
+		throw new Error('Failed to get WebGL Context');
+	}
+
+	var gl = this.gl;
+	var vertexAttr = null;
+
+	// Init buffers
+	var vertexBuffer = gl.createBuffer();
+	var vertexCoords = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]);
+	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+	gl.bufferData(gl.ARRAY_BUFFER, vertexCoords, gl.STATIC_DRAW);
+
+	// Setup the main YCrCbToRGBA shader
+	this.program = this.createProgram(
+		WebGLRenderer.SHADER.VERTEX_IDENTITY,
+		WebGLRenderer.SHADER.FRAGMENT_YCRCB_TO_RGBA
+	);
+	vertexAttr = gl.getAttribLocation(this.program, 'vertex');
+	gl.enableVertexAttribArray(vertexAttr);
+	gl.vertexAttribPointer(vertexAttr, 2, gl.FLOAT, false, 0, 0);
+
+	this.textureY = this.createTexture(0, 'textureY');
+	this.textureCb = this.createTexture(1, 'textureCb');
+	this.textureCr = this.createTexture(2, 'textureCr');
+
+
+	// Setup the loading animation shader
+	this.loadingProgram = this.createProgram(
+		WebGLRenderer.SHADER.VERTEX_IDENTITY,
+		WebGLRenderer.SHADER.FRAGMENT_LOADING
+	);
+	vertexAttr = gl.getAttribLocation(this.loadingProgram, 'vertex');
+	gl.enableVertexAttribArray(vertexAttr);
+	gl.vertexAttribPointer(vertexAttr, 2, gl.FLOAT, false, 0, 0);
+
+	this.shouldCreateUnclampedViews = !this.allowsClampedTextureData();
+};
+
+WebGLRenderer.prototype.resize = function(width, height) {
+	this.width = width|0;
+	this.height = height|0;
+
+	this.canvas.width = this.width;
+	this.canvas.height = this.height;
+
+	this.gl.useProgram(this.program);
+	this.gl.viewport(0, 0, this.width, this.height);
+};
+
+WebGLRenderer.prototype.createTexture = function(index, name) {
+	var gl = this.gl;
+	var texture = gl.createTexture();
+
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	gl.uniform1i(gl.getUniformLocation(this.program, name), index);
+
+	return texture;
+};
+
+WebGLRenderer.prototype.createProgram = function(vsh, fsh) {
+	var gl = this.gl;
+	var program = gl.createProgram();
+
+	gl.attachShader(program, this.compileShader(gl.VERTEX_SHADER, vsh));
+	gl.attachShader(program, this.compileShader(gl.FRAGMENT_SHADER, fsh));
+	gl.linkProgram(program);
+	gl.useProgram(program);
+
+	return program;
+};
+
+WebGLRenderer.prototype.compileShader = function(type, source) {
+	var gl = this.gl;
+	var shader = gl.createShader(type);
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		throw new Error(gl.getShaderInfoLog(shader));
+	}
+
+	return shader;
+};
+
+WebGLRenderer.prototype.allowsClampedTextureData = function() {
+	var gl = this.gl;
+	var texture = gl.createTexture();
+
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	gl.texImage2D(
+		gl.TEXTURE_2D, 0, gl.LUMINANCE, 1, 1, 0,
+		gl.LUMINANCE, gl.UNSIGNED_BYTE, new Uint8ClampedArray([0])
+	);
+	return (gl.getError() === 0);
+};
+
+WebGLRenderer.prototype.renderProgress = function(progress) {
+	var gl = this.gl;
+	var loc = gl.getUniformLocation(this.loadingProgram, 'progress');
+	gl.uniform1f(loc, progress);
+	gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+};
+
+WebGLRenderer.prototype.render = function(y, cb, cr) {
+	if (!this.enabled) {
+		return;
+	}
+
+	var gl = this.gl;
+	var w = ((this.width + 15) >> 4) << 4,
+		h = this.height,
+		w2 = w >> 1,
+		h2 = h >> 1;
+
+	// In some browsers WebGL doesn't like Uint8ClampedArrays (this is a bug
+	// and should be fixed soon-ish), so we have to create a Uint8Array view 
+	// for each plane.
+	if (this.shouldCreateUnclampedViews) {
+		y = new Uint8Array(y.buffer),
+		cb = new Uint8Array(cb.buffer),
+		cr = new Uint8Array(cr.buffer);	
+	}	
+
+	this.updateTexture(gl.TEXTURE0, this.textureY, w, h, y);
+	this.updateTexture(gl.TEXTURE1, this.textureCb, w2, h2, cb);
+	this.updateTexture(gl.TEXTURE2, this.textureCr, w2, h2, cr);
+
+	gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+};
+
+WebGLRenderer.prototype.updateTexture = function(unit, texture, w, h, data) {
+	var gl = this.gl;
+	gl.activeTexture(unit);
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	gl.texImage2D(
+		gl.TEXTURE_2D, 0, gl.LUMINANCE, w, h, 0, 
+		gl.LUMINANCE, gl.UNSIGNED_BYTE, data
+	);
+}
+
+WebGLRenderer.IsSupported = function() {
+	try {
+		if (!window.WebGLRenderingContext) {
+			return false;
+		}
+
+		var canvas = document.createElement('canvas'); 
+		return !!(
+			canvas.getContext('webgl') || 
+			canvas.getContext('experimental-webgl')
+		);
+	}
+	catch (err) {
+		return false;
+	} 
+};
+
+WebGLRenderer.SHADER = {
+	FRAGMENT_YCRCB_TO_RGBA: [
+		'precision mediump float;',
+		'uniform sampler2D textureY;',
+		'uniform sampler2D textureCb;',
+		'uniform sampler2D textureCr;',
+		'varying vec2 texCoord;',
+
+		'void main() {',
+			'float y = texture2D(textureY, texCoord).r;',
+			'float cb = texture2D(textureCb, texCoord).r - 0.5;',
+			'float cr = texture2D(textureCr, texCoord).r - 0.5;',
+
+			'gl_FragColor = vec4(',
+				'y + 1.4 * cb,',
+				'y + -0.343 * cr - 0.711 * cb,',
+				'y + 1.765 * cr,',
+				'1.0',
+			');',
+		'}'
+	].join('\n'),
+
+	FRAGMENT_LOADING: [
+		'precision mediump float;',
+		'uniform float progress;',
+		'varying vec2 texCoord;',
+
+		'void main() {',
+			'float c = ceil(progress-(1.0-texCoord.y));',
+			'gl_FragColor = vec4(c,c,c,1);',
+		'}'
+	].join('\n'),
+
+	VERTEX_IDENTITY: [
+		'attribute vec2 vertex;',
+		'varying vec2 texCoord;',
+
+		'void main() {',
+			'texCoord = vertex;',
+			'gl_Position = vec4((vertex * 2.0 - 1.0) * vec2(1, -1), 0.0, 1.0);',
+		'}'
+	].join('\n')
+};
+
+return WebGLRenderer;
+
+})();
+

src/websocket.js

@@ -0,0 +1,66 @@
+JSMpeg.Source.WebSocket = (function(){ "use strict";
+
+var WSSource = function(url, options) {
+	this.url = url;
+	this.socket = null;	
+
+	this.callbacks = {connect: [], data: []};
+	this.destination = null;
+
+	this.reconnectInterval = options.reconnectInterval || 5;
+	this.shouldAttemptReconnect = !!this.reconnectInterval;
+
+	this.completed = false;
+	this.established = false;
+	this.progress = 0;
+};
+
+WSSource.prototype.connect = function(destination) {
+	this.destination = destination;
+};
+
+WSSource.prototype.abort = function() {
+	this.shouldAttemptReconnect = false;
+	this.socket.close();
+};
+
+WSSource.prototype.start = function() {
+	this.shouldAttemptReconnect = !!this.reconnectInterval;
+	this.progress = 0;
+	this.established = false;
+
+	this.socket = new WebSocket(this.url);
+	this.socket.binaryType = 'arraybuffer';
+	this.socket.onmessage = this.onMessage.bind(this);
+	this.socket.onopen = this.onOpen.bind(this);
+	this.socket.onerror = this.onClose.bind(this);
+	this.socket.onclose = this.onClose.bind(this);
+};
+
+WSSource.prototype.resume = function(secondsHeadroom) {
+	// Nothing to do here
+};
+
+WSSource.prototype.onOpen = function() {
+	this.progress = 1;
+	this.established = true;
+};
+
+WSSource.prototype.onClose = function() {
+	if (this.shouldAttemptReconnect) {
+		setTimeout(function(){
+			this.start();	
+		}.bind(this), this.reconnectInterval*1000);
+	}
+};
+
+WSSource.prototype.onMessage = function(ev) {
+	if (this.destination) {
+		this.destination.write(ev.data);
+	}
+};
+
+return WSSource;
+
+})();
+

stream-example.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta name="viewport" content="width=320, initial-scale=1"/>
-	<title>jsmpeg streaming</title>
-	<style type="text/css">
-		body {
-			background: #333;
-			text-align: center;
-			margin-top: 10%;
-		}
-		#videoCanvas {
-			/* Always stretch the canvas to 640x480, regardless of its
-			internal size. */
-			width: 640px;
-			height: 480px;
-		}
-	</style>
-</head>
-<body>
-	<!-- The Canvas size specified here is the "initial" internal resolution. jsmpeg will
-		change this internal resolution to whatever the source provides. The size the
-		canvas is displayed on the website is dictated by the CSS style.
-	-->
-	<canvas id="videoCanvas" width="640" height="480">
-		<p>
-			Please use a browser that supports the Canvas Element, like
-			<a href="http://www.google.com/chrome">Chrome</a>,
-			<a href="http://www.mozilla.com/firefox/">Firefox</a>,
-			<a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10
-		</p>
-	</canvas>
-	<script type="text/javascript" src="jsmpg.js"></script>
-	<script type="text/javascript">
-		// Setup the WebSocket connection and start the player
-		var client = new WebSocket( 'ws://example.com:8084/' );
-
-		var canvas = document.getElementById('videoCanvas');
-		var player = new jsmpeg(client, {canvas:canvas});
-	</script>
-</body>
-</html>

stream-server.js

@@ -1,76 +0,0 @@
-
-if( process.argv.length < 3 ) {
-	console.log(
-		'Usage: \n' +
-		'node stream-server.js <secret> [<stream-port> <websocket-port>]'
-	);
-	process.exit();
-}
-
-var STREAM_SECRET = process.argv[2],
-	STREAM_PORT = process.argv[3] || 8082,
-	WEBSOCKET_PORT = process.argv[4] || 8084,
-	STREAM_MAGIC_BYTES = 'jsmp'; // Must be 4 bytes
-
-var width = 320,
-	height = 240;
-
-// Websocket Server
-var socketServer = new (require('ws').Server)({port: WEBSOCKET_PORT});
-socketServer.on('connection', function(socket) {
-	// Send magic bytes and video size to the newly connected socket
-	// struct { char magic[4]; unsigned short width, height;}
-	var streamHeader = new Buffer(8);
-	streamHeader.write(STREAM_MAGIC_BYTES);
-	streamHeader.writeUInt16BE(width, 4);
-	streamHeader.writeUInt16BE(height, 6);
-	socket.send(streamHeader, {binary:true});
-
-	console.log( 'New WebSocket Connection ('+socketServer.clients.length+' total)' );
-	
-	socket.on('close', function(code, message){
-		console.log( 'Disconnected WebSocket ('+socketServer.clients.length+' total)' );
-	});
-});
-
-socketServer.broadcast = function(data, opts) {
-	for( var i in this.clients ) {
-		if (this.clients[i].readyState == 1) {
-			this.clients[i].send(data, opts);
-		}
-		else {
-			console.log( 'Error: Client ('+i+') not connected.' );
-		}
-	}
-};
-
-
-// HTTP Server to accept incomming MPEG Stream
-var streamServer = require('http').createServer( function(request, response) {
-	var params = request.url.substr(1).split('/');
-
-	if( params[0] == STREAM_SECRET ) {
-		response.connection.setTimeout(0);
-		
-		width = (params[1] || 320)|0;
-		height = (params[2] || 240)|0;
-		
-		console.log(
-			'Stream Connected: ' + request.socket.remoteAddress + 
-			':' + request.socket.remotePort + ' size: ' + width + 'x' + height
-		);
-		request.on('data', function(data){
-			socketServer.broadcast(data, {binary:true});
-		});
-	}
-	else {
-		console.log(
-			'Failed Stream Connection: '+ request.socket.remoteAddress + 
-			request.socket.remotePort + ' - wrong secret.'
-		);
-		response.end();
-	}
-}).listen(STREAM_PORT);
-
-console.log('Listening for MPEG Stream on http://127.0.0.1:'+STREAM_PORT+'/<secret>/<width>/<height>');
-console.log('Awaiting WebSocket connections on ws://127.0.0.1:'+WEBSOCKET_PORT+'/');

view-stream.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>JSMpeg Stream Client</title>
+	<style type="text/css">
+		html, body {
+			background-color: #111;
+			text-align: center;
+		}
+	</style>
+	
+</head>
+<body>
+	<canvas id="video-canvas"></canvas>
+	<script type="text/javascript" src="jsmpeg.min.js"></script>
+	<script type="text/javascript">
+		var canvas = document.getElementById('video-canvas');
+		var url = 'ws://'+document.location.hostname+':8082/';
+		var player = new JSMpeg.Player(url, {canvas: canvas});
+	</script>
+</body>
+</html>

websocket-relay.js

@@ -0,0 +1,89 @@
+// Use the websocket-relay to serve a raw MPEG-TS over WebSockets. You can use
+// ffmpeg to feed the relay. ffmpeg -> websocket-relay -> browser
+// Example:
+// node websocket-relay yoursecret 8081 8082
+// ffmpeg -i <some input> -f mpegts http://localhost:8081/yoursecret
+
+var fs = require('fs'),
+	http = require('http'),
+	WebSocket = require('ws');
+
+if (process.argv.length < 3) {
+	console.log(
+		'Usage: \n' +
+		'node websocket-relay.js <secret> [<stream-port> <websocket-port>]'
+	);
+	process.exit();
+}
+
+var STREAM_SECRET = process.argv[2],
+	STREAM_PORT = process.argv[3] || 8081,
+	WEBSOCKET_PORT = process.argv[4] || 8082,
+	RECORD_STREAM = false;
+
+// Websocket Server
+var socketServer = new WebSocket.Server({port: WEBSOCKET_PORT, perMessageDeflate: false});
+socketServer.connectionCount = 0;
+socketServer.on('connection', function(socket) {
+	socketServer.connectionCount++;
+	console.log(
+		'New WebSocket Connection: ', 
+		socket.upgradeReq.socket.remoteAddress,
+		socket.upgradeReq.headers['user-agent'],
+		'('+socketServer.connectionCount+' total)'
+	);
+	socket.on('close', function(code, message){
+		socketServer.connectionCount--;
+		console.log(
+			'Disconnected WebSocket ('+socketServer.connectionCount+' total)'
+		);
+	});
+});
+socketServer.broadcast = function(data) {
+	socketServer.clients.forEach(function each(client) {
+		if (client.readyState === WebSocket.OPEN) {
+			client.send(data);
+		}
+	});
+};
+
+// HTTP Server to accept incomming MPEG-TS Stream from ffmpeg
+var streamServer = http.createServer( function(request, response) {
+	var params = request.url.substr(1).split('/');
+
+	if (params[0] !== STREAM_SECRET) {
+		console.log(
+			'Failed Stream Connection: '+ request.socket.remoteAddress + ':' +
+			request.socket.remotePort + ' - wrong secret.'
+		);
+		response.end();
+	}
+
+	response.connection.setTimeout(0);
+	console.log(
+		'Stream Connected: ' + 
+		request.socket.remoteAddress + ':' +
+		request.socket.remotePort
+	);
+	request.on('data', function(data){
+		socketServer.broadcast(data);
+		if (request.socket.recording) {
+			request.socket.recording.write(data);
+		}
+	});
+	request.on('end',function(){
+		console.log('close');
+		if (request.socket.recording) {
+			request.socket.recording.close();
+		}
+	});
+
+	// Record the stream to a local file?
+	if (RECORD_STREAM) {
+		var path = 'recordings/' + Date.now() + '.ts';
+		request.socket.recording = fs.createWriteStream(path);
+	}
+}).listen(STREAM_PORT);
+
+console.log('Listening for incomming MPEG-TS Stream on http://127.0.0.1:'+STREAM_PORT+'/<secret>');
+console.log('Awaiting WebSocket connections on ws://127.0.0.1:'+WEBSOCKET_PORT+'/');