🧩 Plasmo Developers•2y ago

ffmpeg wasm cannot load

I'm trying to use ffmpeg wasm to extract audio from a video file at a remote URL. Unfortunately I'm not able to even load ffmpeg. By default, the loader tries to fetch from a CDN, which results in a CORS error for me. I've attempted to go around that by referencing the local file like this: import ffmpegCoreFile from "url:../vendor/ffmpeg-core.js" I've tried using this in a background script, through messagings, and in a content script. I am getting a variety of errors depending on the circumstance so I'm wondering: Is this something we have an example for? I see this error most frequently URL.createObjectURL is not a function which is coming from ffmpeg, but I don't think it's a problem with ffmpeg, and is likely just that I don't understand how to implement this properly in Plasmo. There is a non-Plasmo example of this idea here https://github.com/ffmpegwasm/chrome-extension-app

GitHub

GitHub - ffmpegwasm/chrome-extension-app: An example to use ffmpeg....

An example to use ffmpeg.wasm in Chrome Extension. Contribute to ffmpegwasm/chrome-extension-app development by creating an account on GitHub.

4 Replies

kalanchoejOP•2y ago

My extension is adding a button to the page via a content script. That's working ☑️ I'm clicking the button and scraping the page for the video url. That's working ☑️ I'm sending a message to a background script. That's working ☑️ In that background script I'm loading attempting to load ffmpeg.wasm

import { writeFile } from 'fs/promises';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
import type { PlasmoMessaging } from "@plasmohq/messaging"

const getAudioFromUrl = async (url) => {
  const ffmpeg = createFFmpeg({ log: true, corePath: chrome.runtime.getURL('vendor/ffmpeg-core.js'), workerPath: chrome.runtime.getURL('vendor/ffmpeg-core.worker.js'), wasmPath: chrome.runtime.getURL('vendor/ffmpeg-core.wasm')});

import { writeFile } from 'fs/promises';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
import type { PlasmoMessaging } from "@plasmohq/messaging"

const getAudioFromUrl = async (url) => {
  const ffmpeg = createFFmpeg({ log: true, corePath: chrome.runtime.getURL('vendor/ffmpeg-core.js'), workerPath: chrome.runtime.getURL('vendor/ffmpeg-core.worker.js'), wasmPath: chrome.runtime.getURL('vendor/ffmpeg-core.wasm')});

This is not working 😥 The code being built that is resulting in the error is

/*
 * 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); <== Problem here 
  log('info', `${url} blob URL = ${blobURL}`);
  return blobURL;
};

/*
 * 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); <== Problem here 
  log('info', `${url} blob URL = ${blobURL}`);
  return blobURL;
};

URL.createObjectURL is not a function @avi12 I don't suppose you can offer me some guidance or an example I could work from?

Avi•2y ago

The only example I have, which might need some adaption to manifest V3, is https://github.com/avi12/youtube-downloader

GitHub

GitHub - avi12/youtube-downloader: A browser extension for simplify...

A browser extension for simplifying downloading YouTube videos. - GitHub - avi12/youtube-downloader: A browser extension for simplifying downloading YouTube videos.

lab•2y ago

You will not be able to spawn the wasm in bgsw directly. One way to do so is use the offscreen API to spawn a page, and in that page spawn the WASM

Avi•2y ago

@kalanchoej

Gaming

Programming

ffmpeg wasm cannot load