From 163be8da73a27d649e82329354eecaa51d1bc9d6 Mon Sep 17 00:00:00 2001 From: guest271314 Date: Sun, 1 Aug 2021 12:45:58 -0700 Subject: [PATCH 1/4] Substitute WritableStreamDefaultWriter from FileSystemWritableFileStream for deprecated FileWriter --- src/BlobBuffer.js | 32 ++++++++++++++++++++++---------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/src/BlobBuffer.js b/src/BlobBuffer.js index f92ec90..f1d9964 100644 --- a/src/BlobBuffer.js +++ b/src/BlobBuffer.js @@ -4,8 +4,9 @@ * Allows a series of Blob-convertible objects (ArrayBuffer, Blob, String, etc) to be added to a buffer. Seeking and * overwriting of blobs is allowed. * - * You can supply a FileWriter, in which case the BlobBuffer is just used as temporary storage before it writes it - * through to the disk. + * You can supply a WritableStreamDefaultWriter from FileSystemWritableFileStream + * (https://wicg.github.io/file-system-access/#api-filesystemwritablefilestream) + * in which case the BlobBuffer is just used as temporary storage before it writes it through to the disk. * * By Nicholas Sherlock * @@ -20,7 +21,9 @@ fileWriter = null, fd = null; - if (destination && destination.constructor.name === "FileWriter") { + if (destination && + typeof FileSystemFileHandle !== 'undefined' && + destination instanceof WritableStreamDefaultWriter) { fileWriter = destination; } else if (fs && destination) { fd = destination; @@ -140,11 +143,20 @@ }); }); } else if (fileWriter) { - return new Promise(function (resolve, reject) { - fileWriter.onwriteend = resolve; - - fileWriter.seek(newEntry.offset); - fileWriter.write(new Blob([newEntry.data])); + return new Promise(async function (resolve, reject) { + try { + if (newEntry.offset === 0) { + await fileWriter.ready; + } + await fileWriter.write({ + type: 'write', + position: newEntry.offset, + data: new Blob([newEntry.data]), + }); + resolve(); + } catch (err) { + reject(err); + } }); } else if (!isAppend) { // We might be modifying a write that was already buffered in memory. @@ -190,10 +202,10 @@ /** * Finish all writes to the buffer, returning a promise that signals when that is complete. * - * If a FileWriter was not provided, the promise is resolved with a Blob that represents the completed BlobBuffer + * If a WritableStreamDefaultWriter was not provided, the promise is resolved with a Blob that represents the completed BlobBuffer * contents. You can optionally pass in a mimeType to be used for this blob. * - * If a FileWriter was provided, the promise is resolved with null as the first argument. + * If a WritableStreamDefaultWriter was provided, the promise is resolved with null as the first argument. */ this.complete = function (mimeType) { if (fd || fileWriter) { From 288df538c1155fedfe4509a88fd3c85554c74509 Mon Sep 17 00:00:00 2001 From: guest271314 Date: Sun, 1 Aug 2021 13:07:16 -0700 Subject: [PATCH 2/4] Update Readme.md --- Readme.md | 48 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/Readme.md b/Readme.md index 638d5cd..810ede8 100644 --- a/Readme.md +++ b/Readme.md @@ -3,18 +3,17 @@ 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 when -running in a privileged context like a Chrome extension or Electron app, it can stream chunks immediately to a file on disk -using [Chrome's 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 +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 [`WritableStreamDefaultWriter`][] of [File System Access][] [`FileSystemWritableFileStream`][] 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 +When a `WritableStreamDefaultWriter` 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 some browsers size limits on Blobs, particularly mobile browsers, check out the [Blob size limits][]. -[Chrome's FileWriter]: https://developer.chrome.com/apps/fileSystem +[`WritableStreamDefaultWriter`]: https://streams.spec.whatwg.org/#writablestreamdefaultwriter +[`FileSystemWritableFileStream`]: https://wicg.github.io/file-system-access/#api-filesystemwritablefilestream +[File System Access]: https://wicg.github.io/file-system-access/ [Whammy]: https://github.com/antimatter15/whammy [Blob size limits]: https://github.com/eligrey/FileSaver.js/ @@ -92,6 +91,43 @@ videoWriter.complete().then(function(webMBlob) { The video encoder can use Node.js file APIs to write the video to disk when running under Electron. There is an example in `test/electron`. Run `npm install` in that directory to fetch required libraries, then `npm start` to launch Electron. +## Usage (File System Access) + +```js +document.querySelector('p').onclick = async () => { + const fileHandle = await showSaveFilePicker({ + suggestedName: 'webm-writer-filesystem-access.webm', + startIn: 'videos', + id: 'webm-writer', + types: [ + { + description: 'WebM files', + accept: { + 'video/webm': ['.webm'], + }, + }, + ], + excludeAcceptAllOption: true, + }); + const writable = await fileHandle.createWritable(); + const fileWriter = await writable.getWriter(); + const videoWriter = new WebMWriter({ + quality: 0.95, // WebM image quality from 0.0 (worst) to 1.0 (best) + fileWriter, // WritableStreamDefaultWriter in order to stream to a file instead of buffering to memory (optional) + fd: null, // Node.js file handle to write to instead of buffering to memory (optional) + // You must supply one of: + frameDuration: null, // Duration of frames in milliseconds + frameRate: 30, // Number of frames per second + }); + // ... + videoWriter.addFrame(frame[i], frameDuration); + // ... + await videoWriter.complete(); + await fileWriter.close(); + await fileWriter.closed; +}; +``` + ## Transparent WebM support Transparent WebM files are supported, check out the example in test/transparent. However, because I'm re-using Chrome's From 47308c53d0d7ddb265650c4d0f501aa978130b4c Mon Sep 17 00:00:00 2001 From: guest271314 Date: Sun, 1 Aug 2021 13:10:05 -0700 Subject: [PATCH 3/4] File System Access API test --- test/file-system-access/index.html | 170 +++++++++++++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 test/file-system-access/index.html diff --git a/test/file-system-access/index.html b/test/file-system-access/index.html new file mode 100644 index 0000000..cd38013 --- /dev/null +++ b/test/file-system-access/index.html @@ -0,0 +1,170 @@ + + + + + + + +

Stream

+ + + + + From 977cf3609fd1565031f41f49f69791b5f7a7ac11 Mon Sep 17 00:00:00 2001 From: guest271314 Date: Sun, 1 Aug 2021 13:14:20 -0700 Subject: [PATCH 4/4] Create webm-writer.js --- test/file-system-access/webm-writer.js | 1144 ++++++++++++++++++++++++ 1 file changed, 1144 insertions(+) create mode 100644 test/file-system-access/webm-writer.js diff --git a/test/file-system-access/webm-writer.js b/test/file-system-access/webm-writer.js new file mode 100644 index 0000000..5a31a35 --- /dev/null +++ b/test/file-system-access/webm-writer.js @@ -0,0 +1,1144 @@ +/** + * 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'; + +(function () { + /* + * Create an ArrayBuffer of the given length and present it as a writable stream with methods + * for writing data in different formats. + */ + var 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"; + } + }; + + if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { + module.exports = ArrayBufferDataStream; + } else { + window.ArrayBufferDataStream = ArrayBufferDataStream; + } +})(); +('use strict'); + +/** + * Allows a series of Blob-convertible objects (ArrayBuffer, Blob, String, etc) to be added to a buffer. Seeking and + * overwriting of blobs is allowed. + * + * You can supply a FileSystemWritableFileStream WritableStreamDefaultWriter, in which case the BlobBuffer is just used as temporary storage before it writes it + * through to the disk. + * + * By Nicholas Sherlock + * + * Released under the WTFPLv2 https://en.wikipedia.org/wiki/WTFPL + */ +(function () { + var BlobBuffer = function (fs) { + return function (destination) { + var buffer = [], + writePromise = Promise.resolve(), + fileWriter = null, + fd = null; + + if (destination && + typeof FileSystemFileHandle !== 'undefined' && + destination instanceof WritableStreamDefaultWriter + ) { + fileWriter = destination; + } else if (fs && destination) { + fd = destination; + } + + // Current seek offset + this.pos = 0; + + // One more than the index of the highest byte ever written + this.length = 0; + + // Returns a promise that converts the blob to an ArrayBuffer + function readBlobAsBuffer(blob) { + return new Promise(function (resolve, reject) { + var reader = new FileReader(); + + reader.addEventListener('loadend', function () { + resolve(reader.result); + }); + + reader.readAsArrayBuffer(blob); + }); + } + + function convertToUint8Array(thing) { + return new Promise(function (resolve, reject) { + if (thing instanceof Uint8Array) { + resolve(thing); + } else if ( + thing instanceof ArrayBuffer || + ArrayBuffer.isView(thing) + ) { + resolve(new Uint8Array(thing)); + } else if (thing instanceof Blob) { + resolve( + readBlobAsBuffer(thing).then(function (buffer) { + return new Uint8Array(buffer); + }) + ); + } else { + //Assume that Blob will know how to read this thing + resolve( + readBlobAsBuffer(new Blob([thing])).then(function (buffer) { + return new Uint8Array(buffer); + }) + ); + } + }); + } + + function measureData(data) { + var result = data.byteLength || data.length || data.size; + + if (!Number.isInteger(result)) { + throw 'Failed to determine size of element'; + } + + return result; + } + + /** + * Seek to the given absolute offset. + * + * You may not seek beyond the end of the file (this would create a hole and/or allow blocks to be written in non- + * sequential order, which isn't currently supported by the memory buffer backend). + */ + this.seek = function (offset) { + if (offset < 0) { + throw 'Offset may not be negative'; + } + + if (isNaN(offset)) { + throw 'Offset may not be NaN'; + } + + if (offset > this.length) { + throw 'Seeking beyond the end of file is not allowed'; + } + + this.pos = offset; + }; + + /** + * Write the Blob-convertible data to the buffer at the current seek position. + * + * Note: If overwriting existing data, the write must not cross preexisting block boundaries (written data must + * be fully contained by the extent of a previous write). + */ + this.write = function (data) { + var newEntry = { + offset: this.pos, + data: data, + length: measureData(data), + }, + isAppend = newEntry.offset >= this.length; + + this.pos += newEntry.length; + this.length = Math.max(this.length, this.pos); + + // After previous writes complete, perform our write + writePromise = writePromise.then(function () { + if (fd) { + return new Promise(function (resolve, reject) { + convertToUint8Array(newEntry.data).then(function (dataArray) { + var totalWritten = 0, + buffer = Buffer.from(dataArray.buffer), + handleWriteComplete = function (err, written, buffer) { + totalWritten += written; + + if (totalWritten >= buffer.length) { + resolve(); + } else { + // We still have more to write... + fs.write( + fd, + buffer, + totalWritten, + buffer.length - totalWritten, + newEntry.offset + totalWritten, + handleWriteComplete + ); + } + }; + + fs.write( + fd, + buffer, + 0, + buffer.length, + newEntry.offset, + handleWriteComplete + ); + }); + }); + } else if (fileWriter) { + return new Promise(async function (resolve, reject) { + // fileWriter.onwriteend = resolve; + if (newEntry.offset === 0) { + await fileWriter.ready; + } + console.log(newEntry.offset); + // await fileWriter.seek(newEntry.offset) + await fileWriter.write({ + type: 'write', + position: newEntry.offset, + data: new Blob([newEntry.data]), + }); + resolve(); + }); + } else if (!isAppend) { + // We might be modifying a write that was already buffered in memory. + + // Slow linear search to find a block we might be overwriting + for (var i = 0; i < buffer.length; i++) { + var entry = buffer[i]; + + // If our new entry overlaps the old one in any way... + if ( + !( + newEntry.offset + newEntry.length <= entry.offset || + newEntry.offset >= entry.offset + entry.length + ) + ) { + if ( + newEntry.offset < entry.offset || + newEntry.offset + newEntry.length > + entry.offset + entry.length + ) { + throw new Error('Overwrite crosses blob boundaries'); + } + + if ( + newEntry.offset == entry.offset && + newEntry.length == entry.length + ) { + // We overwrote the entire block + entry.data = newEntry.data; + + // We're done + return; + } else { + return convertToUint8Array(entry.data) + .then(function (entryArray) { + entry.data = entryArray; + + return convertToUint8Array(newEntry.data); + }) + .then(function (newEntryArray) { + newEntry.data = newEntryArray; + + entry.data.set( + newEntry.data, + newEntry.offset - entry.offset + ); + }); + } + } + } + // Else fall through to do a simple append, as we didn't overwrite any pre-existing blocks + } + + buffer.push(newEntry); + }); + }; + + /** + * Finish all writes to the buffer, returning a promise that signals when that is complete. + * + * If a FileSystemWritableFileStream WritableStreamDefaultWriter was not provided, the promise is resolved with a Blob that represents the completed BlobBuffer + * contents. You can optionally pass in a mimeType to be used for this blob. + * + * If a FileSystemWritableFileStream WritableStreamDefaultWriter was provided, the promise is resolved with null as the first argument. + */ + this.complete = function (mimeType) { + if (fd || fileWriter) { + writePromise = writePromise.then(function () { + return null; + }); + } else { + // After writes complete we need to merge the buffer to give to the caller + writePromise = writePromise.then(function () { + var result = []; + + for (var i = 0; i < buffer.length; i++) { + result.push(buffer[i].data); + } + + return new Blob(result, { + type: mimeType, + }); + }); + } + + return writePromise; + }; + }; + }; + + if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { + module.exports = BlobBuffer(require('fs')); + } else { + window.BlobBuffer = BlobBuffer(null); + } +})(); +/** + * WebM video encoder for Google Chrome. This implementation is suitable for creating very large video files, because + * it can stream Blobs directly to a FileSystemWritableFileStream WritableStreamDefaultWriter without buffering the entire video in memory. + * + * When FileSystemWritableFileStream WritableStreamDefaultWriter is not available or not desired, it can buffer the video in memory as a series of Blobs which are + * eventually returned as one composite Blob. + * + * By Nicholas Sherlock. + * + * Based on the ideas from Whammy: https://github.com/antimatter15/whammy + * + * Released under the WTFPLv2 https://en.wikipedia.org/wiki/WTFPL + */ + +('use strict'); + +(function () { + var WebMWriter = function (ArrayBufferDataStream, BlobBuffer) { + function extend(base, top) { + var target = {}; + + [base, top].forEach(function (obj) { + for (var prop in obj) { + if (Object.prototype.hasOwnProperty.call(obj, prop)) { + target[prop] = obj[prop]; + } + } + }); + + return target; + } + + /** + * Decode a Base64 data URL into a binary string. + * + * Returns the binary string, or false if the URL could not be decoded. + */ + function decodeBase64WebPDataURL(url) { + if (typeof url !== 'string' || !url.match(/^data:image\/webp;base64,/i)) { + return false; + } + + return window.atob(url.substring('data:image/webp;base64,'.length)); + } + + /** + * Convert a raw binary string (one character = one output byte) to an ArrayBuffer + */ + function stringToArrayBuffer(string) { + var buffer = new ArrayBuffer(string.length), + int8Array = new Uint8Array(buffer); + + for (var i = 0; i < string.length; i++) { + int8Array[i] = string.charCodeAt(i); + } + + return buffer; + } + + /** + * Convert the given canvas to a WebP encoded image and return the image data as a string. + */ + function renderAsWebP(canvas, quality) { + var frame = + typeof canvas === 'string' && /^data:image\/webp/.test(canvas) + ? canvas + : canvas.toDataURL('image/webp', quality); + + return decodeBase64WebPDataURL(frame); + } + + function extractKeyframeFromWebP(webP) { + // Assume that Chrome will generate a Simple Lossy WebP which has this header: + var keyframeStartIndex = webP.indexOf('VP8 '); + + if (keyframeStartIndex == -1) { + throw 'Failed to identify beginning of keyframe in WebP image'; + } + + // Skip the header and the 4 bytes that encode the length of the VP8 chunk + keyframeStartIndex += 'VP8 '.length + 4; + + return webP.substring(keyframeStartIndex); + } + + // Just a little utility so we can tag values as floats for the EBML encoder's benefit + function EBMLFloat32(value) { + this.value = value; + } + + function EBMLFloat64(value) { + this.value = value; + } + + /** + * Write the given EBML object to the provided ArrayBufferStream. + * + * The buffer's first byte is at bufferFileOffset inside the video file. This is used to complete offset and + * dataOffset fields in each EBML structure, indicating the file offset of the first byte of the EBML element and + * its data payload. + */ + function writeEBML(buffer, bufferFileOffset, ebml) { + // Is the ebml an array of sibling elements? + if (Array.isArray(ebml)) { + for (var i = 0; i < ebml.length; i++) { + writeEBML(buffer, bufferFileOffset, ebml[i]); + } + // Is this some sort of raw data that we want to write directly? + } else if (typeof ebml === 'string') { + buffer.writeString(ebml); + } else if (ebml instanceof Uint8Array) { + buffer.writeBytes(ebml); + } else if (ebml.id) { + // We're writing an EBML element + ebml.offset = buffer.pos + bufferFileOffset; + + buffer.writeUnsignedIntBE(ebml.id); // ID field + + // Now we need to write the size field, so we must know the payload size: + + if (Array.isArray(ebml.data)) { + // Writing an array of child elements. We won't try to measure the size of the children up-front + + var sizePos, dataBegin, dataEnd; + + if (ebml.size === -1) { + // Write the reserved all-one-bits marker to note that the size of this element is unknown/unbounded + buffer.writeByte(0xff); + } else { + sizePos = buffer.pos; + + /* Write a dummy size field to overwrite later. 4 bytes allows an element maximum size of 256MB, + * which should be plenty (we don't want to have to buffer that much data in memory at one time + * anyway!) + */ + buffer.writeBytes([0, 0, 0, 0]); + } + + dataBegin = buffer.pos; + + ebml.dataOffset = dataBegin + bufferFileOffset; + writeEBML(buffer, bufferFileOffset, ebml.data); + + if (ebml.size !== -1) { + dataEnd = buffer.pos; + + ebml.size = dataEnd - dataBegin; + + buffer.seek(sizePos); + buffer.writeEBMLVarIntWidth(ebml.size, 4); // Size field + + buffer.seek(dataEnd); + } + } else if (typeof ebml.data === 'string') { + buffer.writeEBMLVarInt(ebml.data.length); // Size field + ebml.dataOffset = buffer.pos + bufferFileOffset; + buffer.writeString(ebml.data); + } else if (typeof ebml.data === 'number') { + // Allow the caller to explicitly choose the size if they wish by supplying a size field + if (!ebml.size) { + ebml.size = buffer.measureUnsignedInt(ebml.data); + } + + buffer.writeEBMLVarInt(ebml.size); // Size field + ebml.dataOffset = buffer.pos + bufferFileOffset; + buffer.writeUnsignedIntBE(ebml.data, ebml.size); + } else if (ebml.data instanceof EBMLFloat64) { + buffer.writeEBMLVarInt(8); // Size field + ebml.dataOffset = buffer.pos + bufferFileOffset; + buffer.writeDoubleBE(ebml.data.value); + } else if (ebml.data instanceof EBMLFloat32) { + buffer.writeEBMLVarInt(4); // Size field + ebml.dataOffset = buffer.pos + bufferFileOffset; + buffer.writeFloatBE(ebml.data.value); + } else if (ebml.data instanceof Uint8Array) { + buffer.writeEBMLVarInt(ebml.data.byteLength); // Size field + ebml.dataOffset = buffer.pos + bufferFileOffset; + buffer.writeBytes(ebml.data); + } else { + throw 'Bad EBML datatype ' + typeof ebml.data; + } + } else { + throw 'Bad EBML datatype ' + typeof ebml.data; + } + } + + return function (options) { + var MAX_CLUSTER_DURATION_MSEC = 5000, + DEFAULT_TRACK_NUMBER = 1, + writtenHeader = false, + videoWidth, + videoHeight, + clusterFrameBuffer = [], + clusterStartTime = 0, + clusterDuration = 0, + optionDefaults = { + quality: 0.95, // WebM image quality from 0.0 (worst) to 1.0 (best) + fileWriter: null, // FileSystemWritableFileStream WritableStreamDefaultWriter in order to stream to a file instead of buffering to memory (optional) + fd: null, // Node.JS file descriptor to write to instead of buffering (optional) + + // You must supply one of: + frameDuration: null, // Duration of frames in milliseconds + frameRate: null, // Number of frames per second + + // Set to true for variable resolution and variable frame duration encoding + variableResolution: null, + }, + seekPoints = { + Cues: { + id: new Uint8Array([0x1c, 0x53, 0xbb, 0x6b]), + positionEBML: null, + }, + SegmentInfo: { + id: new Uint8Array([0x15, 0x49, 0xa9, 0x66]), + positionEBML: null, + }, + Tracks: { + id: new Uint8Array([0x16, 0x54, 0xae, 0x6b]), + positionEBML: null, + }, + }, + ebmlSegment, + segmentDuration = { + id: 0x4489, // Duration + data: new EBMLFloat64(0), + }, + seekHead, + cues = [], + blobBuffer = new BlobBuffer(options.fileWriter || options.fd); + + function fileOffsetToSegmentRelative(fileOffset) { + return fileOffset - ebmlSegment.dataOffset; + } + + /** + * Create a SeekHead element with descriptors for the points in the global seekPoints array. + * + * 5 bytes of position values are reserved for each node, which lie at the offset point.positionEBML.dataOffset, + * to be overwritten later. + */ + function createSeekHead() { + var seekPositionEBMLTemplate = { + id: 0x53ac, // SeekPosition + size: 5, // Allows for 32GB video files + data: 0, // We'll overwrite this when the file is complete + }, + result = { + id: 0x114d9b74, // SeekHead + data: [], + }; + + for (var name in seekPoints) { + var seekPoint = seekPoints[name]; + + seekPoint.positionEBML = Object.create(seekPositionEBMLTemplate); + + result.data.push({ + id: 0x4dbb, // Seek + data: [ + { + id: 0x53ab, // SeekID + data: seekPoint.id, + }, + seekPoint.positionEBML, + ], + }); + } + + return result; + } + + /** + * Write the WebM file header to the stream. + */ + function writeHeader() { + seekHead = createSeekHead(); + + var ebmlHeader = { + id: 0x1a45dfa3, // EBML + data: [ + { + id: 0x4286, // EBMLVersion + data: 1, + }, + { + id: 0x42f7, // EBMLReadVersion + data: 1, + }, + { + id: 0x42f2, // EBMLMaxIDLength + data: 4, + }, + { + id: 0x42f3, // EBMLMaxSizeLength + data: 8, + }, + { + id: 0x4282, // DocType + data: 'webm', + }, + { + id: 0x4287, // DocTypeVersion + data: 2, + }, + { + id: 0x4285, // DocTypeReadVersion + data: 2, + }, + ], + }, + segmentInfo = { + id: 0x1549a966, // Info + data: [ + { + id: 0x2ad7b1, // TimecodeScale + data: 1e6, // Times will be in miliseconds (1e6 nanoseconds per step = 1ms) + }, + { + id: 0x4d80, // MuxingApp + data: 'webm-writer-js', + }, + { + id: 0x5741, // WritingApp + data: 'webm-writer-js', + }, + segmentDuration, // To be filled in later + ], + }, + tracks = { + id: 0x1654ae6b, // Tracks + data: [ + { + id: 0xae, // TrackEntry + data: [ + { + id: 0xd7, // TrackNumber + data: DEFAULT_TRACK_NUMBER, + }, + { + id: 0x73c5, // TrackUID + data: DEFAULT_TRACK_NUMBER, + }, + { + id: 0x9c, // FlagLacing + data: 0, + }, + { + id: 0x22b59c, // Language + data: 'und', + }, + { + id: 0x86, // CodecID + data: 'V_VP8', + }, + { + id: 0x258688, // CodecName + data: 'VP8', + }, + { + id: 0x83, // TrackType + data: 1, + }, + { + id: 0xe0, // Video + data: [ + { + id: 0xb0, // PixelWidth + data: videoWidth, + }, + { + id: 0xba, // PixelHeight + data: videoHeight, + }, + ], + }, + ], + }, + ], + }; + + ebmlSegment = { + id: 0x18538067, // Segment + size: -1, // Unbounded size + data: [seekHead, segmentInfo, tracks], + }; + + var bufferStream = new ArrayBufferDataStream(256); + + writeEBML(bufferStream, blobBuffer.pos, [ebmlHeader, ebmlSegment]); + blobBuffer.write(bufferStream.getAsDataArray()); + + // Now we know where these top-level elements lie in the file: + seekPoints.SegmentInfo.positionEBML.data = fileOffsetToSegmentRelative( + segmentInfo.offset + ); + seekPoints.Tracks.positionEBML.data = fileOffsetToSegmentRelative( + tracks.offset + ); + } + + /** + * Create a SimpleBlock keyframe header using these fields: + * timecode - Time of this keyframe + * trackNumber - Track number from 1 to 126 (inclusive) + * frame - Raw frame data payload string + * + * Returns an EBML element. + */ + function createKeyframeBlock(keyframe) { + var bufferStream = new ArrayBufferDataStream(1 + 2 + 1); + + if (!(keyframe.trackNumber > 0 && keyframe.trackNumber < 127)) { + throw 'TrackNumber must be > 0 and < 127'; + } + + bufferStream.writeEBMLVarInt(keyframe.trackNumber); // Always 1 byte since we limit the range of trackNumber + bufferStream.writeU16BE(keyframe.timecode); + + // Flags byte + bufferStream.writeByte( + 1 << 7 // Keyframe + ); + + return { + id: 0xa3, // SimpleBlock + data: [bufferStream.getAsDataArray(), keyframe.frame], + }; + } + + /** + * Create a Cluster node using these fields: + * + * timecode - Start time for the cluster + * + * Returns an EBML element. + */ + function createCluster(cluster) { + return { + id: 0x1f43b675, + data: [ + { + id: 0xe7, // Timecode + data: Math.round(cluster.timecode), + }, + ], + }; + } + + function addCuePoint(trackIndex, clusterTime, clusterFileOffset) { + cues.push({ + id: 0xbb, // Cue + data: [ + { + id: 0xb3, // CueTime + data: clusterTime, + }, + { + id: 0xb7, // CueTrackPositions + data: [ + { + id: 0xf7, // CueTrack + data: trackIndex, + }, + { + id: 0xf1, // CueClusterPosition + data: fileOffsetToSegmentRelative(clusterFileOffset), + }, + ], + }, + ], + }); + } + + /** + * Write a Cues element to the blobStream using the global `cues` array of CuePoints (use addCuePoint()). + * The seek entry for the Cues in the SeekHead is updated. + */ + function writeCues() { + var ebml = { + id: 0x1c53bb6b, + data: cues, + }, + cuesBuffer = new ArrayBufferDataStream(16 + cues.length * 32); // Pretty crude estimate of the buffer size we'll need + + writeEBML(cuesBuffer, blobBuffer.pos, ebml); + blobBuffer.write(cuesBuffer.getAsDataArray()); + + // Now we know where the Cues element has ended up, we can update the SeekHead + seekPoints.Cues.positionEBML.data = fileOffsetToSegmentRelative( + ebml.offset + ); + } + + /** + * Flush the frames in the current clusterFrameBuffer out to the stream as a Cluster. + */ + function flushClusterFrameBuffer() { + if (clusterFrameBuffer.length == 0) { + return; + } + + // First work out how large of a buffer we need to hold the cluster data + var rawImageSize = 0; + + for (var i = 0; i < clusterFrameBuffer.length; i++) { + rawImageSize += clusterFrameBuffer[i].frame.length; + } + + var buffer = new ArrayBufferDataStream( + rawImageSize + clusterFrameBuffer.length * 32 + ), // Estimate 32 bytes per SimpleBlock header + cluster = createCluster({ + timecode: Math.round(clusterStartTime), + }); + + for (var i = 0; i < clusterFrameBuffer.length; i++) { + cluster.data.push(createKeyframeBlock(clusterFrameBuffer[i])); + } + + writeEBML(buffer, blobBuffer.pos, cluster); + blobBuffer.write(buffer.getAsDataArray()); + + addCuePoint( + DEFAULT_TRACK_NUMBER, + Math.round(clusterStartTime), + cluster.offset + ); + + clusterFrameBuffer = []; + clusterStartTime += clusterDuration; + clusterDuration = 0; + } + + function validateOptions() { + // Derive frameDuration setting if not already supplied + if (!options.frameDuration) { + if (options.frameRate) { + options.frameDuration = 1000 / options.frameRate; + } else { + throw 'Missing required frameDuration or frameRate setting'; + } + } + } + + function addFrameToCluster(frame) { + frame.trackNumber = DEFAULT_TRACK_NUMBER; + + // Frame timecodes are relative to the start of their cluster: + frame.timecode = Math.round(clusterDuration); + + clusterFrameBuffer.push(frame); + + clusterDuration += frame.duration; + + if (clusterDuration >= MAX_CLUSTER_DURATION_MSEC) { + flushClusterFrameBuffer(); + } + } + + /** + * Rewrites the SeekHead element that was initially written to the stream with the offsets of top level elements. + * + * Call once writing is complete (so the offset of all top level elements is known). + */ + function rewriteSeekHead() { + var seekHeadBuffer = new ArrayBufferDataStream(seekHead.size), + oldPos = blobBuffer.pos; + + // Write the rewritten SeekHead element's data payload to the stream (don't need to update the id or size) + writeEBML(seekHeadBuffer, seekHead.dataOffset, seekHead.data); + + // And write that through to the file + blobBuffer.seek(seekHead.dataOffset); + blobBuffer.write(seekHeadBuffer.getAsDataArray()); + + blobBuffer.seek(oldPos); + } + + /** + * Rewrite the Duration field of the Segment with the newly-discovered video duration. + */ + function rewriteDuration() { + var buffer = new ArrayBufferDataStream(8), + oldPos = blobBuffer.pos; + + // Rewrite the data payload (don't need to update the id or size) + buffer.writeDoubleBE(clusterStartTime); + + // And write that through to the file + blobBuffer.seek(segmentDuration.dataOffset); + blobBuffer.write(buffer.getAsDataArray()); + + blobBuffer.seek(oldPos); + } + + /** + * Add a frame to the video. Currently the frame must be a Canvas element. + */ + this.addFrame = function (canvas, frameDuration, width, height) { + if (options.variableResolution) { + videoWidth = width; + videoHeight = height; + options.frameDuration = frameDuration; + if (!writtenHeader) { + writeHeader(); + writtenHeader = true; + } + } else { + if (writtenHeader) { + if (canvas.width != videoWidth || canvas.height != videoHeight) { + throw 'Frame size differs from previous frames'; + } + } else { + videoWidth = canvas.width; + videoHeight = canvas.height; + writeHeader(); + writtenHeader = true; + } + } + + var webP = renderAsWebP(canvas, options.quality); + + if (!webP) { + throw "Couldn't decode WebP frame, does the browser support WebP?"; + } + + addFrameToCluster({ + frame: extractKeyframeFromWebP(webP), + duration: options.frameDuration, + }); + }; + + /** + * Finish writing the video and return a Promise to signal completion. + * + * If the destination device was memory (i.e. options.fileWriter was not supplied), the Promise is resolved with + * a Blob with the contents of the entire video. + */ + this.complete = function () { + flushClusterFrameBuffer(); + + writeCues(); + rewriteSeekHead(); + rewriteDuration(); + + return blobBuffer.complete('video/webm'); + }; + + this.getWrittenSize = function () { + return blobBuffer.length; + }; + + options = extend(optionDefaults, options || {}); + validateOptions(); + }; + }; + + if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { + module.exports = WebMWriter( + require('./ArrayBufferDataStream'), + require('./BlobBuffer') + ); + } else { + window.WebMWriter = WebMWriter(ArrayBufferDataStream, BlobBuffer); + } +})();