ffmpegwasm / ffmpeg.wasm

FFmpeg for browser, powered by WebAssembly
https://ffmpegwasm.netlify.app
MIT License
13.96k stars 809 forks source link

How to enable HTTPS protocol in ffmpeg.wasm? #295

Open KazuyaFCB opened 2 years ago

KazuyaFCB commented 2 years ago

In my code await ffmpeg.run("-i", "https://videoabcxyz.com", "output.mp4"), I got https protocol not found, recompile FFmpeg with openssl, gnutls or securetransport enabled error. I also tried to run await ffmpeg.run("-protocols"), it only shows HTTP protocol, not HTTPS protocol. But when I ran ffmpeg -protocols manually on the command line, it shows both HTTP and HTTPS. How to enable HTTPS protocol in ffmpeg.wasm?

I tried to recompile ffmpeg.wasm-core to enable HTTPS protocol based on these links (https://stackoverflow.com/questions/31514949/ffmpeg-over-https-fails and https://github.com/ffmpegwasm/ffmpeg.wasm-core) but I got error in this image image

Please help me fix that error!

Wardormeur commented 2 years ago

From my on experimentations, you should be fetching then writing into MEMFS for it to be accessible by the run function Such as

        const file = await FFmpeg.fetchFile(url)
        await ffmpeg.FS('writeFile', `myfile.mp4`, file);
        await ffmpeg.run(ffmpegCommand); // -i myFile.mp4
KazuyaFCB commented 2 years ago

@Wardormeur Is there a way to get the segment of the video from the url? For example, only take the first 5 seconds of that url, because using fetchFile will fetch all videos, so performance will be reduced. Actually I need to merge 2 segments of 2 urls (1 video, 1 audio), I tried to run ffmpeg -ss 0 -i "videoUrl" -ss 0 -i "audioUrl" -c copy -map 0:0 - map 1:0 -to 5 output.mp4 command manually on the command line, this command will merge the first 5 seconds of video and audio, and it ran successfully. But in my code: await ffmpeg.run("-ss", "0", "-i","videoUrl", "-ss", "0", "-i", "audioUrl", "-c", "copy", "-map", "0:0", "-map", "1:0", "-to", "5", "output.mp4"); I got https protocol not found, recompile FFmpeg with openssl, gnutls or securetransport enabled error. Do you know the way to enable https in ffmpeg.wasm?

P-PPPP commented 2 years ago

same, but currently i have some idea about that: is it possible to fetch the file stream and use ffmpeg.js which support unit8array to parse it on-the-fly?

KazuyaFCB commented 2 years ago

@P-PPPP I tried to used ffmpeg.js in this library (https://github.com/Kagami/ffmpeg.js), but I also got https protocol not found, recompile FFmpeg withopenssl, gnutls or securetransport enabled error. I also tried to replace https with http in ffmpeg.run() but I got Connection refused error :(

DerouineauNicolas commented 2 years ago

I'm also looking for a ffmpeg.wasm build with https support. Any link to a working compilation guide would be appreciated !

periman2 commented 1 year ago

I would love it if this functionality was built into it as well. I'm trying to input an hls stream .m3u8 file and it breaks while trying to fetch the .ts file chunks from the server saying the exact same error. I'll try downloading the .ts files as a workaround but I'm not certain it'll work like that.

Umbrien commented 1 year ago

@periman2 Have you found any workarounds? I'll be greateful for any.

gmluo2 commented 1 year ago

Unfortunately, ffmpeg.wasm does not support https connection. Actually emscripten changes socket connection to websocket connection to connect to server (obviously server side needs to offer SSL websocket API for connection). So, there is no sense to rebuild ffmpeg.wasm with openssl. The walkaround is to change source url protocol with http connection in ffmpeg.run command, and modify ffmpeg-core.js to use secured websocket url, wss://....

Dass1010 commented 1 year ago

May this from this article you will get answer click here

liodnik commented 9 months ago

Hello guys. Today I'm trying to do the same thing you did. Looks like it's a newer version of ffmpeg-wasm. Now it is possible to fetch file like in official page example. The KEY is in Emscripten file system.

    const transcode = async () => {
        const ffmpeg = ffmpegRef.current;
        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');
        videoRef.current.src =
            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    }

But I still have problem with HLS converting -- "Output file #0 does not contain any stream." In terminal (with ffmpeg -i url -c copy output.mp4) it works fine.

WBRK-dev commented 4 months ago

Hey guys, Allowing https and http protocols is as easy as adding -protocol_whitelist file,http,https,tcp,tls to the command.

The js function should look something like this:

async function transformM3u8File(m3u8File) {
    await ffmpeg.writeFile('input.m3u8', await FFmpegUtil.fetchFile(m3u8File));
    await ffmpeg.exec(['-protocol_whitelist', 'file,http,https,tcp,tls', '-i', 'input.m3u8', '-acodec', 'copy', '-vcodec', 'copy', 'output.mp4']);
    const data = await ffmpeg.readFile('output.mp4');
    const url = URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    console.log(url);
    downloadFile(url);
}

Unfortunately this still does not work. It gets stuck on reading a segment manifest... [hls @ 0xde7c70] Opening 'http://localhost:47043/api/cors?url=https%3A//mmd.biananset.net/_v7/3c271a6...bb13fba4/index-f1-v1-a1.m3u8' for reading