Reorg folders and use core as ffmpeg from now on

This commit is contained in:
Jerome Wu
2022-09-22 13:06:44 +08:00
parent 4f03229810
commit 20790e4fd2
138 changed files with 10505 additions and 1223 deletions

View File

@@ -0,0 +1,10 @@
import pkg from '../../package.json';
/*
* Default options for browser environment
*/
const corePath = typeof process !== 'undefined' && process.env.NODE_ENV === 'development'
? new URL('/node_modules/@ffmpeg/core/dist/ffmpeg-core.js', import.meta.url).href
: `https://unpkg.com/@ffmpeg/core@${pkg.devDependencies['@ffmpeg/core'].substring(1)}/dist/ffmpeg-core.js`;
export default { corePath };

View File

@@ -0,0 +1,38 @@
const readFromBlobOrFile = (blob) => (
new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = ({ target: { error: { code } } }) => {
reject(Error(`File could not be read! Code=${code}`));
};
fileReader.readAsArrayBuffer(blob);
})
);
// eslint-disable-next-line
export const fetchFile = async (_data) => {
let data = _data;
if (typeof _data === 'undefined') {
return new Uint8Array();
}
if (typeof _data === 'string') {
/* From base64 format */
if (/data:_data\/([a-zA-Z]*);base64,([^"]*)/.test(_data)) {
data = atob(_data.split(',')[1])
.split('')
.map((c) => c.charCodeAt(0));
/* From remote server/URL */
} else {
const res = await fetch(new URL(_data, import.meta.url).href);
data = await res.arrayBuffer();
}
/* From Blob or File */
} else if (_data instanceof File || _data instanceof Blob) {
data = await readFromBlobOrFile(_data);
}
return new Uint8Array(data);
};

View File

@@ -0,0 +1,114 @@
/* eslint-disable no-undef */
import { log } from '../utils/log';
import {
CREATE_FFMPEG_CORE_IS_NOT_DEFINED,
} from '../utils/errors';
/*
* Fetch data from remote URL and convert to blob URL
* to avoid CORS issue
*/
const toBlobURL = async (url, mimeType) => {
log('info', `fetch ${url}`);
const buf = await (await fetch(url)).arrayBuffer();
log('info', `${url} file size = ${buf.byteLength} bytes`);
const blob = new Blob([buf], { type: mimeType });
const blobURL = URL.createObjectURL(blob);
log('info', `${url} blob URL = ${blobURL}`);
return blobURL;
};
// eslint-disable-next-line
export const getCreateFFmpegCore = async ({
corePath: _corePath,
workerPath: _workerPath,
wasmPath: _wasmPath,
}) => {
// in Web Worker context
// eslint-disable-next-line
if (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) {
if (typeof _corePath !== 'string') {
throw Error('corePath should be a string!');
}
const coreRemotePath = new URL(_corePath, import.meta.url).href;
const corePath = await toBlobURL(
coreRemotePath,
'application/javascript',
);
const wasmPath = await toBlobURL(
_wasmPath !== undefined ? _wasmPath : coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.wasm'),
'application/wasm',
);
const workerPath = await toBlobURL(
_workerPath !== undefined ? _workerPath : coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.worker.js'),
'application/javascript',
);
if (typeof createFFmpegCore === 'undefined') {
return new Promise((resolve) => {
globalThis.importScripts(corePath);
if (typeof createFFmpegCore === 'undefined') {
throw Error(CREATE_FFMPEG_CORE_IS_NOT_DEFINED(coreRemotePath));
}
log('info', 'ffmpeg-core.js script loaded');
resolve({
createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
});
}
log('info', 'ffmpeg-core.js script is loaded already');
return Promise.resolve({
createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
}
if (typeof _corePath !== 'string') {
throw Error('corePath should be a string!');
}
const coreRemotePath = new URL(_corePath, import.meta.url).href;
const corePath = await toBlobURL(
coreRemotePath,
'application/javascript',
);
const wasmPath = await toBlobURL(
coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.wasm'),
'application/wasm',
);
const workerPath = await toBlobURL(
coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.worker.js'),
'application/javascript',
);
if (typeof createFFmpegCore === 'undefined') {
return new Promise((resolve) => {
const script = document.createElement('script');
const eventHandler = () => {
script.removeEventListener('load', eventHandler);
if (typeof createFFmpegCore === 'undefined') {
throw Error(CREATE_FFMPEG_CORE_IS_NOT_DEFINED(coreRemotePath));
}
log('info', 'ffmpeg-core.js script loaded');
resolve({
createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
};
script.src = corePath;
script.type = 'text/javascript';
script.addEventListener('load', eventHandler);
document.getElementsByTagName('head')[0].appendChild(script);
});
}
log('info', 'ffmpeg-core.js script is loaded already');
return Promise.resolve({
createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
};

View File

@@ -0,0 +1,5 @@
import defaultOptions from './defaultOptions';
import { getCreateFFmpegCore } from './getCreateFFmpegCore';
import { fetchFile } from './fetchFile';
export { defaultOptions, getCreateFFmpegCore, fetchFile };

View File

@@ -0,0 +1,50 @@
module.exports = {
defaultArgs: [
/* args[0] is always the binary path */
'./ffmpeg',
/* Disable interaction mode */
'-nostdin',
/* Force to override output file */
'-y',
],
baseOptions: {
/* Flag to turn on/off log messages in console */
log: false,
/*
* Custom logger to get ffmpeg.wasm output messages.
* a sample logger looks like this:
*
* ```
* logger = ({ type, message }) => {
* console.log(type, message);
* }
* ```
*
* type can be one of following:
*
* info: internal workflow debug messages
* fferr: ffmpeg native stderr output
* ffout: ffmpeg native stdout output
*/
logger: () => {},
/*
* Progress handler to get current progress of ffmpeg command.
* a sample progress handler looks like this:
*
* ```
* progress = ({ ratio }) => {
* console.log(ratio);
* }
* ```
*
* ratio is a float number between 0 to 1.
*/
progress: () => {},
/*
* Path to find/download ffmpeg.wasm-core,
* this value should be overwriten by `defaultOptions` in
* each environment.
*/
corePath: '',
},
};

View File

@@ -0,0 +1,279 @@
const { defaultArgs, baseOptions } = require('./config');
const parseArgs = require('./utils/parseArgs');
const { defaultOptions, getCreateFFmpegCore } = require('./node');
const { version } = require('../package.json');
const NO_LOAD = Error('ffmpeg.wasm is not ready, make sure you have completed load().');
module.exports = (_options = {}) => {
const {
log: optLog,
logger,
progress: optProgress,
...options
} = {
...baseOptions,
...defaultOptions,
..._options,
};
let Core = null;
let ffmpeg = null;
let runResolve = null;
let runReject = null;
let running = false;
let customLogger = () => {};
let logging = optLog;
let progress = optProgress;
let duration = 0;
let frames = 0;
let readFrames = false;
let ratio = 0;
const detectCompletion = (message) => {
if (message === 'FFMPEG_END' && runResolve !== null) {
runResolve();
runResolve = null;
runReject = null;
running = false;
}
};
const log = (type, message) => {
customLogger({ type, message });
if (logging) {
console.log(`[${type}] ${message}`);
}
};
const ts2sec = (ts) => {
const [h, m, s] = ts.split(':');
return (parseFloat(h) * 60 * 60) + (parseFloat(m) * 60) + parseFloat(s);
};
const parseProgress = (message, prog) => {
if (typeof message === 'string') {
if (message.startsWith(' Duration')) {
const ts = message.split(', ')[0].split(': ')[1];
const d = ts2sec(ts);
prog({ duration: d, ratio });
if (duration === 0 || duration > d) {
duration = d;
readFrames = true;
}
} else if (readFrames && message.startsWith(' Stream')) {
const match = message.match(/([\d.]+) fps/);
if (match) {
const fps = parseFloat(match[1]);
frames = duration * fps;
} else {
frames = 0;
}
readFrames = false;
} else if (message.startsWith('frame') || message.startsWith('size')) {
const ts = message.split('time=')[1].split(' ')[0];
const t = ts2sec(ts);
const match = message.match(/frame=\s*(\d+)/);
if (frames && match) {
const f = parseFloat(match[1]);
ratio = Math.min(f / frames, 1);
} else {
ratio = t / duration;
}
prog({ ratio, time: t });
} else if (message.startsWith('video:')) {
prog({ ratio: 1 });
duration = 0;
}
}
};
const parseMessage = ({ type, message }) => {
log(type, message);
parseProgress(message, progress);
detectCompletion(message);
};
/*
* Load ffmpeg.wasm-core script.
* In browser environment, the ffmpeg.wasm-core script is fetch from
* CDN and can be assign to a local path by assigning `corePath`.
* In node environment, we use dynamic require and the default `corePath`
* is `$ffmpeg/core`.
*
* Typically the load() func might take few seconds to minutes to complete,
* better to do it as early as possible.
*
*/
const load = async () => {
log('info', 'load ffmpeg-core');
if (Core === null) {
log('info', 'loading ffmpeg-core');
/*
* In node environment, all paths are undefined as there
* is no need to set them.
*/
const {
createFFmpegCore,
corePath,
workerPath,
wasmPath,
} = await getCreateFFmpegCore(options);
Core = await createFFmpegCore({
/*
* Assign mainScriptUrlOrBlob fixes chrome extension web worker issue
* as there is no document.currentScript in the context of content_scripts
*/
mainScriptUrlOrBlob: corePath,
printErr: (message) => parseMessage({ type: 'fferr', message }),
print: (message) => parseMessage({ type: 'ffout', message }),
/*
* locateFile overrides paths of files that is loaded by main script (ffmpeg-core.js).
* It is critical for browser environment and we override both wasm and worker paths
* as we are using blob URL instead of original URL to avoid cross origin issues.
*/
locateFile: (path, prefix) => {
if (typeof window !== 'undefined' || typeof WorkerGlobalScope !== 'undefined') {
if (typeof wasmPath !== 'undefined'
&& path.endsWith('ffmpeg-core.wasm')) {
return wasmPath;
}
if (typeof workerPath !== 'undefined'
&& path.endsWith('ffmpeg-core.worker.js')) {
return workerPath;
}
}
return prefix + path;
},
});
ffmpeg = Core.cwrap(options.mainName || 'proxy_main', 'number', ['number', 'number']);
log('info', 'ffmpeg-core loaded');
} else {
throw Error('ffmpeg.wasm was loaded, you should not load it again, use ffmpeg.isLoaded() to check next time.');
}
};
/*
* Determine whether the Core is loaded.
*/
const isLoaded = () => Core !== null;
/*
* Run ffmpeg command.
* This is the major function in ffmpeg.wasm, you can just imagine it
* as ffmpeg native cli and what you need to pass is the same.
*
* For example, you can convert native command below:
*
* ```
* $ ffmpeg -i video.avi -c:v libx264 video.mp4
* ```
*
* To
*
* ```
* await ffmpeg.run('-i', 'video.avi', '-c:v', 'libx264', 'video.mp4');
* ```
*
*/
const run = (..._args) => {
log('info', `run ffmpeg command: ${_args.join(' ')}`);
if (Core === null) {
throw NO_LOAD;
} else if (running) {
throw Error('ffmpeg.wasm can only run one command at a time');
} else {
running = true;
return new Promise((resolve, reject) => {
const args = [...defaultArgs, ..._args].filter((s) => s.length !== 0);
runResolve = resolve;
runReject = reject;
ffmpeg(...parseArgs(Core, args));
});
}
};
/*
* Run FS operations.
* For input/output file of ffmpeg.wasm, it is required to save them to MEMFS
* first so that ffmpeg.wasm is able to consume them. Here we rely on the FS
* methods provided by Emscripten.
*
* Common methods to use are:
* ffmpeg.FS('writeFile', 'video.avi', new Uint8Array(...)): writeFile writes
* data to MEMFS. You need to use Uint8Array for binary data.
* ffmpeg.FS('readFile', 'video.mp4'): readFile from MEMFS.
* ffmpeg.FS('unlink', 'video.map'): delete file from MEMFS.
*
* For more info, check https://emscripten.org/docs/api_reference/Filesystem-API.html
*
*/
const FS = (method, ...args) => {
log('info', `run FS.${method} ${args.map((arg) => (typeof arg === 'string' ? arg : `<${arg.length} bytes binary file>`)).join(' ')}`);
if (Core === null) {
throw NO_LOAD;
} else {
let ret = null;
try {
ret = Core.FS[method](...args);
} catch (e) {
if (method === 'readdir') {
throw Error(`ffmpeg.FS('readdir', '${args[0]}') error. Check if the path exists, ex: ffmpeg.FS('readdir', '/')`);
} else if (method === 'readFile') {
throw Error(`ffmpeg.FS('readFile', '${args[0]}') error. Check if the path exists`);
} else {
throw Error('Oops, something went wrong in FS operation.');
}
}
return ret;
}
};
/**
* forcibly terminate the ffmpeg program.
*/
const exit = () => {
if (Core === null) {
throw NO_LOAD;
} else {
// if there's any pending runs, reject them
if (runReject) {
runReject('ffmpeg has exited');
}
running = false;
try {
Core.exit(1);
} catch (err) {
log(err.message);
if (runReject) {
runReject(err);
}
} finally {
Core = null;
ffmpeg = null;
runResolve = null;
runReject = null;
}
}
};
const setProgress = (_progress) => {
progress = _progress;
};
const setLogger = (_logger) => {
customLogger = _logger;
};
const setLogging = (_logging) => {
logging = _logging;
};
log('info', `use ffmpeg.wasm v${version}`);
return {
setProgress,
setLogger,
setLogging,
load,
isLoaded,
run,
exit,
FS,
};
};

120
packages/util/src/index.d.ts vendored Normal file
View File

@@ -0,0 +1,120 @@
export const FS: {
writeFile: (fileName: string, binaryData: Uint8Array | string) => void,
readFile: (fileName: string) => Uint8Array,
readdir: (pathName: string) => string[],
unlink: (fileName: string) => void,
mkdir: (fileName: string) => void,
}
type FSMethodNames = { [K in keyof typeof FS]: (typeof FS)[K] extends (...args: any[]) => any ? K : never }[keyof typeof FS];
type FSMethodArgs = { [K in FSMethodNames]: Parameters<(typeof FS)[K]> };
type FSMethodReturn = { [K in FSMethodNames]: ReturnType<(typeof FS)[K]> };
type LogCallback = (logParams: { type: string; message: string }) => any;
type ProgressCallback = (progressParams: { ratio: number }) => any;
export interface CreateFFmpegOptions {
/** path for ffmpeg-core.js script */
corePath?: string;
/** path for ffmpeg-worker.js script */
workerPath?: string;
/** path for ffmpeg-core.wasm script */
wasmPath?: string;
/** a boolean to turn on all logs, default is false */
log?: boolean;
/** a function to get log messages, a quick example is ({ message }) => console.log(message) */
logger?: LogCallback;
/** a function to trace the progress, a quick example is p => console.log(p) */
progress?: ProgressCallback;
/** name of the main function of the ffmpeg-core.js script */
mainName?: string;
}
export interface FFmpeg {
/*
* Load ffmpeg.wasm-core script.
* In browser environment, the ffmpeg.wasm-core script is fetch from
* CDN and can be assign to a local path by assigning `corePath`.
* In node environment, we use dynamic require and the default `corePath`
* is `$ffmpeg/core`.
*
* Typically the load() func might take few seconds to minutes to complete,
* better to do it as early as possible.
*
*/
load(): Promise<void>;
/*
* Determine whether the Core is loaded.
*/
isLoaded(): boolean;
/*
* Run ffmpeg command.
* This is the major function in ffmpeg.wasm, you can just imagine it
* as ffmpeg native cli and what you need to pass is the same.
*
* For example, you can convert native command below:
*
* ```
* $ ffmpeg -i video.avi -c:v libx264 video.mp4
* ```
*
* To
*
* ```
* await ffmpeg.run('-i', 'video.avi', '-c:v', 'libx264', 'video.mp4');
* ```
*
*/
run(...args: string[]): Promise<void>;
/*
* Run FS operations.
* For input/output file of ffmpeg.wasm, it is required to save them to MEMFS
* first so that ffmpeg.wasm is able to consume them. Here we rely on the FS
* methods provided by Emscripten.
*
* Common methods to use are:
* ffmpeg.FS('writeFile', 'video.avi', new Uint8Array(...)): writeFile writes
* data to MEMFS. You need to use Uint8Array for binary data.
* ffmpeg.FS('readFile', 'video.mp4'): readFile from MEMFS.
* ffmpeg.FS('unlink', 'video.map'): delete file from MEMFS.
*
* For more info, check https://emscripten.org/docs/api_reference/Filesystem-API.html
*
*/
FS<Method extends FSMethodNames>(method: Method, ...args: FSMethodArgs[Method]): FSMethodReturn[Method];
setProgress(progress: ProgressCallback): void;
setLogger(log: LogCallback): void;
setLogging(logging: boolean): void;
exit(): void;
}
/*
* Create ffmpeg instance.
* Each ffmpeg instance owns an isolated MEMFS and works
* independently.
*
* For example:
*
* ```
* const ffmpeg = createFFmpeg({
* log: true,
* logger: () => {},
* progress: () => {},
* corePath: '',
* })
* ```
*
* For the usage of these four arguments, check config.js
*
*/
export function createFFmpeg(options?: CreateFFmpegOptions): FFmpeg;
/*
* Helper function for fetching files from various resource.
* Sometimes the video/audio file you want to process may located
* in a remote URL and somewhere in your local file system.
*
* This helper function helps you to fetch to file and return an
* Uint8Array variable for ffmpeg.wasm to consume.
*
*/
export function fetchFile(data: string | Buffer | Blob | File): Promise<Uint8Array>;

View File

@@ -0,0 +1,36 @@
require('regenerator-runtime/runtime');
const createFFmpeg = require('./createFFmpeg');
const { fetchFile } = require('./node');
module.exports = {
/*
* Create ffmpeg instance.
* Each ffmpeg instance owns an isolated MEMFS and works
* independently.
*
* For example:
*
* ```
* const ffmpeg = createFFmpeg({
* log: true,
* logger: () => {},
* progress: () => {},
* corePath: '',
* })
* ```
*
* For the usage of these four arguments, check config.js
*
*/
createFFmpeg,
/*
* Helper function for fetching files from various resource.
* Sometimes the video/audio file you want to process may located
* in a remote URL and somewhere in your local file system.
*
* This helper function helps you to fetch to file and return an
* Uint8Array variable for ffmpeg.wasm to consume.
*
*/
fetchFile,
};

View File

@@ -0,0 +1,6 @@
/*
* Default options for node environment
*/
module.exports = {
corePath: '@ffmpeg/core',
};

View File

@@ -0,0 +1,33 @@
const util = require('util');
const fs = require('fs');
const fetch = require('node-fetch');
const isURL = require('is-url');
module.exports = async (_data) => {
let data = _data;
if (typeof _data === 'undefined') {
return new Uint8Array();
}
if (typeof _data === 'string') {
/* From remote URL/server */
if (isURL(_data)
|| _data.startsWith('moz-extension://')
|| _data.startsWith('chrome-extension://')
|| _data.startsWith('file://')) {
const res = await fetch(_data);
data = await res.arrayBuffer();
/* From base64 format */
} else if (/data:_data\/([a-zA-Z]*);base64,([^"]*)/.test(_data)) {
data = Buffer.from(_data.split(',')[1], 'base64');
/* From local file path */
} else {
data = await util.promisify(fs.readFile)(_data);
}
/* From Buffer */
} else if (Buffer.isBuffer(_data)) {
data = _data;
}
return new Uint8Array(data);
};

View File

@@ -0,0 +1,7 @@
const { log } = require('../utils/log');
module.exports = ({ corePath }) => new Promise((resolve) => {
log('info', `fetch ffmpeg.wasm-core script from ${corePath}`);
// eslint-disable-next-line import/no-dynamic-require
resolve({ createFFmpegCore: require(corePath) });
});

View File

@@ -0,0 +1,9 @@
const defaultOptions = require('./defaultOptions');
const getCreateFFmpegCore = require('./getCreateFFmpegCore');
const fetchFile = require('./fetchFile');
module.exports = {
defaultOptions,
getCreateFFmpegCore,
fetchFile,
};

View File

@@ -0,0 +1,11 @@
const CREATE_FFMPEG_CORE_IS_NOT_DEFINED = (corePath) => (`
createFFmpegCore is not defined. ffmpeg.wasm is unable to find createFFmpegCore after loading ffmpeg-core.js from ${corePath}. Use another URL when calling createFFmpeg():
const ffmpeg = createFFmpeg({
corePath: 'http://localhost:3000/ffmpeg-core.js',
});
`);
module.exports = {
CREATE_FFMPEG_CORE_IS_NOT_DEFINED,
};

View File

@@ -0,0 +1,24 @@
let logging = false;
let customLogger = () => {};
const setLogging = (_logging) => {
logging = _logging;
};
const setCustomLogger = (logger) => {
customLogger = logger;
};
const log = (type, message) => {
customLogger({ type, message });
if (logging) {
console.log(`[${type}] ${message}`);
}
};
module.exports = {
logging,
setLogging,
setCustomLogger,
log,
};

View File

@@ -0,0 +1,10 @@
module.exports = (Core, args) => {
const argsPtr = Core._malloc(args.length * Uint32Array.BYTES_PER_ELEMENT);
args.forEach((s, idx) => {
const sz = Core.lengthBytesUTF8(s) + 1;
const buf = Core._malloc(sz);
Core.stringToUTF8(s, buf, sz);
Core.setValue(argsPtr + (Uint32Array.BYTES_PER_ELEMENT * idx), buf, 'i32');
});
return [args.length, argsPtr];
};