/* https://github.com/antimatter15/whammy The MIT License (MIT) Copyright (c) 2015 Kevin Kwok 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: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ function atob (str) { return Buffer.from(str, 'base64').toString('binary'); } // in this case, frames has a very specific meaning, which will be // detailed once i finish writing the code function ToWebM (frames) { const info = checkFrames(frames); // max duration by cluster in milliseconds const CLUSTER_MAX_DURATION = 30000; const EBML = [ { id: 0x1a45dfa3, // EBML data: [ { data: 1, id: 0x4286 // EBMLVersion }, { data: 1, id: 0x42f7 // EBMLReadVersion }, { data: 4, id: 0x42f2 // EBMLMaxIDLength }, { data: 8, id: 0x42f3 // EBMLMaxSizeLength }, { data: 'webm', id: 0x4282 // DocType }, { data: 2, id: 0x4287 // DocTypeVersion }, { data: 2, id: 0x4285 // DocTypeReadVersion } ] }, { id: 0x18538067, // Segment data: [ { id: 0x1549a966, // Info data: [ { data: 1e6, // do things in millisecs (num of nanosecs for duration scale) id: 0x2ad7b1 // TimecodeScale }, { data: 'whammy', id: 0x4d80 // MuxingApp }, { data: 'whammy', id: 0x5741 // WritingApp }, { data: doubleToString(info.duration), id: 0x4489 // Duration } ] }, { id: 0x1654ae6b, // Tracks data: [ { id: 0xae, // TrackEntry data: [ { data: 1, id: 0xd7 // TrackNumber }, { data: 1, id: 0x73c5 // TrackUID }, { data: 0, id: 0x9c // FlagLacing }, { data: 'und', id: 0x22b59c // Language }, { data: 'V_VP8', id: 0x86 // CodecID }, { data: 'VP8', id: 0x258688 // CodecName }, { data: 1, id: 0x83 // TrackType }, { id: 0xe0, // Video data: [ { data: info.width, id: 0xb0 // PixelWidth }, { data: info.height, id: 0xba // PixelHeight } ] } ] } ] }, { id: 0x1c53bb6b, // Cues data: [ // cue insertion point ] } // cluster insertion point ] } ]; const segment = EBML[1]; const cues = segment.data[2]; // Generate clusters (max duration) let frameNumber = 0; let clusterTimecode = 0; while (frameNumber < frames.length) { const cuePoint = { id: 0xbb, // CuePoint data: [ { data: Math.round(clusterTimecode), id: 0xb3 // CueTime }, { id: 0xb7, // CueTrackPositions data: [ { data: 1, id: 0xf7 // CueTrack }, { data: 0, // to be filled in when we know it size: 8, id: 0xf1 // CueClusterPosition } ] } ] }; cues.data.push(cuePoint); const clusterFrames = []; let clusterDuration = 0; do { clusterFrames.push(frames[frameNumber]); clusterDuration += frames[frameNumber].duration; frameNumber++; } while (frameNumber < frames.length && clusterDuration < CLUSTER_MAX_DURATION); let clusterCounter = 0; const cluster = { id: 0x1f43b675, // Cluster data: [ { data: Math.round(clusterTimecode), id: 0xe7 // Timecode } ].concat(clusterFrames.map(function (webp) { const block = makeSimpleBlock({ discardable: 0, frame: webp.data.slice(4), invisible: 0, keyframe: 1, lacing: 0, trackNum: 1, timecode: Math.round(clusterCounter) }); clusterCounter += webp.duration; return { data: block, id: 0xa3 }; })) }; // Add cluster to segment segment.data.push(cluster); clusterTimecode += clusterDuration; } // First pass to compute cluster positions let position = 0; for (let i = 0; i < segment.data.length; i++) { if (i >= 3) { cues.data[i - 3].data[1].data[1].data = position; } const data = generateEBML([segment.data[i]]); position += data.size || data.byteLength || data.length; if (i !== 2) { // not cues // Save results to avoid having to encode everything twice segment.data[i] = data; } } return generateEBML(EBML); } // sums the lengths of all the frames and gets the duration, woo function checkFrames (frames) { const width = frames[0].width; const height = frames[0].height; let duration = frames[0].duration; for (let i = 1; i < frames.length; i++) { if (frames[i].width !== width) throw new Error('Frame ' + (i + 1) + ' has a different width'); if (frames[i].height !== height) throw new Error('Frame ' + (i + 1) + ' has a different height'); if (frames[i].duration < 0 || frames[i].duration > 0x7fff) throw new Error('Frame ' + (i + 1) + ' has a weird duration (must be between 0 and 32767)'); duration += frames[i].duration; } return { duration, width, height }; } function numToBuffer (num) { const parts = []; while (num > 0) { parts.push(num & 0xff); num = num >> 8; } return new Uint8Array(parts.reverse()); } function numToFixedBuffer (num, size) { const parts = new Uint8Array(size); for (let i = size - 1; i >= 0; i--) { parts[i] = num & 0xff; num = num >> 8; } return parts; } function strToBuffer (str) { // return new Blob([str]); const arr = new Uint8Array(str.length); for (let i = 0; i < str.length; i++) { arr[i] = str.charCodeAt(i); } return arr; // this is slower // return new Uint8Array(str.split('').map(function(e){ // return e.charCodeAt(0) // })) } // sorry this is ugly, and sort of hard to understand exactly why this was done // at all really, but the reason is that there's some code below that i dont really // feel like understanding, and this is easier than using my brain. function bitsToBuffer (bits) { const data = []; const pad = (bits.length % 8) ? (new Array(1 + 8 - (bits.length % 8))).join('0') : ''; bits = pad + bits; for (let i = 0; i < bits.length; i += 8) { data.push(parseInt(bits.substr(i, 8), 2)); } return new Uint8Array(data); } function generateEBML (json) { const ebml = []; for (const item of json) { if (!('id' in item)) { // already encoded blob or byteArray ebml.push(item); continue; } let data = item.data; if (typeof data === 'object') data = generateEBML(data); if (typeof data === 'number') data = ('size' in item) ? numToFixedBuffer(data, item.size) : bitsToBuffer(data.toString(2)); if (typeof data === 'string') data = strToBuffer(data); const len = data.size || data.byteLength || data.length; const zeroes = Math.ceil(Math.ceil(Math.log(len) / Math.log(2)) / 8); const sizeStr = len.toString(2); const padded = (new Array((zeroes * 7 + 7 + 1) - sizeStr.length)).join('0') + sizeStr; const size = (new Array(zeroes)).join('0') + '1' + padded; // i actually dont quite understand what went on up there, so I'm not really // going to fix this, i'm probably just going to write some hacky thing which // converts that string into a buffer-esque thing ebml.push(numToBuffer(item.id)); ebml.push(bitsToBuffer(size)); ebml.push(data); } // convert ebml to an array const buffer = toFlatArray(ebml); return new Uint8Array(buffer); } function toFlatArray (arr, outBuffer) { if (outBuffer == null) { outBuffer = []; } for (const item of arr) { if (typeof item === 'object') { // an array toFlatArray(item, outBuffer); } else { // a simple element outBuffer.push(item); } } return outBuffer; } function makeSimpleBlock (data) { let flags = 0; if (data.keyframe) flags |= 128; if (data.invisible) flags |= 8; if (data.lacing) flags |= (data.lacing << 1); if (data.discardable) flags |= 1; if (data.trackNum > 127) { throw new Error('TrackNumber > 127 not supported'); } const out = [data.trackNum | 0x80, data.timecode >> 8, data.timecode & 0xff, flags].map(function (e) { return String.fromCharCode(e); }).join('') + data.frame; return out; } // here's something else taken verbatim from weppy, awesome rite? function parseWebP (riff) { const VP8 = riff.RIFF[0].WEBP[0]; const frameStart = VP8.indexOf('\x9d\x01\x2a'); // A VP8 keyframe starts with the 0x9d012a header const c = []; for (let i = 0; i < 4; i++) c[i] = VP8.charCodeAt(frameStart + 3 + i); // the code below is literally copied verbatim from the bitstream spec let tmp = (c[1] << 8) | c[0]; const width = tmp & 0x3FFF; const horizontalScale = tmp >> 14; tmp = (c[3] << 8) | c[2]; const height = tmp & 0x3FFF; const verticalScale = tmp >> 14; return { width, height, horizontalScale, verticalScale, data: VP8, riff }; } // i think i'm going off on a riff by pretending this is some known // idiom which i'm making a casual and brilliant pun about, but since // i can't find anything on google which conforms to this idiomatic // usage, I'm assuming this is just a consequence of some psychotic // break which makes me make up puns. well, enough riff-raff (aha a // rescue of sorts), this function was ripped wholesale from weppy function parseRIFF (string) { let offset = 0; const chunks = {}; while (offset < string.length) { const id = string.substr(offset, 4); chunks[id] = chunks[id] || []; if (id === 'RIFF' || id === 'LIST') { const len = parseInt(string.substr(offset + 4, 4).split('').map(function (i) { const unpadded = i.charCodeAt(0).toString(2); return (new Array(8 - unpadded.length + 1)).join('0') + unpadded; }).join(''), 2); const data = string.substr(offset + 4 + 4, len); offset += 4 + 4 + len; chunks[id].push(parseRIFF(data)); } else if (id === 'WEBP') { // Use (offset + 8) to skip past "VP8 "/"VP8L"/"VP8X" field after "WEBP" chunks[id].push(string.substr(offset + 8)); offset = string.length; } else { // Unknown chunk type; push entire payload chunks[id].push(string.substr(offset + 4)); offset = string.length; } } return chunks; } // here's a little utility function that acts as a utility for other functions // basically, the only purpose is for encoding "Duration", which is encoded as // a double (considerably more difficult to encode than an integer) function doubleToString (num) { return Array.prototype.slice.call( new Uint8Array( ( new Float64Array([num]) // create a float64 array ).buffer) // extract the array buffer , 0) // convert the Uint8Array into a regular array .map(function (e) { // since it's a regular array, we can now use map return String.fromCharCode(e); // encode all the bytes individually }) .reverse() // correct the byte endianness (assume it's little endian for now) .join(''); // join the bytes in holy matrimony as a string } function WhammyVideo (speed, quality = 0.8) { // a more abstract-ish API this.frames = []; this.duration = 1000 / speed; this.quality = quality; } /** * * @param {string} frame * @param {number} [duration] */ WhammyVideo.prototype.add = function (frame, duration) { if (typeof duration !== 'undefined' && this.duration) throw new Error("you can't pass a duration if the fps is set"); if (typeof duration === 'undefined' && !this.duration) throw new Error("if you don't have the fps set, you need to have durations here."); if (frame.canvas) { // CanvasRenderingContext2D frame = frame.canvas; } if (frame.toDataURL) { // frame = frame.toDataURL('image/webp', this.quality); // quickly store image data so we don't block cpu. encode in compile method. frame = frame.getContext('2d').getImageData(0, 0, frame.width, frame.height); } else if (typeof frame !== 'string') { throw new TypeError('frame must be a a HTMLCanvasElement, a CanvasRenderingContext2D or a DataURI formatted string'); } if (typeof frame === 'string' && !(/^data:image\/webp;base64,/ig).test(frame)) { throw new Error('Input must be formatted properly as a base64 encoded DataURI of type image/webp'); } this.frames.push({ image: frame, duration: duration || this.duration }); }; WhammyVideo.prototype.compile = function (callback) { const webm = new ToWebM(this.frames.map(function (frame) { const webp = parseWebP(parseRIFF(atob(frame.image.slice(23)))); webp.duration = frame.duration; return webp; })); callback(webm); }; export const WebmGenerator = WhammyVideo;