kalanchoej Comments - Answer Overflow

kalanchoej

Posts Comments

PD🧩 Plasmo Developers

•Created by kalanchoej on 5/31/2023 in #👟framework

ffmpeg wasm cannot load

@avi12 I don't suppose you can offer me some guidance or an example I could work from?

7 replies

PD🧩 Plasmo Developers

•Created by kalanchoej on 5/31/2023 in #👟framework

ffmpeg wasm cannot load

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

7 replies

Gaming

Programming