Initial 0.1.0 version supports >4GB video with cues

Makefile

@@ -0,0 +1,9 @@
+TARGET_FILE = webm-writer-$(VERSION).js
+
+TEST_COPY = test/videowriter/webm-writer-$(VERSION).js
+
+$(TEST_COPY) : $(TARGET_FILE)
+	cp $(TARGET_FILE) $(TEST_COPY)
+
+$(TARGET_FILE) : src/arraybufferdatastream.js src/blobbuffer.js src/webm-writer.js
+	cat $^ > $(TARGET_FILE)

Readme.md

@@ -0,0 +1,70 @@
+# WebM Writer for JavaScript
+
+This is a JavaScript-based WebM video encoder based on the ideas from [Whammy][]. It allows you to turn a series of 
+Canvas frames into a WebM video.
+
+This implementation allows you to create very large video files (exceeding the size of available memory), because it
+can stream chunks immediately to a file on disk using a [FileWriter][] while the video is being constructed, instead of 
+needing to buffer the entire video in memory before saving can begin. Video sizes in excess of 4GB can be written. 
+The implementation currently tops out at 32GB, but this could be extended.
+
+When a FileWriter is not available, it can instead buffer the video in memory as a series of Blobs which are eventually 
+returned to the calling code as one composite Blob. This Blob can be displayed in a <video> element, transmitted 
+to a server, or used for some other purpose. Note that Chrome has a [Blob size limit][] of 500MB.
+
+[FileWriter]: https://developer.chrome.com/apps/fileSystem
+[Whammy]: https://github.com/antimatter15/whammy
+[Blob size limit]: https://github.com/eligrey/FileSaver.js/
+
+## Usage
+
+Include the script in your header:
+
+```html
+<script type="text/javascript" src="webm-writer-0.1.0.js"></script>
+```
+
+First construct the writer, passing in any options you want to customize:
+
+```js
+var videoWriter = new WebMWriter({
+    quality: 0.95,    // WebM image quality from 0.0 (worst) to 1.0 (best)
+    fileWriter: null, // FileWriter in order to stream to a file instead of buffering to memory (optional)
+
+    // You must supply one of:
+    frameDuration: null, // Duration of frames in milliseconds
+    frameRate: null,     // Number of frames per second
+});
+```
+
+Add as many Canvas frames as you like to build your video:
+
+```js
+videoWriter.addFrame(canvas);
+```
+
+When you're done, you must call `complete()` to finish writing the video:
+
+```js
+videoWriter.complete();
+```
+
+`complete()` returns a Promise which resolves when writing is completed.
+
+If you didn't supply a `fileWriter` in the options, the Promise will resolve to Blob which represents the video. You
+could display this blob in an HTML5 &lt;video&gt; tag:
+
+```js
+videoWriter.complete().then(function(webMBlob) {
+    $("video").attr("src", URL.createObjectURL(webMBlob));
+});
+```
+
+## Compatibility
+
+Because this code relies on browser support for encoding a Canvas as a WebP image (using `toDataURL()`), it is presently
+only supported in Google Chrome. It will throw an exception on other browsers.
+
+## License
+
+This project is licensed under the WTFPLv2 https://en.wikipedia.org/wiki/WTFPL

src/arraybufferdatastream.js

@@ -0,0 +1,205 @@
+/**
+ * A tool for presenting an ArrayBuffer as a stream for writing some simple data types.
+ * 
+ * By Nicholas Sherlock
+ * 
+ * Released under the WTFPLv2 https://en.wikipedia.org/wiki/WTFPL
+ */
+
+"use strict";
+
+var ArrayBufferDataStream;
+
+(function(){
+    /*
+     * Create an ArrayBuffer of the given length and present it as a writable stream with methods
+     * for writing data in different formats.
+     */
+    ArrayBufferDataStream = function(length) {
+        this.data = new Uint8Array(length);
+        this.pos = 0;
+    };
+
+    ArrayBufferDataStream.prototype.seek = function(offset) {
+        this.pos = offset;
+    };
+
+    ArrayBufferDataStream.prototype.writeBytes = function(arr) {
+        for (var i = 0; i < arr.length; i++) {
+            this.data[this.pos++] = arr[i];
+        }
+    };
+
+    ArrayBufferDataStream.prototype.writeByte = function(b) {
+        this.data[this.pos++] = b;
+    };
+
+    //Synonym:
+    ArrayBufferDataStream.prototype.writeU8 = ArrayBufferDataStream.prototype.writeByte;
+
+    ArrayBufferDataStream.prototype.writeU16BE = function(u) {
+        this.data[this.pos++] = u >> 8;
+        this.data[this.pos++] = u;
+    };
+
+    ArrayBufferDataStream.prototype.writeDoubleBE = function(d) {
+        var 
+            bytes = new Uint8Array(new Float64Array([d]).buffer);
+
+        for (var i = bytes.length - 1; i >= 0; i--) {
+            this.writeByte(bytes[i]);
+        }
+    };
+
+    ArrayBufferDataStream.prototype.writeFloatBE = function(d) {
+        var 
+            bytes = new Uint8Array(new Float32Array([d]).buffer);
+
+        for (var i = bytes.length - 1; i >= 0; i--) {
+            this.writeByte(bytes[i]);
+        }
+    };
+
+    /**
+     * Write an ASCII string to the stream
+     */
+    ArrayBufferDataStream.prototype.writeString = function(s) {
+        for (var i = 0; i < s.length; i++) {
+            this.data[this.pos++] = s.charCodeAt(i);
+        }
+    };
+
+    /**
+     * Write the given 32-bit integer to the stream as an EBML variable-length integer using the given byte width 
+     * (use measureEBMLVarInt).
+     * 
+     * No error checking is performed to ensure that the supplied width is correct for the integer.
+     * 
+     * @param i Integer to be written
+     * @param width Number of bytes to write to the stream
+     */
+    ArrayBufferDataStream.prototype.writeEBMLVarIntWidth = function(i, width) {
+        switch (width) {
+            case 1:
+                this.writeU8((1 << 7) | i);
+            break;
+            case 2:
+                this.writeU8((1 << 6) | (i >> 8));
+                this.writeU8(i);
+            break;
+            case 3:
+                this.writeU8((1 << 5) | (i >> 16));
+                this.writeU8(i >> 8);
+                this.writeU8(i);
+            break;
+            case 4:
+                this.writeU8((1 << 4) | (i >> 24));
+                this.writeU8(i >> 16);
+                this.writeU8(i >> 8);
+                this.writeU8(i);
+            break;
+            case 5:
+                /* 
+                 * JavaScript converts its doubles to 32-bit integers for bitwise operations, so we need to do a 
+                 * division by 2^32 instead of a right-shift of 32 to retain those top 3 bits
+                 */
+                this.writeU8((1 << 3) | ((i / 4294967296) & 0x7)); 
+                this.writeU8(i >> 24);
+                this.writeU8(i >> 16);
+                this.writeU8(i >> 8);
+                this.writeU8(i);
+            break;
+            default:
+                throw new RuntimeException("Bad EBML VINT size " + width);
+        }
+    };
+
+    /**
+     * Return the number of bytes needed to encode the given integer as an EBML VINT.
+     */
+    ArrayBufferDataStream.prototype.measureEBMLVarInt = function(val) {
+        if (val < (1 << 7) - 1) { 
+            /* Top bit is set, leaving 7 bits to hold the integer, but we can't store 127 because
+             * "all bits set to one" is a reserved value. Same thing for the other cases below:
+             */
+            return 1;
+        } else if (val < (1 << 14) - 1) {
+            return 2;
+        } else if (val < (1 << 21) - 1) {
+            return 3;
+        } else if (val < (1 << 28) - 1) {
+            return 4;
+        } else if (val < 34359738367) { // 2 ^ 35 - 1 (can address 32GB)
+            return 5;
+        } else {
+            throw new RuntimeException("EBML VINT size not supported " + val);
+        }
+    };
+
+    ArrayBufferDataStream.prototype.writeEBMLVarInt = function(i) {
+        this.writeEBMLVarIntWidth(i, this.measureEBMLVarInt(i));
+    };
+
+    /**
+     * Write the given unsigned 32-bit integer to the stream in big-endian order using the given byte width.
+     * No error checking is performed to ensure that the supplied width is correct for the integer.
+     * 
+     * Omit the width parameter to have it determined automatically for you.
+     * 
+     * @param u Unsigned integer to be written
+     * @param width Number of bytes to write to the stream
+     */
+    ArrayBufferDataStream.prototype.writeUnsignedIntBE = function(u, width) {
+        if (width === undefined) {
+            width = this.measureUnsignedInt(u);
+        }
+
+        // Each case falls through:
+        switch (width) {
+            case 5:
+                this.writeU8(Math.floor(u / 4294967296)); // Need to use division to access >32 bits of floating point var
+            case 4:
+                this.writeU8(u >> 24);
+            case 3:
+                this.writeU8(u >> 16);
+            case 2:
+                this.writeU8(u >> 8);
+            case 1:
+                this.writeU8(u);
+            break;
+            default:
+                throw new RuntimeException("Bad UINT size " + width);
+        }
+    };
+
+    /**
+     * Return the number of bytes needed to hold the non-zero bits of the given unsigned integer.
+     */
+    ArrayBufferDataStream.prototype.measureUnsignedInt = function(val) {
+        // Force to 32-bit unsigned integer
+        if (val < (1 << 8)) {
+            return 1;
+        } else if (val < (1 << 16)) {
+            return 2;
+        } else if (val < (1 << 24)) {
+            return 3;
+        } else if (val < 4294967296) {
+            return 4;
+        } else {
+            return 5;
+        }
+    };
+
+    /**
+     * Return a view on the portion of the buffer from the beginning to the current seek position as a Uint8Array.
+     */
+    ArrayBufferDataStream.prototype.getAsDataArray = function() {
+        if (this.pos < this.data.byteLength) {
+            return this.data.subarray(0, this.pos);
+        } else if (this.pos == this.data.byteLength) {
+            return this.data;
+        } else {
+            throw "ArrayBufferDataStream's pos lies beyond end of buffer";
+        }
+    };
+}());