async function encodeMP4(frameDataArray, computeFrame, opts) { opts = opts || {}; if (typeof opts.width === "undefined" || typeof opts.height === "undefined") { throw new Error('Missing required options `width` and `height`'); } const width = opts.width; const height = opts.height; let displayOutput = !!opts.displayOutput; let renderImmediately = !!opts.renderImmediately; let performEncoding = !(typeof opts.dryRun === "undefined" ? false : !!opts.dryRun); let enable = !(typeof opts.disabled === "undefined" ? false : !!opts.disabled); let encoder, outputFilename; let ctx, imageData; let videoBytes; let canvas = ''; let resolve, reject; if (displayOutput) { canvas = DOM.canvas(width, height); canvas.style.maxWidth = '100%'; ctx = canvas.getContext('2d'); imageData = new ImageData(width, height); } const progressBar = html`

`; const renderBtn = html``; const downloadBtn = html``; const reversedText = html`

`; const dryRunBox = html``; const view = html`

${canvas}

${reversedText} ${progressBar}

${renderBtn} ${downloadBtn} ${dryRunBox}Dry run

`; if (enable) { renderBtn.addEventListener('click', computeVideoData); renderBtn.removeAttribute('disabled'); } else { renderBtn.setAttribute('disabled', true); } downloadBtn.addEventListener('click', downloadVideoData); downloadBtn.setAttribute('disabled', true); dryRunBox.addEventListener('change', function() { performEncoding = !dryRunBox.checked; }); function downloadVideoData() { var blob = new Blob([videoBytes], { type: "video/mp4" }); var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = outputFilename; link.click(); } function updateProgressText(cur, total, str) { if (typeof cur === 'string') { str = cur; } else { if (total === undefined) { progressBar.style.width = '100%'; progressBar.style.background = `repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px)`; progressBar.style.backgroundPosition = `${-cur}px 0`; } else { progressBar.style.width = `${((cur / total) * 100).toFixed(1)}%`; } } progressBar.textContent = str; reversedText.textContent = str; } function halt() { breakOut = true; } let videoData = null; let breakOut = false; async function computeVideoData() { if (encoder) throw new Error('Encoding already in progress'); if (opts.enable === false) return; breakOut = false; view.value = videoData = null; view.dispatchEvent(new CustomEvent("input")); if (opts.beforeStart) { await opts.beforeStart(); } renderBtn.textContent = 'Stop'; renderBtn.removeEventListener('click', computeVideoData); renderBtn.addEventListener('click', halt); dryRunBox.setAttribute('disabled', true); if (performEncoding) { encoder = await H264MP4Encoder.createH264MP4Encoder(); Object.assign(encoder, opts); outputFilename = encoder.outputFilename; encoder.initialize(); } downloadBtn.setAttribute('disabled', true); updateProgressText(0, 1, ''); function finalize() { if (performEncoding && encoder) { encoder.finalize(); videoBytes = encoder.FS.readFile(encoder.outputFilename); resolve(videoBytes); view.value = videoBytes; view.dispatchEvent(new CustomEvent("input")); encoder.delete(); encoder = null; downloadBtn.removeAttribute('disabled'); updateProgressText(outputFilename); } renderBtn.removeEventListener('click', halt); renderBtn.addEventListener('click', computeVideoData); renderBtn.textContent = 'Render'; dryRunBox.removeAttribute('disabled'); } let curFrame = 0; let totalFrames = frameDataArray.length; for (let datum of frameDataArray) { if (breakOut) { breakOut = false; break; } const frameData = await computeFrame(datum); curFrame++; if (opts.flipY) flipY(frameData, width, height); if (totalFrames === undefined) { updateProgressText(curFrame, totalFrames, `Frame ${curFrame}`); } else { updateProgressText( curFrame, totalFrames, `Frame ${curFrame} / ${totalFrames}` ); } if (displayOutput) { imageData.data.set(frameData); ctx.putImageData(imageData, 0, 0); } if (performEncoding) { encoder.addFrameRgba(frameData); } await new Promise(requestAnimationFrame); } finalize(); } // This is super weird, I'd like to get rid of it. view.value = new Promise(function(_resolve, _reject) { resolve = _resolve; reject = _reject; }); if (!renderImmediately && displayOutput) { let frameData = await computeFrame(frameDataArray[0]); if (opts.flipY) flipY(frameData, width, height); imageData.data.set(frameData); ctx.putImageData(imageData, 0, 0); } if (renderImmediately) { computeVideoData(); } if (!performEncoding) resolve(null); return view; }