diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts index dad43963c..f0adf3c98 100644 --- a/frontend_nuxt/nuxt.config.ts +++ b/frontend_nuxt/nuxt.config.ts @@ -1,17 +1,4 @@ import { defineNuxtConfig } from 'nuxt/config' -import { createRequire } from 'node:module' - -const require = createRequire(import.meta.url) -const appPkg = require('./package.json') as { - dependencies?: Record - devDependencies?: Record -} -const ffmpegVersion = ( - process.env.NUXT_PUBLIC_FFMPEG_VERSION || - appPkg.dependencies?.['@ffmpeg/ffmpeg'] || - appPkg.devDependencies?.['@ffmpeg/ffmpeg'] || - '0.12.15' -).replace(/^[^\d]*/, '') export default defineNuxtConfig({ devServer: { host: '0.0.0.0', @@ -29,7 +16,6 @@ export default defineNuxtConfig({ discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '', twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '', telegramBotId: process.env.NUXT_PUBLIC_TELEGRAM_BOT_ID || '', - ffmpegVersion, }, }, css: [ diff --git a/frontend_nuxt/package-lock.json b/frontend_nuxt/package-lock.json index 39770a80c..a7a28be3d 100644 --- a/frontend_nuxt/package-lock.json +++ b/frontend_nuxt/package-lock.json @@ -6,8 +6,6 @@ "": { "name": "frontend_nuxt", "dependencies": { - "@ffmpeg/ffmpeg": "^0.12.15", - "@ffmpeg/util": "^0.12.2", "@icon-park/vue-next": "^1.4.2", "@nuxt/image": "^1.11.0", "@stomp/stompjs": "^7.0.0", @@ -21,6 +19,7 @@ "ldrs": "^1.0.0", "markdown-it": "^14.1.0", "mermaid": "^10.9.4", + "mp4box": "^2.1.1", "nanoid": "^5.1.5", "nprogress": "^0.2.0", "nuxt": "latest", @@ -999,36 +998,6 @@ "integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==", "license": "MIT" }, - "node_modules/@ffmpeg/ffmpeg": { - "version": "0.12.15", - "resolved": "https://registry.npmmirror.com/@ffmpeg/ffmpeg/-/ffmpeg-0.12.15.tgz", - "integrity": "sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==", - "license": "MIT", - "dependencies": { - "@ffmpeg/types": "^0.12.4" - }, - "engines": { - "node": ">=18.x" - } - }, - "node_modules/@ffmpeg/types": { - "version": "0.12.4", - "resolved": "https://registry.npmmirror.com/@ffmpeg/types/-/types-0.12.4.tgz", - "integrity": "sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==", - "license": "MIT", - "engines": { - "node": ">=16.x" - } - }, - "node_modules/@ffmpeg/util": { - "version": "0.12.2", - "resolved": "https://registry.npmmirror.com/@ffmpeg/util/-/util-0.12.2.tgz", - "integrity": "sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==", - "license": "MIT", - "engines": { - "node": ">=18.x" - } - }, "node_modules/@icon-park/vue-next": { "version": "1.4.2", "resolved": "https://registry.npmmirror.com/@icon-park/vue-next/-/vue-next-1.4.2.tgz", @@ -10172,6 +10141,15 @@ "node": ">=18" } }, + "node_modules/mp4box": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/mp4box/-/mp4box-2.1.1.tgz", + "integrity": "sha512-gttYFNmlCjredsdnxqNC6ho0bx6zEwOqAwSKZNQXtsBqvSN1CjtzlTLY9Kfhvt14Co8Iu+qMuOOpnPIRjvvFtw==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=20.8.1" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", diff --git a/frontend_nuxt/package.json b/frontend_nuxt/package.json index 31f873a29..935d6db93 100644 --- a/frontend_nuxt/package.json +++ b/frontend_nuxt/package.json @@ -13,8 +13,6 @@ }, "dependencies": { "@icon-park/vue-next": "^1.4.2", - "@ffmpeg/ffmpeg": "^0.12.15", - "@ffmpeg/util": "^0.12.2", "@nuxt/image": "^1.11.0", "@stomp/stompjs": "^7.0.0", "cropperjs": "^1.6.2", @@ -27,6 +25,7 @@ "ldrs": "^1.0.0", "markdown-it": "^14.1.0", "mermaid": "^10.9.4", + "mp4box": "^2.1.1", "nanoid": "^5.1.5", "nprogress": "^0.2.0", "nuxt": "latest", diff --git a/frontend_nuxt/plugins/ffmpeg.client.ts b/frontend_nuxt/plugins/ffmpeg.client.ts deleted file mode 100644 index 562a93aa2..000000000 --- a/frontend_nuxt/plugins/ffmpeg.client.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { FFmpeg } from '@ffmpeg/ffmpeg' -import { toBlobURL } from '@ffmpeg/util' -import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app' - -let ffmpeg: FFmpeg | null = null - -export default defineNuxtPlugin(() => { - const { - public: { ffmpegVersion }, - } = useRuntimeConfig() - - return { - provide: { - ffmpeg: async () => { - if (ffmpeg) return ffmpeg - - ffmpeg = new FFmpeg() - - const mtOk = - typeof crossOriginIsolated !== 'undefined' && - crossOriginIsolated && - typeof SharedArrayBuffer !== 'undefined' - - const pkg = mtOk ? '@ffmpeg/core-mt' : '@ffmpeg/core-st' - const base = `https://unpkg.com/${pkg}@${ffmpegVersion}/dist/umd` - - await ffmpeg.load({ - coreURL: await toBlobURL(`${base}/ffmpeg-core.js`, 'text/javascript'), - wasmURL: await toBlobURL(`${base}/ffmpeg-core.wasm`, 'application/wasm'), - workerURL: await toBlobURL(`${base}/ffmpeg-core.worker.js`, 'text/javascript'), - }) - - return ffmpeg - }, - }, - } -}) diff --git a/frontend_nuxt/utils/ffmpegVideoCompressor.js b/frontend_nuxt/utils/ffmpegVideoCompressor.js deleted file mode 100644 index 2aa155049..000000000 --- a/frontend_nuxt/utils/ffmpegVideoCompressor.js +++ /dev/null @@ -1,327 +0,0 @@ -/** - * FFmpeg.wasm 视频压缩器 - * - * 用法： - * const { $ffmpeg } = useNuxtApp() - * const ff = await $ffmpeg() // 插件里已完成 ffmpeg.load() - * const out = await compressVideoWithFFmpeg(ff, file, { onProgress, strictSize: false }) - * - * 设计要点： - * - 本文件不再负责加载/初始化，只负责转码逻辑；和 Nuxt 插件解耦。 - * - 针对【同一个 ffmpeg 实例】做串行队列，避免并发 exec 踩内存文件系统。 - * - 使用 nanoid 生成唯一文件名；日志环形缓冲；默认 CRF+VBV，可选 strictSize（two-pass）。 - * - 体积明显小于目标时直通返回，减少无谓重编码。 - */ - -import { fetchFile } from '@ffmpeg/util' -import { nanoid } from 'nanoid' -import { UPLOAD_CONFIG } from '../config/uploadConfig.js' - -/************************* - * 每实例一个串行队列 * - *************************/ -// WeakMapPromise)[], running: boolean, resolvers: {res,rej}[] }> -const queues = new WeakMap() - -function enqueueOn(instance, taskFn) { - return new Promise((res, rej) => { - let st = queues.get(instance) - if (!st) { - st = { q: [], running: false, resolvers: [] } - queues.set(instance, st) - } - st.q.push(taskFn) - st.resolvers.push({ res, rej }) - drain(instance) - }) -} - -async function drain(instance) { - const st = queues.get(instance) - if (!st || st.running) return - st.running = true - try { - while (st.q.length) { - const task = st.q.shift() - const rr = st.resolvers.shift() - try { - rr.res(await task()) - } catch (e) { - rr.rej(e) - } - } - } finally { - st.running = false - } -} - -/***************** - * 工具函数 * - *****************/ -function decideScale(widthHint) { - if (!widthHint) return { filter: null, width: null } - const evenW = widthHint % 2 === 0 ? widthHint : widthHint - 1 - return { filter: `scale=${evenW}:-2:flags=bicubic,setsar=1`, width: evenW } -} - -function calculateParamsByRatio(originalSize, targetSize) { - const ratio = Math.min(targetSize / originalSize, 1) - const crf = ratio < 0.35 ? 29 : ratio < 0.5 ? 27 : ratio < 0.7 ? 25 : 23 - const preset = ratio < 0.35 ? 'slow' : ratio < 0.5 ? 'medium' : 'veryfast' - const s = - ratio < 0.35 - ? decideScale(720) - : ratio < 0.6 - ? decideScale(960) - : ratio < 0.8 - ? decideScale(1280) - : { filter: null, width: null } - const audioBitrateK = ratio < 0.5 ? 96 : ratio < 0.7 ? 128 : 160 - const profile = s.width && s.width <= 1280 ? 'main' : 'high' - return { crf, preset, scaleFilter: s.filter, scaleWidth: s.width, audioBitrateK, profile } -} - -function makeRingLogger(capBytes = 4000) { - const buf = [] - let total = 0 - function push(s) { - if (!s) return - buf.push(s) - total += s.length - while (total > capBytes) total -= buf.shift().length - } - return { push, dump: () => buf.slice() } -} - -function parseDurationFromLogs(logs) { - // 避免正则：查找 Duration: 后的 00:00:00.xx - const text = logs.join(' ') - const idx = text.indexOf('Duration:') - if (idx === -1) return null - let i = idx + 'Duration:'.length - while (i < text.length && text[i] === ' ') i++ - function read2(start) { - const a = text.charCodeAt(start) - 48 - const b = text.charCodeAt(start + 1) - 48 - if (a < 0 || a > 9 || b < 0 || b > 9) return null - return a * 10 + b - } - const hh = read2(i) - if (hh === null) return null - i += 2 - if (text[i++] !== ':') return null - const mm = read2(i) - if (mm === null) return null - i += 2 - if (text[i++] !== ':') return null - const s1 = read2(i) - if (s1 === null) return null - i += 2 - if (text[i++] !== '.') return null - let j = i - while (j < text.length && text.charCodeAt(j) >= 48 && text.charCodeAt(j) <= 57) j++ - const frac = parseFloat('0.' + text.slice(i, j) || '0') - return hh * 3600 + mm * 60 + s1 + frac -} - -export function isFFmpegSupported() { - return typeof WebAssembly !== 'undefined' && typeof Worker !== 'undefined' -} - -/** - * 读取 ffmpeg 核心版本（通过 -version），会进入队列避免并发冲突 - */ -export async function getFFmpegInfo(ffmpegInstance) { - return enqueueOn(ffmpegInstance, async () => { - const logs = [] - const onLog = ({ type, message }) => { - if (type === 'info' || type === 'fferr') logs.push(message) - } - ffmpegInstance.on('log', onLog) - try { - await ffmpegInstance.exec(['-version']) - } finally { - ffmpegInstance.off('log', onLog) - } - const line = logs.find((l) => l.toLowerCase().includes('ffmpeg version')) || '' - const parts = line.trim().split(' ').filter(Boolean) - const version = parts.length > 2 ? parts[2] : parts[1] || null - return { version } - }) -} - -/** - * 压缩：接受一个已经 load() 完成的 ffmpeg 实例 - * @param {*} ffmpegInstance 已初始化的 FFmpeg 实例（来自 Nuxt 插件） - * @param {File|Blob} file 输入文件 - * @param {{ onProgress?:(p:{stage:string,progress:number})=>void, signal?:AbortSignal, strictSize?:boolean, targetSize?:number }} opts - */ -export async function compressVideoWithFFmpeg(ffmpegInstance, file, opts = {}) { - return enqueueOn(ffmpegInstance, () => doCompress(ffmpegInstance, file, opts)) -} - -async function doCompress(ffmpegInstance, file, opts) { - const onProgress = opts.onProgress || (() => {}) - const { signal, strictSize = false } = opts - - onProgress({ stage: 'preparing', progress: 10 }) - - const targetSize = opts.targetSize ?? UPLOAD_CONFIG?.VIDEO?.TARGET_SIZE ?? 12 * 1024 * 1024 - - // 小体积直通 - const sizeKnown = 'size' in file && typeof file.size === 'number' - if (sizeKnown && file.size <= targetSize * 0.9) { - onProgress({ stage: 'skipped', progress: 100 }) - return file - } - - const params = calculateParamsByRatio(sizeKnown ? file.size : targetSize * 2, targetSize) - const { crf, preset, scaleFilter, audioBitrateK, profile } = params - - const name = 'name' in file && typeof file.name === 'string' ? file.name : 'input.mp4' - const dot = name.lastIndexOf('.') - const outName = (dot > -1 ? name.slice(0, dot) : name) + '.mp4' - - const ext = dot > -1 ? name.slice(dot + 1).toLowerCase() : 'mp4' - const id = nanoid() - const inputName = `input-${id}.${ext}` - const outputName = `output-${id}.mp4` - const passlog = `ffpass-${id}` - - // 监听 - const ring = makeRingLogger() - const onFfmpegProgress = ({ progress: p }) => { - const adjusted = 20 + p * 70 - onProgress({ stage: 'compressing', progress: Math.min(90, adjusted) }) - } - const onFfmpegLog = ({ type, message }) => { - if (type === 'fferr' || type === 'info') ring.push(message) - } - ffmpegInstance.on('progress', onFfmpegProgress) - ffmpegInstance.on('log', onFfmpegLog) - - let aborted = false - const abortHandler = () => { - aborted = true - } - if (signal) signal.addEventListener('abort', abortHandler, { once: true }) - - try { - await ffmpegInstance.writeFile(inputName, await fetchFile(file)) - onProgress({ stage: 'analyzing', progress: 20 }) - - let durationSec = null - try { - await ffmpegInstance.exec(['-hide_banner', '-i', inputName, '-f', 'null', '-']) - durationSec = parseDurationFromLogs(ring.dump()) - } catch { - durationSec = durationSec ?? parseDurationFromLogs(ring.dump()) - } - - let videoBitrate = null - if (durationSec && sizeKnown && targetSize < file.size) { - const totalTargetBits = targetSize * 8 - const audioBits = audioBitrateK * 1000 * durationSec - const maxVideoBits = Math.max(totalTargetBits - audioBits, totalTargetBits * 0.7) - const bps = Math.max(180000, Math.floor(maxVideoBits / durationSec)) - videoBitrate = String(Math.min(bps, 5000000)) - } - - const baseArgs = [ - '-hide_banner', - '-i', - inputName, - '-c:v', - 'libx264', - '-pix_fmt', - 'yuv420p', - '-profile:v', - profile, - '-movflags', - '+faststart', - '-preset', - preset, - '-c:a', - 'aac', - '-b:a', - `${audioBitrateK}k`, - '-ac', - '2', - ] - if (scaleFilter) baseArgs.push('-vf', scaleFilter) - - const onePassArgs = [...baseArgs, '-crf', String(crf)] - if (videoBitrate) - onePassArgs.push('-maxrate', videoBitrate, '-bufsize', String(parseInt(videoBitrate, 10) * 2)) - - const twoPassFirst = [ - '-y', - '-hide_banner', - '-i', - inputName, - '-c:v', - 'libx264', - '-b:v', - `${videoBitrate || '1000000'}`, - '-pass', - '1', - '-passlogfile', - passlog, - '-an', - '-f', - 'mp4', - '/dev/null', - ] - const twoPassSecond = [ - ...baseArgs, - '-b:v', - `${videoBitrate || '1000000'}`, - '-pass', - '2', - '-passlogfile', - passlog, - outputName, - ] - - if (aborted) throw new DOMException('Aborted', 'AbortError') - - if (!strictSize) { - await ffmpegInstance.exec([...onePassArgs, outputName]) - } else { - if (!videoBitrate) videoBitrate = '1000000' - await ffmpegInstance.exec(twoPassFirst) - onProgress({ stage: 'second-pass', progress: 85 }) - await ffmpegInstance.exec(twoPassSecond) - } - - if (aborted) throw new DOMException('Aborted', 'AbortError') - - onProgress({ stage: 'finalizing', progress: 95 }) - const out = await ffmpegInstance.readFile(outputName) - - const mime = 'video/mp4' - const blob = new Blob([out], { type: mime }) - const hasFileCtor = typeof File === 'function' - const result = hasFileCtor ? new File([blob], outName, { type: mime }) : blob - - onProgress({ stage: 'completed', progress: 100 }) - return result - } finally { - try { - await ffmpegInstance.deleteFile(inputName) - } catch {} - try { - await ffmpegInstance.deleteFile(outputName) - } catch {} - try { - await ffmpegInstance.deleteFile(`${passlog}-0.log`) - } catch {} - try { - await ffmpegInstance.deleteFile(`${passlog}-0.log.mbtree`) - } catch {} - - ffmpegInstance.off('progress', onFfmpegProgress) - ffmpegInstance.off('log', onFfmpegLog) - if (signal) signal.removeEventListener('abort', abortHandler) - } -} diff --git a/frontend_nuxt/utils/vditor.js b/frontend_nuxt/utils/vditor.js index c2c6d7d9a..dbe6ae2bb 100644 --- a/frontend_nuxt/utils/vditor.js +++ b/frontend_nuxt/utils/vditor.js @@ -121,14 +121,13 @@ export function createVditor(editorId, options = {}) { vditor.tip('视频压缩中...', 0) vditor.disabled() - // 使用 FFmpeg 压缩视频 + // 使用 WebCodecs 压缩视频 processedFile = await compressVideo(file, (progress) => { const messages = { - initializing: '初始化 FFmpeg', + initializing: '初始化编解码器', preparing: '准备压缩', - analyzing: '分析视频', compressing: '压缩中', - finalizing: '完成压缩', + packaging: '封装中', completed: '压缩完成', } const message = messages[progress.stage] || progress.stage diff --git a/frontend_nuxt/utils/videoCompressor.js b/frontend_nuxt/utils/videoCompressor.js index 584d8a487..943551283 100644 --- a/frontend_nuxt/utils/videoCompressor.js +++ b/frontend_nuxt/utils/videoCompressor.js @@ -1,11 +1,10 @@ /** - * 基于 FFmpeg.wasm 的视频压缩工具 + * 基于 WebCodecs + MP4Box.js 的视频压缩工具 * 专为现代浏览器 (Chrome/Safari) 优化 */ import { UPLOAD_CONFIG } from '../config/uploadConfig.js' -import { compressVideoWithFFmpeg, isFFmpegSupported } from './ffmpegVideoCompressor.js' -import { useNuxtApp } from '#app' +import { compressVideoWithWebCodecs, isWebCodecSupported } from './webcodecVideoCompressor.js' // 导出配置供外部使用 export const VIDEO_CONFIG = UPLOAD_CONFIG.VIDEO @@ -34,7 +33,7 @@ export function formatFileSize(bytes) { } /** - * 压缩视频文件 - 使用 FFmpeg.wasm + * 压缩视频文件 - 使用 WebCodecs */ export async function compressVideo(file, onProgress = () => {}) { // 检查是否需要压缩 @@ -44,36 +43,30 @@ export async function compressVideo(file, onProgress = () => {}) { return file } - // 检查 FFmpeg 支持 - if (!isFFmpegSupported()) { + // 检查 WebCodecs 支持 + if (!isWebCodecSupported()) { throw new Error('当前浏览器不支持视频压缩功能，请使用 Chrome 或 Safari 浏览器') } try { - const { $ffmpeg } = useNuxtApp() - const ff = await $ffmpeg() - return await compressVideoWithFFmpeg(ff, file, { onProgress }) + return await compressVideoWithWebCodecs(file, { onProgress }) } catch (error) { - console.error('FFmpeg 压缩失败:', error) + console.error('WebCodecs 压缩失败:', error) throw new Error(`视频压缩失败: ${error.message}`) } } /** - * 预加载 FFmpeg（可选的性能优化） + * 预加载 WebCodecs（可选的性能优化） */ export async function preloadVideoCompressor() { try { - // FFmpeg 初始化现在通过 Nuxt 插件处理 - // 这里只需要检查支持性 - if (!isFFmpegSupported()) { - throw new Error('当前浏览器不支持 FFmpeg') + if (!isWebCodecSupported()) { + throw new Error('当前浏览器不支持 WebCodecs') } - const { $ffmpeg } = useNuxtApp() - await $ffmpeg() - return { success: true, message: 'FFmpeg 预加载成功' } + return { success: true, message: 'WebCodecs 可用' } } catch (error) { - console.warn('FFmpeg 预加载失败:', error) + console.warn('WebCodecs 预加载失败:', error) return { success: false, error: error.message } } } diff --git a/frontend_nuxt/utils/webcodecVideoCompressor.js b/frontend_nuxt/utils/webcodecVideoCompressor.js new file mode 100644 index 000000000..eef17e2e6 --- /dev/null +++ b/frontend_nuxt/utils/webcodecVideoCompressor.js @@ -0,0 +1,108 @@ +/** + * WebCodecs + MP4Box.js video compressor + * Simplified transcoding using browser WebCodecs API + */ +import { createFile } from 'mp4box' +import { UPLOAD_CONFIG } from '../config/uploadConfig.js' + +export function isWebCodecSupported() { + return ( + typeof window !== 'undefined' && + 'VideoEncoder' in window && + 'MediaStreamTrackProcessor' in window && + 'VideoFrame' in window + ) +} + +/** + * Compress a video File using WebCodecs and MP4Box.js + * @param {File} file original video file + * @param {Object} options optional callbacks + * @param {Function} options.onProgress progress callback + * @returns {Promise} compressed file + */ +export async function compressVideoWithWebCodecs(file, { onProgress = () => {} } = {}) { + if (!isWebCodecSupported()) { + throw new Error('当前浏览器不支持 WebCodecs') + } + + onProgress({ stage: 'initializing', progress: 0 }) + + const url = URL.createObjectURL(file) + const video = document.createElement('video') + video.src = url + await video.play() + video.pause() + + onProgress({ stage: 'preparing', progress: 10 }) + + const stream = video.captureStream() + const track = stream.getVideoTracks()[0] + const processor = new MediaStreamTrackProcessor({ track }) + const reader = processor.readable.getReader() + + const { width, height, frameRate = 30 } = track.getSettings() + const bitrate = UPLOAD_CONFIG.VIDEO.TARGET_BITRATE || 1_000_000 + + const chunks = [] + const encoder = new VideoEncoder({ + output: (chunk) => { + const copy = new Uint8Array(chunk.byteLength) + chunk.copyTo(copy) + chunks.push({ type: chunk.type, timestamp: chunk.timestamp, data: copy }) + }, + error: (e) => console.error('编码失败', e), + }) + + encoder.configure({ + codec: 'avc1.42001E', + width, + height, + bitrate, + framerate: frameRate, + }) + + let processed = 0 + const totalFrames = Math.ceil(video.duration * frameRate) + + while (true) { + const { done, value } = await reader.read() + if (done) break + encoder.encode(value) + value.close() + processed++ + onProgress({ stage: 'compressing', progress: Math.round((processed / totalFrames) * 80) }) + } + + await encoder.flush() + + onProgress({ stage: 'packaging', progress: 90 }) + + const mp4 = createFile() + const trackId = mp4.addTrack({ + id: 1, + type: 'avc1', + width, + height, + timescale: frameRate, + }) + + chunks.forEach((chunk) => { + mp4.addSample(trackId, chunk.data.buffer, { + duration: 1, + dts: chunk.timestamp, + cts: 0, + is_sync: chunk.type === 'key', + }) + }) + + const streamOut = mp4.getBuffer() + const outBuffer = streamOut.buffer.slice(0, streamOut.position) + const outFile = new File([outBuffer], file.name.replace(/\.[^.]+$/, '.mp4'), { + type: 'video/mp4', + }) + + onProgress({ stage: 'completed', progress: 100 }) + + return outFile +}