ffmpegwasm/ffmpeg.wasm

Worker not found when loading ffmpeg with angular

Closed this issue · 1 comments

Describe the bug
I just created an angular project and i'm using ffmpeg.wasm to process videos given by the user. After creating a webworker load ffmpeg but the load method require a worker.js file that i don't know how and where to create.

To Reproduce

const baseURL = `https://unpkg.com/@ffmpeg/core@0.12.10/dist/esm`;

export class AppComponent {
    private ffmpeg = new FFmpeg();

    constructor() {
        if (typeof Worker !== 'undefined') {   // Create a new
            const worker = new Worker(new URL('./app-component.worker', import.meta.url));
            worker.onmessage = ({data}) => {
                console.log(`page got message: ${data}`);
            };
            worker.postMessage('hello');


            this.loadFFmpeg().then(
                () => console.log('loaded')
            );
        } else {
            // Web workers are not supported in this environment.
            // You should add a fallback so that your program still executes correctly.
        }
    }

    private _loaded = false;

    get loaded(): boolean {
        return this._loaded;
    }

    async loadFFmpeg() {
        this.ffmpeg.on('log', ({message}) => {
            this._message = message;
        });

        await this.ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application.wasm'),
        })

        this._loaded = true;
        console.log("Loaded !");
    }
}

Expected behavior
I want to make ffmpeg.wasm load just to process a video. For the moment,

Screenshots
Image

Desktop (please complete the following information):

  • OS: Ubuntu 24.4.1 LTS
  • Browser Firefox
  • Version 125.0.2

Smartphone (please complete the following information):
/

Additional context
I'm learning angular on the job and at the same time of ffmpeg.wasm so i may have not understood everything. I'll need to process video using websocket messages next, is it possible ?

Thank you in advance

Took the worker from core-mt@0.12.9 on unpkg.com because i need multi threading and i didn't saw there was one for mt. I don't have the error anymore but the load method is stuck and never stop loading. After looking at the worker it's like the first message received by it is not handled:
Received message :

Object { id: 0, cmd: "LOAD", data: {…} }
​
cmd: "LOAD"
​
data: Object { coreURL: "blob:http://localhost:4200/d5e7ef35-ab3e-4d10-a323-889a43f0f114", wasmURL: "blob:http://localhost:4200/61a6fcd6-5a9d-4e85-8a69-59ef7e8f1cbb" }
​​
coreURL: "blob:http://localhost:4200/d5e7ef35-ab3e-4d10-a323-889a43f0f114"
​​
wasmURL: "blob:http://localhost:4200/61a6fcd6-5a9d-4e85-8a69-59ef7e8f1cbb"
​​
<prototype>: Object { … }
​
id: 0
​
<prototype>: Object { … }
915cfded-839e-42e4-b5a9-ea573ef5e2f6:28:13

But the worker take a cmd from it and not a type. Tried to change type to cmd but the load cmd is not handled to.