Because remote code execution seems to be allowed only in sandbox, I created a sandbox page and ran the following code provided in the above library's example.
// import { FFmpeg } from '@ffmpeg/ffmpeg';
// import { fetchFile } from '@ffmpeg/util';
function() {
const [loaded, setLoaded] = useState(false);
const ffmpegRef = useRef(new FFmpeg());
const videoRef = useRef(null);
const messageRef = useRef(null);
const load = async () => {
const baseURL = '
https://unpkg.com/@ffmpeg/co...@0.12.2/dist/umd'
const ffmpeg = ffmpegRef.current;
ffmpeg.on("log", ({ message }) => {
messageRef.current.innerHTML = message;
});
// toBlobURL is used to bypass CORS issue, urls with the same
// domain can be used directly.
await ffmpeg.load({
coreURL: await toBlobURL(
`${baseURL}/ffmpeg-core.js`,
"text/javascript",
),
wasmURL: await toBlobURL(
`${baseURL}/ffmpeg-core.wasm`,
"application/wasm",
),
});
setLoaded(true);
}
const transcode = async () => {
const ffmpeg = ffmpegRef.current;
await ffmpeg.writeFile(
"input.avi",
await fetchFile('/video/video-15s.avi')
);
await ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
const data = await ffmpeg.readFile('output.mp4');
videoRef.current.src =
URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
}
return (loaded
? (
<>
<video ref={videoRef} controls></video><br/>
<button onClick={transcode}>Transcode avi to mp4</button>
<p ref={messageRef}></p>
</>
)
: (
<button onClick={load}>Load ffmpeg-core</button>
)
);
}
This adds a button `Load ffmpeg-core` on page, upon clicking that it loads remote code for ffmpeg-core and then creates a web worker, which then can be used to perform operations on media.
"sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; script-src-elem 'unsafe-eval' 'unsafe-inline' 'self' https://*; object-src 'self'; child-src 'self'; worker-src 'self' blob: ;"
classes.js:104 Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'chrome-extension://xxxxx/node_modules_pnpm_ffmpeg_ffmpeg_0_12_4_node_modules_ffmpeg_ffmpeg_dist_esm_worker_js.js' cannot be accessed from origin 'null'.
at FFmpeg.load (chrome-extension://xxxxx/ffmpegPage.js:2243:28)
Any help is appreciated.