Add util and rewrite examples (WIP)
This commit is contained in:
Jerome Wu
@@ -1,10 +0,0 @@
|
||||
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 };
|
||||
@@ -1,38 +0,0 @@
|
||||
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);
|
||||
};
|
||||
@@ -1,114 +0,0 @@
|
||||
/* 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,
|
||||
});
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
import defaultOptions from './defaultOptions';
|
||||
import { getCreateFFmpegCore } from './getCreateFFmpegCore';
|
||||
import { fetchFile } from './fetchFile';
|
||||
|
||||
export { defaultOptions, getCreateFFmpegCore, fetchFile };
|
||||
@@ -1,50 +0,0 @@
|
||||
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: '',
|
||||
},
|
||||
};
|
||||
@@ -1,279 +0,0 @@
|
||||
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
120
packages/util/src/index.d.ts
vendored
@@ -1,120 +0,0 @@
|
||||
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>;
|
||||
@@ -1,36 +0,0 @@
|
||||
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,
|
||||
};
|
||||
107
packages/util/src/index.ts
Normal file
107
packages/util/src/index.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
export const readFromBlobOrFile = (blob: Blob | File): Promise<Uint8Array> =>
|
||||
new Promise((resolve, reject) => {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = () => {
|
||||
const { result } = fileReader;
|
||||
if (result instanceof ArrayBuffer) {
|
||||
resolve(new Uint8Array(result));
|
||||
} else {
|
||||
resolve(new Uint8Array());
|
||||
}
|
||||
};
|
||||
fileReader.onerror = (event) => {
|
||||
reject(
|
||||
Error(
|
||||
`File could not be read! Code=${event?.target?.error?.code || -1}`
|
||||
)
|
||||
);
|
||||
};
|
||||
fileReader.readAsArrayBuffer(blob);
|
||||
});
|
||||
|
||||
/**
|
||||
* An util function to fetch data from url string, base64, URL, File or Blob format.
|
||||
*
|
||||
* Examples:
|
||||
* ```ts
|
||||
* // URL
|
||||
* await fetchFile("http://localhost:3000/video.mp4");
|
||||
* // base64
|
||||
* await fetchFile("data:<type>;base64,wL2dvYWwgbW9yZ...");
|
||||
* // URL
|
||||
* await fetchFile(new URL("video.mp4", import.meta.url));
|
||||
* // File
|
||||
* fileInput.addEventListener('change', (e) => {
|
||||
* await fetchFile(e.target.files[0]);
|
||||
* });
|
||||
* // Blob
|
||||
* const blob = new Blob(...);
|
||||
* await fetchFile(blob);
|
||||
* ```
|
||||
*/
|
||||
export const fetchFile = async (
|
||||
file?: string | File | Blob
|
||||
): Promise<Uint8Array> => {
|
||||
let data: ArrayBuffer | number[];
|
||||
|
||||
if (typeof file === "string") {
|
||||
/* From base64 format */
|
||||
if (/data:_data\/([a-zA-Z]*);base64,([^"]*)/.test(file)) {
|
||||
data = atob(file.split(",")[1])
|
||||
.split("")
|
||||
.map((c) => c.charCodeAt(0));
|
||||
/* From remote server/URL */
|
||||
} else {
|
||||
data = await (await fetch(file)).arrayBuffer();
|
||||
}
|
||||
} else if (file instanceof URL) {
|
||||
data = await (await fetch(file)).arrayBuffer();
|
||||
} else if (file instanceof File || file instanceof Blob) {
|
||||
data = await readFromBlobOrFile(file);
|
||||
} else {
|
||||
return new Uint8Array();
|
||||
}
|
||||
|
||||
return new Uint8Array(data);
|
||||
};
|
||||
|
||||
/**
|
||||
* importScript dynamically import a script, useful when you
|
||||
* want to use different versions of ffmpeg.wasm based on environment.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```ts
|
||||
* await importScript("http://localhost:3000/ffmpeg.js");
|
||||
* ```
|
||||
*/
|
||||
export const importScript = async (url: string): Promise<void> =>
|
||||
new Promise((resolve) => {
|
||||
const script = document.createElement("script");
|
||||
const eventHandler = () => {
|
||||
script.removeEventListener("load", eventHandler);
|
||||
resolve();
|
||||
};
|
||||
script.src = url;
|
||||
script.type = "text/javascript";
|
||||
script.addEventListener("load", eventHandler);
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
});
|
||||
|
||||
/**
|
||||
* toBlobURL fetches data from an URL and return a blob URL.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```ts
|
||||
* await toBlobURL("http://localhost:3000/ffmpeg.js", "text/javascript");
|
||||
* ```
|
||||
*/
|
||||
export const toBlobURL = async (
|
||||
url: string,
|
||||
mimeType: string
|
||||
): Promise<string> => {
|
||||
const buf = await (await fetch(url)).arrayBuffer();
|
||||
const blob = new Blob([buf], { type: mimeType });
|
||||
return URL.createObjectURL(blob);
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
/*
|
||||
* Default options for node environment
|
||||
*/
|
||||
module.exports = {
|
||||
corePath: '@ffmpeg/core',
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
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);
|
||||
};
|
||||
@@ -1,7 +0,0 @@
|
||||
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) });
|
||||
});
|
||||
@@ -1,9 +0,0 @@
|
||||
const defaultOptions = require('./defaultOptions');
|
||||
const getCreateFFmpegCore = require('./getCreateFFmpegCore');
|
||||
const fetchFile = require('./fetchFile');
|
||||
|
||||
module.exports = {
|
||||
defaultOptions,
|
||||
getCreateFFmpegCore,
|
||||
fetchFile,
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
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,
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
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,
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
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];
|
||||
};
|
||||
Reference in New Issue
Block a user