Code Monkey home page Code Monkey logo

ffmpeg.wasm's Introduction

ffmpeg.wasm

ffmpeg.wasm

ffmpeg.wasm is a pure Webassembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.

stability-experimental Node Version Actions Status npm (tag) Maintenance License: MIT Downloads Total Downloads Month Netlify Status

Join us on Discord!

Discord

Documentation

Please sponsor ffmpeg.wasm to make it sustainable. ❤️

ffmpeg.wasm's People

Contributors

ad-m avatar alsotang avatar avi12 avatar caugner avatar cs8425 avatar dependabot[bot] avatar dtinth avatar duncanbeevers avatar fytriht avatar iliashad avatar jeffxz avatar jeromewu avatar josephrocca avatar kylmakalle avatar lostbeard avatar matvp91 avatar narazaka avatar nxtexe avatar paulkinlan avatar rosenrose avatar santosh898 avatar selmalee avatar sociosarbis avatar swaylq avatar sxxov avatar ttodua avatar valcosmos avatar wesleybatista avatar willy-jl avatar yogiliu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ffmpeg.wasm's Issues

TypeError: Cannot read property 'charAt' of undefined

Describe the bug
I was trying to implement Concat demuxer this way,

const concatDemux = (texFilePath, outputPath, opts = '', del = false, jobId) => { run(${opts} -f concat -safe 0 -i /data/${texFilePath} -c copy ${outputPath}, { del }, jobId); };

Got Error saying

ffmpeg-core.js:40 Uncaught (in promise) TypeError: Cannot read property 'charAt' of undefined at Qb (ffmpeg-core.js:40) at Object.open (ffmpeg-core.js:91) at Object.readFile (ffmpeg-core.js:96) at run$ (index.js:130) at tryCatch (runtime.js:45) at Generator.invoke [as _invoke] (runtime.js:271) at Generator.prototype.<computed> [as next] (runtime.js:97) at tryCatch (runtime.js:45) at invoke (runtime.js:135) at eval (runtime.js:170)

To Reproduce
Steps to reproduce the behavior:

  1. git clone https://github.com/santosh898/ffmpeg.js
  2. See example concatDemux.html

Expected behavior
Input video to concat with itself without error.

Consider renaming the project

Hi!

I like your project and I definetely haven't paid attention to ffmpeg.js for some time but in my opinion using exactly same name for different projects might create confusion.

Could you consider using some different name for your project? E.g. ffmpeg.wasm since you're targeting WebAssembly, or some other option.

Thank you.

Add stdin stream support.

Many applications stream STDIN to allow ffmpeg to encode from a data source that is not a file, or a data source that will never end (i.e, livestreaming a web cam).

Right now the lib can't support it because stdin read in WASM needs to be blocking (which freezes the thread) and this means the event loop is frozen too so that data that would have been sent via postMessage can't be processed.

Describe the solution you'd like
I added stdin buffer support to a fork of the other ffmpeg.js that allows STDIN to be read inside a worker. PaulKinlan/ffmpeg.js#1

It uses SharedArrayBuffers to communicate between the window and the worker, so this limit's it to Chrome on Desktop at the moment. It does however allow ffmpeg to block on stdin and then recieve data from the window asynchronously.

codec copy issue

@jeromewu , In trimming you have used -c copy argument.

By the use of that argument some video doesn't play well.I faced an problem of video not play well. Kindly remove that and re-encode the video.

Steps to reproduce the behavior:

 const { createWorker } = FFmpeg;
 const worker = createWorker({
        corePath: '../../ffmpeg-core.js'
 });
 await worker.load();
 await worker.write('trim.mp4', videourl);
 await worker.trim('trim.mp4', 'trimmed.mp4', `00:10`, `00:20`);
 const { data } = await worker.read('trimmed.mp4');
 var __Blobdata = new Blob([data.buffer], { type: 'video/mp4' });
 var trimedurl = URL.createObjectURL(__Blobdata); 

For testing check this link

https://codepen.io/vasanthudhaya/pen/KKKxewL

Expected behavior

1.Cut a video, with re-encoding.

Reference Link:
Trim with re-encoding

Desktop

OS: [windows]
Browser [chrome]
Version [7]

Calling terminate() throws an error

Describe the bug
Calling terminate() on the ffmpeg worker throws the following error:
TypeError: (intermediate value)[act] is not a function
Edit: It is also undocumented in the API section.

To Reproduce
Edit the transcode example at line 40: https://github.com/ffmpegjs/ffmpeg.js/blob/master/examples/browser/transcode.html#L40
and add await worker.terminate();

Expected behavior
This should not create an error but simply terminate the underlying web worker and hence, the underlying transcoding job.

Desktop (please complete the following information):
Latest Chrome and Firefox on Windows

pkg-config missing when configuring ffmpeg in docker

I'm able to download the docker image in part 2 of the manual and run it via the following:

sudo docker run -it
-v $PWD:/src
trzeci/emscripten:1.38.45
/bin/bash

but when I try to configure ffmpeg to built with the following:

emconfigure ./configure --disable-x86asm --disable-inline-asm --disable-doc --disable-stripping --nm="llvm-nm -g" --ar=emar --cc=emcc --cxx=em++ --objcc=emcc --dep-cc=emcc

I get this returned at the end:

WARNING: pkg-config not found, library detection may fail.

I try to build it with emmake make -j4 and it builds, but not clean. This is the end output:

8 warnings generated.
AR libavdevice/libavdevice.a
AR libavfilter/libavfilter.a
AR libavformat/libavformat.a
AR libavcodec/libavcodec.a
AR libswresample/libswresample.a
AR libswscale/libswscale.a
AR libavutil/libavutil.a
LD ffmpeg_g
emcc:WARNING: ignoring unsupported linker flag: --as-needed
emcc:WARNING: ignoring unsupported linker flag: -z
emcc:WARNING: ignoring unsupported linker flag: noexecstack
emcc:WARNING: ignoring unsupported linker flag: --warn-common
emcc:WARNING: ignoring unsupported linker flag: -rpath-link=libpostproc:libswresample:libswscale:libavfilter:libavdevice:libavformat:libavcodec:libavutil:libavresample
LD ffprobe_g
emcc:WARNING: ignoring unsupported linker flag: --as-needed
emcc:WARNING: ignoring unsupported linker flag: -z
emcc:WARNING: ignoring unsupported linker flag: noexecstack
emcc:WARNING: ignoring unsupported linker flag: --warn-common
emcc:WARNING: ignoring unsupported linker flag: -rpath-link=libpostproc:libswresample:libswscale:libavfilter:libavdevice:libavformat:libavcodec:libavutil:libavresample
CP ffmpeg
CP ffprobe
STRIP ffmpeg
skipping strip ffmpeg
STRIP ffprobe
skipping strip ffprobe

Continuing with the instructions, I then run emmake make -n. At this point it spits out so much stuff, that the manual is no longer able to be followed.

Importing into Create React App

I'm trying to import this library into a Create React App (that uses webpack)

I posted this on Stackoverflow to try and get some help cos I'm sure it's a basic question.

https://stackoverflow.com/questions/60807852/running-ffmpegjs-in-a-react-project

When I try import {createWorker} from '@ffmpeg/ffmpeg';

Build fails with:

./node_modules/@ffmpeg/ffmpeg/src/createWorker.js
Module parse failed: Unexpected token (21:4)
You may need an appropriate loader to handle this file type.
|     logger,
|     progress,
|     ...options
|   } = resolvePaths({
|     ...defaultOptions,

Node v 12.2

Generating movie from images in memory

I'm trying to convert a Canvas animation into a video. As the animation may not run at 60fps I'm thinking I want to create a still image of each frame like so

thumbnailCanvas.toDataURL('image/jpeg', 1);

and then stitch them all back together to make the video.

As I want this to run completely client side, I don't have the option of creating a temp /images folder and iterating over that.

Is this possible with ffmpeg.js? I've been playing around with worker.run(... but can't seem to figure out the correct arguments and options.

Thanks for any help (and awesome lib btw!)

Unable to use ffmpeg.js inside Web Worker

I'm trying to use ffmpeg.js inside a web worker to "transcode" JPEG images into a 1 second MPEG-1 video:

setInterval(function () {
    ctx.drawImage(player, 0, 0, w, h);
    var imgString = canvas.toDataURL('image/jpeg', 0.9);
    if(currFrame < maxFrames) {
        canvas.toBlob(function(blob) {
            var bufferPromise = blob.arrayBuffer();
            bufferPromise.then(array => {
                frames[currFrame] = array;
            })
        }, 'image/jpeg', 0.9);
        currFrame++;
    } else {
        mpegWorker.postMessage([frames])
        currFrame = 0;
    }
}, 1000 / frameRate)

MPEG Worker:
mpegWorker.js

importScripts("https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js");
importScripts('https://cdn.jsdelivr.net/npm/@ffmpeg/[email protected]/ffmpeg-core.min.js')

onmessage = function(e) {
    var images = e.data[0]
    console.log('Got frames: ' + images.length) // 30 frames

    // Need to generate MPEG1 video (1 second)

    var memfs = [];
    var args = ['-framerate', '30', '-i'];
    for (var i =0;i<images.length;i++) {
        var n = 'img-'+pad(i, 3)+'.jpg'
        memfs.push({name: n, data:images[i]})
        args.push('-i');
        args.push(n);
    }

    // Reference: https://github.com/phoboslab/jsmpeg
    // `ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts`
    args = args.concat(args, ['-f', 'mpegts', '-codec:v', 'mpeg1video', '-codec:a', 'mp2', '-b', '0', 'out.ts'])

    console.log('Arguments: ' + args)

    var ffmpeg = require("ffmpeg.js");

    var result = ffmpeg({
        MEMFS: memfs,
        stdin: function() {},
        arguments: args,
    });
    console.log(result.MEMFS.length)
    if(result.MEMFS.length>0){
        var out = result.MEMFS[0].data;
        // Convert MPEG-TS to blob
        // postMessage(blob)
    }
    
}

function pad(number, length) {
    var str = '' + number;
    while (str.length < length) {
        str = '0' + str;
    }
    return str;
}

....however ffmpeg.js wont load:

require.js:168 Uncaught Error: Module name "ffmpeg.js" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:168)
    at Object.localRequire [as require] (require.js:1433)
    at requirejs (require.js:1794)
    at onmessage (mpegWorker.js:25)

Also in the case of MPEG-1 what is the type of blob that is in the output: var out = result.MEMFS[0].data the encoding is based on the recommendation from JSMPEG docs (see reference)

Incorrectly splitting on spaces in CLI args of `run` causes programs not to execute correctly

Describe the bug
The run command parses the command line parameters by breaking the command into an array that is bounded by a space. There are some ffmpeg commands that allow spaces because they are wrapped in a string. Specifically I am using -f webm_dash_manifest with the -adaptation_sets="id=0,streams=0 id=1,streams=1". But I would also imagine that drawText will fail too.

The issue is on this line: https://github.com/ffmpegjs/ffmpeg.js/blob/6101d4e32b22ccc3d77ce833d8cc83a82d894cc0/src/worker-script/index.js#L56

To Reproduce
Steps to reproduce the behavior:

  1. run a command that expects a space inside quotes.

Expected behavior
The run command should parse the spaces that are not enclosed in quotes as the delimiter, leaving the spaces in double or single quotes as an value in the parameter.

I'd argue a simpler option is to pass an array in of parameters that I can encode myself, just https://github.com/Kagami/ffmpeg.js does.

Additional context
Add any other context about the problem here.

Question: compress 8GB file to 800MB file before upload to server

I'm looking to compress an 8GB video in the browser prior to uploading it to a server. The goal is faster upload and the server does need that level of quality.

This is the exact command I use with ffmpeg which takes around 15 minutes when run natively:

ffmpeg -i testvideo.mp4 -c:v libx264 -preset slow -crf 25 -vf scale=720:-2 -x264-params keyint=25:keyint_min=25 -an -f mp4 output.mp4

Are there known memory limits or other limits I will hit using this library that will stop me achieving this goal?

Reduce build size to work in Cloudflare Worker?

I'm very new to web assembly, but ambitious, so I took your ffmpegjs and tried to build it for Cloudflare Workers by mashing it up with this: https://github.com/cloudflare/worker-emscripten-template

My immediate goal was simply learning which was of course successful, but what I'd like to be able to do is take a small video and output a screen grab at a specified time in the video. I'm guessing I'd hit their compute limit (50ms), but if I could even get a proof-of-concept with something super basic I would be happy.

Took me a bit of meddling, but I was finally able to get it to build using wrangler. I changed some stuff to get what I thought would make it run in a worker, but then hit this:

Built successfully, built project size is 7 MiB. Your built project has grown past the 1MiB size limit and may fail to deploy.

Is it at all feasible to rip stuff out and get the build down to that 1MiB size, or should I just put this on pause until workers supports larger asset sizes?

Consider adding how to use user input file to the documentations

Hello!
First of all, thank you for this library! It is pure awesome.
To the issue:
I spent many hours trying to figure out how to to properly use input file from users and write it to the filesystem (using worker.write()).
I ended up reading the file using FileReader and loading the buffer encoded as base64 to the worker.write() function.
Today I found out from a closed issue that you can actually pass to worker.write() an element.files[0] argument.
This is so much easier and would have saved me a lot of time.
In the API documentations:

Worker.write(path, data, jobId): Promise
...
data - data to write, can be Uint8Array, URL or base64 format

There is no option to pass a File object, and it would have surely helped me and probably would help others too.
Thank you.

Support RTMP

Tried to enable librtmp in ffmpeg and finds it out it is impossible to add RTMP at the moment as it uses socket, result in error like this:

RTMP_Connect0, failed to connect socket. 26 (Operation in progress)
rtmp://fms.105.net/live/rmc1: Unknown error occurred
/home/jeromewu/ffmpeg.js/src/createWorker.js:132
      throw Error(data);
      ^

Error: RuntimeError: memory access out of bounds
    at ChildProcess.onMessage (/home/jeromewu/ffmpeg.js/src/createWorker.js:132:13)
    at ChildProcess.emit (events.js:189:13)
    at emit (internal/child_process.js:820:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

No such file or directory Build with -s ASSERTIONS=1

Describe the bug
I run the code in example in my electron app and I change the settings and I got this error

Code

const { createWorker } = require('@ffmpeg/ffmpeg');

const worker = createWorker({
  logger: ({ message }) => console.log(message),
});

async function main() {
  const recorder = aperture();
  console.log('Screens:', await aperture.screens());
  const audioDevice = await aperture.audioDevices()
  console.log('Audio devices:', audioDevice[0].id);
  
  console.log('Preparing to record for 5 seconds');
  try {
 const load = await worker.load();
  console.log(load);
  const input =   await worker.write('ilias.mp4', path.resolve("/Users/mac/ilias/ilias.mp4"));
  console.log(input)
  const run = await worker.run('-i /data/ilias.mp4 flame.mp4', { input: 'ilias.mp4', output: 'flame.mp4' });
  console.log(run)


}
 catch(err) {

    console.log(err)
  
  }

}

Error

{
  workerId: 'Worker-0-d79e0',
  jobId: 'Job-0-7ca24',
  message: 'Loaded ffmpeg-core',
  data: undefined
}
{
  workerId: 'Worker-0-d79e0',
  jobId: 'Job-1-fe392',
  message: 'Complete writeFile',
  data: undefined
}
ffmpeg version 0.5.0-5-g092ad14f74 Copyright (c) 2000-2019 the FFmpeg developers
  built with emcc (Emscripten gcc/clang-like replacement) 1.39.0 ((unknown revision))
  configuration: --enable-gpl --enable-libx264 --disable-pthreads --disable-x86asm --disable-inline-asm --disable-doc --disable-stripping --disable-ffprobe --disable-ffplay --disable-ffmpeg --prefix=/workspace/FFmpeg/build --extra-cflags=-I/workspace/FFmpeg/build/include --extra-cxxflags=-I/workspace/FFmpeg/build/include --extra-ldflags=-L/workspace/FFmpeg/build/lib --nm='llvm-nm -g' --ar=emar --cc=emcc --cxx=em++ --objcc=emcc --dep-cc=emcc
  libavutil      56. 22.100 / 56. 22.100
  libavcodec     58. 35.100 / 58. 35.100
  libavformat    58. 20.100 / 58. 20.100
  libavdevice    58.  5.100 / 58.  5.100
  libavfilter     7. 40.101 /  7. 40.101
  libswscale      5.  3.100 /  5.  3.100
  libswresample   3.  3.100 /  3.  3.100
  libpostproc    55.  3.100 / 55.  3.100
/data/ilias.mp4: No such file or directory
13
13
abort(13). Build with -s ASSERTIONS=1 for more info.

Error when using image via NodeJs buffer

Hi Jerome (@jeromewu ),
Thanks for sharing this library!

Describe the bug
When my input image is loaded into a NodeJs Buffer object, then I get an error when writing that buffer into the worker instance:

10 Mar 20:16:48 - Error: TypeError: Cannot read property 'FS' of null
at Worker. (/home/pi/.node-red/node_modules/@ffmpeg/ffmpeg/src/createWorker.js:177:13)
at Worker.emit (events.js:311:20)
at MessagePort. (internal/worker.js:165:55)
at MessagePort.emit (events.js:311:20)
at MessagePort.onmessage (internal/worker/io.js:78:8)

Screenshots
Here you can see that I write the Buffer (containing an image):

image

P.S. the msg.payload contains the NodeJS buffer instance ...

Had also tried to convert it to an UInt8Array (see line 48), but that also fails:

image

Desktop (please complete the following information):

  • OS: Raspbian (On Raspberry PI system)
  • NodeJs version 12

Do you have any idea how I could solve this issue?

Thanks for your time!!!
Bart Butenaers

ffmpeg.js building hangs indefinitely at configure step

The build-with-docker.sh scripts hangs forever at the configure step for building the ffmpeg.js source. I have been running the script on MacOS and Ubuntu, same result.

Last executed command:
configure: ./configure --enable-gpl --enable-libx264 --enable-libvpx --enable-libwebp --disable-pthreads --disable-x86asm --disable-inline-asm --disable-doc --disable-stripping --disable-ffprobe --disable-ffplay --disable-ffmpeg --prefix=/src/build --extra-cflags=-I/src/build/include --extra-cxxflags=-I/src/build/include --extra-ldflags=-L/src/build/lib --nm=llvm-nm -g --ar=llvm-ar --as=llvm-as --ranlib=llvm-ranlib --cc=emcc --cxx=em++ --objcc=emcc --dep-cc=emcc

Suggestion: Tell people about the `logger` option of the `createWorker` function in thrown error messages

Is your feature request related to a problem? Please describe.
It took me a few hours of playing around debugging things because I didn't realise that the createWorker function has a logger option.

Describe the solution you'd like
When an error is thrown, include a message telling people that they can enable the logger for more context. This could be done with a console.errorbefore the throw, or within the error message itself.

Describe alternatives you've considered
Providing descriptive error messages might be hard to maintain as the underlying ffmpeg.wasm is upgraded, so simply telling them about the logger is probably an easier solution.

Additional context
This is only semi-related, but I noticed that Chrome will sometimes crash instead of throwing an error. I had to use Firefox to get the error message, which wasn't descriptive ("runtime error" or "compile with ASSERTION" or something), but that eventually led me to the discovery of the logger option.

Thanks for you work on this great library! It's quite a bit faster than I was expecting.

Type error when calling worker.terminate() inside main script

Describe the bug
When trying to call the terminate function on my worker object inside my main script I get the following error as shown in the screenshots section.

To Reproduce
The following code is similar to the webcam example with parameters for recorded data from the "video.js-record" plugin
async (recordedData, name = recordedData.name) => { const {createWorker} = FFmpeg; let worker = createWorker({ logger: (m) => { console.log(m); }, progress: (p) => { console.log(p); } }); await worker.load(); await worker.write(name, recordedData); await worker.run("-i ${name} -c:v libx264 -preset superfast -vf scale=iw/2:ih/2 -crf 30 -tune zerolatency -profile:v baseline output.mp4"); const {returnData} = await worker.read('output.mp4'); await worker.remove("output.mp4"); await worker.terminate(); return new Blob([returnData.buffer], {name: recordedData.name, type: 'video/mp4'}); };

Expected behaviour
The web worker terminates and closes the thread it is in without error.

Screenshots
image

Desktop (please complete the following information):

  • Chrome 81.0.4044.113

Can i apply to mobile?

I have used it in H5 and it has no problem on my PC browser, but when I open the link in my phone, it does not work. so ffmpeg.js not support mobile(Android)?

Provide multi-purpose Worker.run(args, options)

Is your feature request related to a problem? Please describe.
So far, I have been using videoconverter.js, which provided a general-purpose ffmpeg_run() method that took arguments and files and returned a list of files as a result.

Describe the solution you'd like
It would be great if ffmpeg.js could offer an equivalent method. This would allow easy migration from videoconverter.js.

Describe alternatives you've considered
Alternatively, there could be a guide on how to migrate from videoconverter.js.

Additional context
One use case is giving ffmpeg an audio file and exporting several extracts into individual files:

// ffmpeg -i input.wav -map 0 -c copy -f segment -segment_time 120 -reset_timestamps 1 out%02d.wav

const blob = new Blob(/** from user */, { type: "audio/wav" });
const file = new File([blob], 'input.wav');

const fs = require('fs');
const { createWorker } = require('@ffmpeg/ffmpeg');

const worker = createWorker();

(async () => {
  await worker.load();
  const { files } = await worker.run('-i input.wav -map 0 -c copy -f segment -segment_time 120 -reset_timestamps 1 out%02d.wav', { files: [file] });
  files.forEach(file => fs.writeFileSync(file.name, file.data));
})();

Can't concat multiple videos

Thank you for creating this library. I found a bug.

Describe the bug
I'd like to concat multiple videos. I made a codepen sample.
https://codepen.io/kwst/pen/xxbJrQg?editors=1010

I got this error on concating videos...
image

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://codepen.io/kwst/pen/xxbJrQg?editors=1010
  2. Select multiple video files
  3. An error occurs

Expected behavior
Concat 1 video file like this reference.
https://trac.ffmpeg.org/wiki/Concatenate

Desktop (please complete the following information):

  • macOS Mojabe 10.14.6
  • Chrome
  • Version 79.0.3945.79

Browser: Revert to MEMFS and transfer ownership of Transferable objects

Is your feature request related to a problem? Please describe.
As mentioned by me in #8, IndexedDB has some strong limitations with regard to the size of individual items. This makes it impossible to work with files larger than 133 MB (Chrome) or 267 MB (Firefox).

Describe the solution you'd like
As hinted by @LucCADORET in the same issue, reverting to MEMFS and transferring the ownership of the Transferable objects (ArrayBuffer) by additionally passing them as the second parameter (transfer) of Worker.postMessage() should solve this problem:

worker.postMessage(message, arrayBuffersContainedInMessage);

Describe alternatives you've considered
I don't know of any alternative solution.

Additional context
(None for now.)

Is it possible to transcode while recording with MediaRecorder?

I am currently transcoding videos recorded from the WebCam with MediaRecorder and converting them to mp4 so that they can be played back in Safari. Very similar to what is happening in this example.

I was wondering though whether it would be possible to convert on the fly as the ondataavailable event fires with each new blob instead of waiting until the end? If you pass a chunk size to the MediaRecorder.start() method then ondataavailable fires each time that amount of time passes. This would save some time at the end with the conversion process if you could example transcode in 5 second increments. If this is possible what would the best approach be?

I tried doing this and it kind of works. The issue is at the end you have a bunch of separate mp4 files and you need to merge them back together somehow. Also sometimes ondataavailable fires with small or incomplete chunks and ffmpeg gives an error about invalid data being passed in.

Any help with this would be greatly appreciated.

License of ffmpeg-core.js

Hey Wen-Chieh,
Thank you for the permissively licensed library,

Comnig to the query, Can you elaborate what has been compiled into ffmpeg-core.js & your advice in using ffmpeg.js in a commerical project.

Firefox freezes after Worker is created and loaded

Describe the bug
Firefox freezes after worker is created and loaded.

To Reproduce
Steps to reproduce the behavior:

  1. See repository: https://github.com/caugner/vue-ffmpeg-worker-firefox-freeze
  2. git clone https://github.com/caugner/vue-ffmpeg-worker-firefox-freeze
  3. cd vue-ffmpeg-worker-firefox-freeze
  4. yarn install
  5. yarn serve
  6. Open http://localhost:8080 in Firefox.
  7. Notice how the UI freezes (the website itself does not always freeze).

See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1608440

Expected behavior
Since ffmpeg is run in a worker, it should not freeze the browser.

Screenshots
(Not applicable.)

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser Firefox Nightly
  • Version 74.0.a1 (2020-01-09)

Smartphone (please complete the following information):
(Not applicable)

Additional context

  • I'm using Webpack's worker-loader with Vue.
  • videoconverter.js does not have this issue (same approach).

can use to play RTSP stream on web?

i want play rtsp stream on web, the simple code is

(async function () {
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: './ffmpeg.js/ffmpeg-core.js',
progress: (p) => console.log(p),
logger: ({ message }) => console.log(message)
});

        document.getElementById('play').addEventListener('click', async function() {
            let rtsp = document.getElementById('rtsp').value; // some rtsp url
            await worker.load();

            // await worker.run('-rtsp_transport tcp -i '+ rtsp +' out.mp4', { output: 'out.mp4' })
            const { data } = await worker.read('out.mp4');

            const video = document.getElementById('output-video');
            video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
            await worker.terminate();
        });
    })();

Opening an input file: rtsp://admin:[email protected]:554/h264/ch1/main/av_stream. demo2.html:29 [tcp @ 0x1175400] No default whitelist set demo2.html:29 [tcp @ 0x1175400] Original list of addresses: demo2.html:29 [tcp @ 0x1175400] Address 192.168.0.234 port 554 demo2.html:29 [tcp @ 0x1175400] Interleaved list of addresses: demo2.html:29 [tcp @ 0x1175400] Address 192.168.0.234 port 554 demo2.html:29 [tcp @ 0x1175400] Starting connection attempt to 192.168.0.234 port 554 2demo2.html:29 Assertion failed: undefined 2demo2.html:29 abort(Assertion failed: undefined). Build with -s ASSERTIONS=1 for more info.

this is some logs.

Handling large files

First of all, great job on the library.

I have been trying to find a library to convert .mkv to .mp4 (which is basically changing the container while keeping all the codecs most of the type, so pretty fast), but I am struggling with it. videoconverter.js, and ffmpeg.js (from @Kagami) are both failing at handling "large" files. My test file is 149. MiB, and if always end up with a memory overflow crash (in node and in browsers).

I have been doing the test with the same file with this new library, and I stumble upon "RangeErrors", again both in node and browser version. (JSON.stringify when sending the message to the child process seems to be the part where is fails, in node).

I think that the library should be able to handle larger files, as being able to convert video files is pretty much useless if you can't handle files with 'real world case' sizes.

Progress ratio not correct

Describe the bug
I'm transcode from webm to mp4 (using default parameters)

To Reproduce

const worker = createWorker({
    logger: ({ message }) => console.log(message),
    progress: p => console.log(p)
  });
worker.transcode('input', 'output.mp4')

Expected behavior
show the progress

Screenshots
log:

Object {ratio: NaN}
frame=   59 fps= 54 q=31.0 size=       0kB time=00:00:00.25 bitrate=   1.5kbits/s speed=0.229x     
Object {ratio: NaN}
frame=   71 fps= 24 q=31.0 Lsize=      17kB time=00:00:01.13 bitrate= 126.3kbits/s speed=0.386x     
Object {ratio: 1}

Desktop (please complete the following information):

  • OS: Windows 10 OS Version 1909 (Build 18363.720)
  • Browser: Google Chrome
  • Version: 80.0.3987.163 (Official Build) (64-bit) 
  • JavaScript: V8 8.0.426.30

Additional context
I think a possible solution is to add more options and try different forms to calculate the progress
I'll comment if I find a possible solution.

RuntimeError: memory access out of bounds. using filter_complex in browser

I am getting this error while making slideshow from image.
This happens when I use filter_complex in command

await worker.write('img1.png', './images/img1.png');
await worker.run('-i img1.png -filter_complex "[0:v]zoompan=z='if(lte(zoom,1.0),1.1,max(1.001,zoom-0.0015))':d=125,fade=t=out:st=4:d=1[v1]" -map "[v1]" -c:v libx264 -pix_fmt yuv420p out.mp4', { output: 'out.mp4' });

The error displays like this

createWorker.js:177 Uncaught Error: RuntimeError: memory access out of bounds
at createWorker.js:177
at Worker.t.onmessage (onMessage.js:3)

Error: Uncaught Error: write EPIPE

Describe the bug
A clear and concise description of what the bug is.
image
image

Desktop (please complete the following information):

  • OS: OSX
  • Browser Chrome/78.0.3904.130 Electron/7.1.7

Init by

ffmpegWorker = createWorker({
  corePath: resolveRootPath('node_modules/@ffmpeg/core/ffmpeg-core.js'),
  ogger: m => logger.log(m)
})

When I run await ffmpegWorker.load(), it happened.

Get information on a video with -i

Hi,
Jerome, Thank you very much for this very useful ffmpeg.js !

The instruction :
await worker.run("-i "+name);
return :

At least one output file must be specified. Error: RuntimeError: index out of bounds. Uncaught exception: RuntimeError: index out of bounds

It would be great if "-i" to get informations on videos was possible.

Thank you !

Video decode

Hi @jeromewu

Is there any possibilities are there in this js to decode the video framesbyframes ?

Exception after & during encoding video

Describe the bug
I received an exception right after it finished encoding a video. On a second run, I received it while encoding a video. The video encoded successfully, however this was printed:

ffmpeg-core.js:58 Uncaught (in promise) TypeError: Cannot read property 'mode' of undefined
    at Object.Vl (ffmpeg-core.js:58)
    at ffmpeg-core.js:61
    at IDBRequest.a.onsuccess (ffmpeg-core.js:59)
Vl	@	ffmpeg-core.js:58
(anonymous)	@	ffmpeg-core.js:61
a.onsuccess	@	ffmpeg-core.js:59
Promise.then (async)		
c	@	worker.min.js:1
a	@	worker.min.js:1
(anonymous)	@	worker.min.js:1
(anonymous)	@	worker.min.js:1
(anonymous)	@	index.js:29
e.dispatchHandlers	@	index.js:111
(anonymous)	@	index.js:6

I listened to the logger event, and the last thing to be printed before this was:

{workerId: "Worker-0-a7784", action: "run", type: "stderr", message: "[libx264 @ 0x117ea80] kb/s:1596.47"}

I also received this warning repeatedly as I was sending frames to the worker:

warning: 2 FS.syncfs operations in flight at once, probably just doing extra work

I've seen that warning before when using the Emscripten file-system, and AFAIK it was benign but I could be wrong (never used the IndexedDB file system).

This only seemed to occur after listening to the progress event, but that could just be a coincidence.

To Reproduce
Listen to the progress event and send many frames over.
It currently reproduces on this site: https://trevorsundberg.github.io/caketown/
If you click the button on the bottom right, it will render and encode the video. I don't currently have a minimum repro, but I'll work on it if I get time.
The git repo for that site: https://github.com/TrevorSundberg/caketown/

Expected behavior
No exception and warning.

Desktop (please complete the following information):

  • OS: Ubuntu 18.10
  • Browser: Chrome
  • Version: 79

Crash the browser with WebM

Describe the bug
A clear and concise description of what the bug is.

I'm trying to set the output to webm, the browser crashes on the transcode.

I assume I need to specify the codec?

This is in the output

image

Getting error from @ffmpeg/core-wasm

Describe the bug
Hi, thanks for your greate repo. I am trying to use @ffmpeg/core-wasm instead of @ffmpeg/core in your example /transcode.html. But I got the error

ffmpeg-core.js:27 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from ffmpeg-core.wasm

image

To Reproduce
What I did is just changing this line into

corePath: '../../node_modules/@ffmpeg/core-wasm/ffmpeg-core.js',

and of course I have installed @ffmpeg/core-wasm beforehand.

I suspect it hasn't handle the wasm file url properly.

Please let me know if I did anything wrong.

PS: It takes around 30s to transcode a video(480p, 4s duration, 300KB+) from h265 to h264, but only takes around 2s using native ffmpeg. Not sure which part slows down the Webassembly module.

iOS Performance

Not exactly a bug, but could someone with a Mac investigate why worker.load takes so long on iOS Safari? I'm using this library to ponyfill webm support on iOS, and everything besides the startup time is great!

To Reproduce
Steps to reproduce the behavior:

  1. Start a worker with createWorker
  2. Observe how long worker.load takes.

Expected behavior
It should take less than a minute at most.

Smartphone (please complete the following information):

  • Device: iPhone6S and iPad Air
  • OS: iOS13 and iOS12
  • Browser MobileSafari

Use text/javascript MIME type instead of application/javascript

Hello and thanks for this promising library,

In src/worker/browser/spawnWorker.js, would not it be better to replace application/javascript by text/javascript as the latter is the correct MIME TYPE for js (see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)?

I am pointing this out because I encountered a bug using ffmpeg.js in IE11 (with the pure js ffmpeg-core version not the WebAssembly one) where the importScripts method of the web worker throws a NetworkError. And consulting MDN, this method throws when the MIME type of the script in argument is wrong (see https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts).

Now, I changed the MIME type to text/javascript and still got the error but I guess it cannot hurt to abide by the standard. And by the way, is ffmpeg.js supposed to work in IE11?

Allow configuring stderr/stdout

Currently, the module prints data to stdout/stderr, which is undefined when using the library in a web worker. Catching the data can be really useful when you want to get information on the files (what are the codecs, the size of the file, that sort of things).

What would be nice, is to be able to override the "print" and "printErr" callbacks of the module, to catch the output data of ffmpeg. https://emscripten.org/docs/api_reference/module.html

Missing output files when run as HLS muxer on browser

Describe the bug
On the browser, ffmpegjs appears to successfully segment an input video into multiple HLS files. However, read() fails for the .ts files, and only succeeds on the .m3u8 file.

To Reproduce

await worker.run("-i input.mkv -s 320x200 -c:v h264 -flags +cgop -g 30 -hls_time 2 out.m3u8");
const { data } = await worker.read('out.m3u8');
console.log(data);  // Succeeds; prints out a m3u8 file listing "out0.ts"
const { data0 } = await worker.read('out0.ts');
console.log(data0);  // Fails; prints `undefined`.

Running ffmpeg at the command-line with these options produces an "out0.ts" file.

Expected behavior
Above, data0 should be defined and contain the first 2 seconds of the input video.

Additional context
Logging contains these messages:

[hls @ 0x1529fc0] Opening 'out0.ts' for writing
Output #0, hls, to 'out.m3u8':

as well as:

[hls @ 0x1529fc0] Cannot use rename on non file protocol, this may lead to races and temporary partial files

Trimming issue

@jeromewu, Thanks for this wonderful repo.

My problem here is trimming a 5 min video to 10 sec. But the output video duration returns a wrong duration.

Kindly let know me if there any way to resolve this issue. That will be very helpful for me.

Steps to reproduce the behavior:

 const { createWorker } = FFmpeg;
 const worker = createWorker({
        corePath: '../../ffmpeg-core.js'
 });
 await worker.load();
 await worker.write('trim.mp4', videourl);
 await worker.trim('trim.mp4', 'trimed.mp4', `00:01:00`, `00:01:10`);
 const { data } = await worker.read('trimed.mp4');
var __Blobdata = new Blob([data.buffer], { type: 'video/mp4' });
var trimedurl = URL.createObjectURL(__Blobdata); 

Desktop

  • OS: [windows]
  • Browser [e.g. chrome]
  • Version [7]

cc: @caugner

Unable to transcode to mp3

Describe the bug
Calling transcode with a .mp3 output (with no options) results in an error:

Here's the relevant ffmpeg log:

Automatic encoder selection failed for output stream #0:0. Default encoder for format mp3 (codec mp3) is probably disabled. Please choose an encoder manually.
Error selecting an encoder for stream 0:0

I did some digging on this and found FFmpeg can be run with the command -acodec libmp3lame.
Adding that as the transcode options results in another error, with this log:

Unknown encoder 'libmp3lame'
Invalid encoder type 'libmp3lame'

To Reproduce

  1. createWorker, load and write any audio file as input
  2. transcode using .mp3 as the output extension

Expected behavior
worker.transcode succeeds creating mp3 output

Desktop:

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 80

Additional context

I looked into another javascript implementation of the ffmpeg library which has transcoding to MP3 implemented (https://js-audio-converter.com/) and noticed they have --enable-encoder=libmp3lame into the configuration log, while this version of the library does not.

image

Does this mean I need to comple FFmpeg with Emscripten on my own and add that configuration line to the build?

Please let me know if I'm doing something wrong here.

Thanks in advance.

Produces Angular Build Error "Unexpected token: punc ())"

Hi,
thanks to your plugin, I successfully convert videos to mp4. My problems is when I run ng build --prod

Describe the bug
To identify where the error was, I used ng build --prod --named-chunks --verbose --build-optimizer=false --source-map and got this error:

ERROR in education-education-module-ngfactory.491f3b07ab6e60c37d72.js from UglifyJs Unexpected token: punc ()) [./node_modules/@ffmpeg/ffmpeg/src/createWorker.js:135,0][education-education-module-ngfactory.491f3b07ab6e60c37d72.js:1489,4]

To Reproduce
I use Angular CLI: 6.2.4
Node: 12.16.1
OS: win32 x64
Angular: 6.1.9
The error occured when running ng build --prod

Additional context
With some research on the internet, I see that several people had the same problem with differents plugins. The problem was that there are extra comma.
So I search in createWorker.js if there were extra comma and indeed there are.
On line 134:
jobId, // here is extra comma
On line 141:
jobId, // extra comma too
On line 192:
setLogging(true); , // extra comma too`

When I delete all of these extra comma, my project build successfully, please include this fix.

please compile ffmpeg-core.js to wasm file type

now the size of ffmpeg-core.js file is amost 23mb ,is too big ,and i found the file contains base64 charactor, i guess this is wasm file,wasm file in other rep just 6mb, but i like this rep

Build with Linux instructions

Hi @jeromewu

Wish you a belated Happy New Year.

I Need an instructions for the complete compilation of ffmpeg js in linux machine.

You have given a docker compilation guide https://github.com/ffmpegjs/ffmpeg.js#tutorials. Kindly provide the compile instruction of linux without docker

How to Play H265(hev1 and hvc1)with ffmpeg.js

Thank you very much for your tutorial.
I tried to recompile ffmpeg according to your tutorial and added [libx265] to play H265 video in the browser.
However, I found that only the hvc1 format can be played, and the hev1 format cannot be played.
I see your tutorial is just about h264, do you have plans to support h265?
Or can you give some advice about H265?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.