Skip to content

FFmpeg won't load with Angular 18 #830

Closed

Description

@CasahDev

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 !

Activity

  1. dorydaniel commented on Mar 13, 2025

    @dorydaniel

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

  2. tusharrjoshi commented on Mar 26, 2025

    @tusharrjoshi

    Do anyone got solution to this issue ?

  3. CasahDev commented on Mar 26, 2025

    @CasahDev
    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.

  4. tusharrjoshi commented on Mar 26, 2025

    @tusharrjoshi

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

  5. CasahDev commented on Mar 29, 2025

    @CasahDev
    Author

    I'm sorry but that was for an internship and I cannot share the code but I use FFmpeg (libavcodec) and C++ with emscripten. it compiles me a new wasm file and a js file that i can import. like a normal wasm file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions