Add Angular example

[jeromewu]

Add angular example here: https://ffmpegwasm.netlify.app/docs/getting-started/examples

[AAmeriyan]

+1

[codigo-francisco]

Is there any example about how to implement the library on Angular?

[tayl0r]

Should this example also work on Angular 16?

We're getting an issue where it doesn't seem to create the worker object. No errors in the console, the worker is being loaded from a blob http URL on localhost, and that URL works.

        if (!this.#worker) {
            this.#worker = classWorkerURL ?
                new Worker(new URL(classWorkerURL, import.meta.url), {
                    type: "module",
                }) :
                // We need to duplicated the code here to enable webpack
                // to bundle worekr.js here.
                new Worker(new URL("./worker.js", import.meta.url), {
                    type: "module",
                });

In the above code snippet, we're passing in a blob:http://localhost/..... string for classWorkerURL so it uses that and doesn't get into any of the new Worker() flows.

The worker object gets created, but then later when it checks if the worker exists, that check returns false and if you call sendMessage() on it, it fails.

            const id = getMessageID();
# this line gets skipped over as this.#worker returns a false type value
            this.#worker && this.#worker.postMessage({ id, type, data }, trans);
            this.#resolves[id] = resolve;
            this.#rejects[id] = reject;
            signal?.addEventListener("abort", () => {
                reject(new DOMException(`Message # ${id} was aborted`, "AbortError"));
            }, { once: true });
        });

update: we figured it out. our classWorkerURL was on a different origin so web workers didn't want to load it. network debug tab showed that the request didn't ever finish, which we missed when initially debugging.

[vovan1710]

Is there any example about how to implement the library on Angular?

Yes, described the solution here)

https://www.linkedin.com/pulse/web-based-video-conversion-from-webm-mp4-ffmpegwasm-hladchenko-wfejf/?trackingId=d9wnxEdbS%2FOhd%2Fye5xtGmQ%3D%3D

[123CarlosDaniel]

710 any solution for this ?