0

I am developing a chrome extension with manifest v2 which will take a video url and a audio url, combine them and then download the result.

for that i am using FFmpeg.wasm.
ffmpeg.wasm / @ffmpeg/ffmpeg : v0.9.6
ffmpeg.wasm-core / @ffmpeg/core : v0.8.5
from the ffmpeg.wasm chrome extension repo

But instead of combining the video and audio as inteded,
it will throw a Uncaught (in promise) Error: bad memory error. enter image description here

const onDownloadClickModal = async (event) => {
  const path = getPathInfo(event);
  const [videoUrl, audioUrl] = await getVideoUrl(path);

  let { createFFmpeg, fetchFile } = FFmpeg;
  let ffmpeg = createFFmpeg();
  await ffmpeg.load();
  ffmpeg.FS("writeFile", "video.mp4", await fetchFile(videoUrl));
  ffmpeg.FS("writeFile", "audio.mp4", await fetchFile(audioUrl));
  await ffmpeg.run("-i", "video.mp4", "-i", "audio.mp4", "-c", "copy", "output.mp4");
  let _data = await ffmpeg.FS("readFile", "output.mp4");
  let data = new Uint8Array(_data.buffer);

  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([data], { type: "video/mp4" }));
  a.download = "output.mp4"
  a.click();
  a.remove();
}

window.addEventListener("load", function () {
  if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
  afterPageLoad();
});

I have tried the following sources to fix my issue.

Here I copied the code from a user who also uses ffmpeg.wasm v0.9.6.

I ran into the issue where SharedArrayBuffer is undefined,
I found this comment on github which gave me the awnser.

and now ended up with the current memory issue.
This github issue told me to add the following headers.

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

but seeing as i am making a Chrome extension this wont work for me, unless there is a way to add new headers to a site with my extension that i dont know about.

I obviously also read the ffmpeg.wasm docs but there is not much to read in here that can help me.

Ralkey
  • 19
  • 1
  • 8
  • Put all code inside a `web_accessible_resources` iframe or any extension page (like the background context in MV2 or an [offscreen document](https://developer.chrome.com/docs/extensions/reference/offscreen/) in MV3), and [enable COEP](https://docs.google.com/document/d/1c6SX3fsp7x1BlzpCPvYSKPtjjT56W4DpoOKPSXmLllo/edit#heading=h.4sf8qqfuqr2w). To use wasm inside an extension you might need to override the extension's CSP in manifest.json too. – wOxxOm May 06 '23 at 12:28
  • @wOxxOm I have put all my scripts inside `"web_accessible_resources"` in the manifest, I am not entirely sure what you mean with “iframe”. And could you clarify what overrides need to be made inside the extension's CSP? As I didn't even have a CSP inside my manifest before this. – Ralkey May 06 '23 at 12:53
  • Look for examples of "web_accessible_resources iframe" and "wasm content_security_policy for extensions". – wOxxOm May 06 '23 at 13:06
  • @wOxxOm I have applied web_accessible_resources iframe and the CSP for wasm in extensions, but the issue still persists. could it be that an update has been made to chrome which made it so that my version of FFmpeg.wasm doesn't work anymore (as I do not have the latest version of FFmpeg) – Ralkey May 06 '23 at 14:52

0 Answers0