-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial 0.1.0 version supports >4GB video with cues
- Loading branch information
0 parents
commit 933b1d2
Showing
15 changed files
with
1,767 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 <video> 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"; | ||
} | ||
}; | ||
}()); |
Oops, something went wrong.