Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FFmpeg won't load with Angular 18 #830

Closed
CasahDev opened this issue Jan 28, 2025 · 4 comments
Closed

FFmpeg won't load with Angular 18 #830

CasahDev opened this issue Jan 28, 2025 · 4 comments

Comments

@CasahDev
Copy link

Describe the bug
I'm using Angular 18 with FFmpeg.wasm v0.12.15 and FFmpeg-core multi threaded v0.12.9 and when i call the load method, the browser create a thread and import the worker file but it never ends loading. I added a console log to the worker and i only receive one message:

Received message 
Object { id: 0, type: "LOAD", data: {…} }
​ ► data: Object { coreURL: "blob:http://localhost:4200/498bf81a-beb0-4f8a-8381-b4206e3c3643", wasmURL: "blob:http://localhost:4200/49505f87-6669-47b9-a5bc-4f59f6651503" }
​ ► id: 0
​​ ► type: "LOAD"
​​ ► <prototype>: Object { … }

It looks like the message is not handled by the worker because the worker use the cmd attribute and receive a message with a type attribute

To Reproduce

export class AppComponent {
    private ffmpeg : FFmpeg | undefined;
    private loaded : boolean = false;

    constructor() {
        this.loadFFmpeg();
    }

    private async loadFFmpeg() {
        this.ffmpeg = new FFmpeg();

        try {
            const assetsFolder = '/assets/ffmpeg/';
            await this.ffmpeg.load({
                coreURL: await toBlobURL(`${assetsFolder}ffmpeg-core.js`, "text/javascript"),
                wasmURL: await toBlobURL(`${assetsFolder}ffmpeg-core.wasm`, "wasm"),
                classWorkerURL: await toBlobURL(`${assetsFolder}ffmpeg-core.worker.js`, "text/javascript"),
            });

            console.log('FFmpeg loaded successfully');
        } catch (error) {
            console.error('Error loading FFmpeg:', error);
        }

        this._loaded = true;
    }
}

Here no console.log are displayed

Expected behavior
Just to display any of the console log, a little preference to the first one but a step is a step.

Screenshots
Image
Image

Desktop (please complete the following information):

  • OS: Ubuntu 24.04 (64-bit)
  • Browser Firefox
  • Version 134.02

Smartphone (please complete the following information):
/

Additional context
I surely don't have the best way to do it neither really understand the message. Please correct me if i'm wrong !

@dorydaniel
Copy link

I'm facing the same issue as you on Windows 11 OS, and Chrome browser

@tusharrjoshi
Copy link

Do anyone got solution to this issue ?

@CasahDev
Copy link
Author

I tried to debug it but it was to complicated for me so i made my own ffmpeg wasm from scratch for my own use case.

@tusharrjoshi
Copy link

Can you please share that ? I'm stucking and the process is too complicated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants