Browser example using unpkg.com CDN #580

LostBeard · 2023-09-12T15:21:28Z

LostBeard
Sep 12, 2023

This full web browser example loads all FFmpegWam files (UMD version) from the unpkg.com CDN.

It tests for multithread support via the crossOriginIsolated global var.

This includes an 'on the fly' patching of ffmpeg.js to allow setting the path of its worker programmatically. Pull #562 will make the patching unnecessary as it does the same thing. I will update this example as soon as that happens.

This example must be accessed in a browser via http:// or https://. file:// will not work.

<html>
    <head>
        <script src="index.js"></script>
    </head>
    <body>
        <video autoplay muted id="video-result" controls></video><br/>
        <button disabled id="load-button">Load ffmpeg-core (~31 MB)</button><br/>
        <button disabled id="transcode-button">Transcode webm to mp4</button><br/>
        <p id="log-div"></p>
        <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
    </body>
</html>

"use strict";

var ffmpeg = null;
var loadBtn = null;
var transcodeBtn = null;
var logDiv = null;
var videoEl = null;
var tryMultiThread = true;
const baseURLFFMPEG = 'https://unpkg.com/@ffmpeg/[email protected]/dist/umd';
const baseURLCore = 'https://unpkg.com/@ffmpeg/[email protected]/dist/umd';
const baseURLCoreMT = 'https://unpkg.com/@ffmpeg/[email protected]/dist/umd';

const toBlobURLPatched = async (url, mimeType, patcher) => {
    var resp = await fetch(url);
    var body = await resp.text();
    if (patcher) body = patcher(body);
    var blob = new Blob([body], { type: mimeType });
    return URL.createObjectURL(blob);
};

const toBlobURL = async (url, mimeType) => {
    var resp = await fetch(url);
    var body = await resp.blob();
    var blob = new Blob([body], { type: mimeType });
    return URL.createObjectURL(blob);
};

const fetchFile = async (url) => {
    var resp = await fetch(url);
    var buffer = await resp.arrayBuffer();
    return new Uint8Array(buffer);
};

const load = async () => {
    loadBtn.setAttribute('disabled', true);
    const ffmpegBlobURL = await toBlobURLPatched(`${baseURLFFMPEG}/ffmpeg.js`, 'text/javascript', (js) => js.replace('new URL(e.p+e.u(814),e.b)', 'r.workerLoadURL'));
    await import(ffmpegBlobURL);
    ffmpeg = new FFmpegWASM.FFmpeg();
    ffmpeg.on('log', ({ message }) => {
        logDiv.innerHTML = message;
        console.log(message);
    });
    // check if SharedArrayBuffer is supported via crossOriginIsolated global var
    // https://developer.mozilla.org/en-US/docs/Web/API/crossOriginIsolated
    if (tryMultiThread && window.crossOriginIsolated){
        transcodeBtn.innerHTML = 'Transcode webm to mp4 (multi-threaded)';
        await ffmpeg.load({
            workerLoadURL: await toBlobURL(`${baseURLFFMPEG}/814.ffmpeg.js`, 'text/javascript'),
            coreURL: await toBlobURL(`${baseURLCoreMT}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURLCoreMT}/ffmpeg-core.wasm`, 'application/wasm'),
            workerURL: await toBlobURL(`${baseURLCoreMT}/ffmpeg-core.worker.js`, 'application/javascript'),
        });
    } else {
        transcodeBtn.innerHTML = 'Transcode webm to mp4 (single-threaded)';
        await ffmpeg.load({
            workerLoadURL: await toBlobURL(`${baseURLFFMPEG}/814.ffmpeg.js`, 'text/javascript'),
            coreURL: await toBlobURL(`${baseURLCore}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURLCore}/ffmpeg-core.wasm`, 'application/wasm'),
        });
    }
    console.log('ffmpeg.load success');
    transcodeBtn.removeAttribute('disabled');
}

const transcode = async () => {
    transcodeBtn.setAttribute('disabled', true);
    await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
    await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']);
    const data = await ffmpeg.readFile('output.mp4');
    videoEl.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
}

addEventListener("load", async (event) => {
    loadBtn = document.querySelector('#load-button');
    loadBtn.addEventListener('click', async () => await load());
    loadBtn.removeAttribute('disabled');
    transcodeBtn = document.querySelector('#transcode-button');
    transcodeBtn.addEventListener('click', async () => await transcode());
    logDiv = document.querySelector('#log-div');
    videoEl = document.querySelector('#video-result');
    console.log('window loaded');
});

UnluckyForSome · 2023-10-05T13:10:34Z

UnluckyForSome
Oct 5, 2023

Hi LostBeard. Do you know why when I use this the loading times are so much longer than usual? Many thanks!

0 replies

LostBeard · 2023-10-05T13:19:51Z

LostBeard
Oct 5, 2023
Author

I have noticed that also. I am assuming it is due to using it directly from the CDN because the loading times are greatly improved when loading from the same server as the app.

1 reply

UnluckyForSome Oct 5, 2023

Thanks for the reply! 🙏 I tried modifying your code to select local files to see if it helped - but I was getting errors when I did this as I think your code is geared towards UNPKG patterns (i’m still pretty new to JavaScript!) - let me know if you have a version which takes these files locally as it would be greatly appreciated! J

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browser example using unpkg.com CDN #580

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

Browser example using unpkg.com CDN #580

LostBeard Sep 12, 2023

Replies: 2 comments · 1 reply

UnluckyForSome Oct 5, 2023

LostBeard Oct 5, 2023 Author

UnluckyForSome Oct 5, 2023

LostBeard
Sep 12, 2023

Replies: 2 comments 1 reply

UnluckyForSome
Oct 5, 2023

LostBeard
Oct 5, 2023
Author