Please add browser build of ffmpeg.js

[zackees]

Right now the internet is stuck on ffmpeg wasm because of the shared array buffer issue. The solution apparently is a single threaded version of ffmpeg.js

Right now you have a node version. This request is to have a build for the browser version. This would open up a whole bunch of excited tooling to really accelerate video and audio editing in the browser.

[thiagorb]

@zackees this package already works on the browser, but it is also a single threaded build. You can use the Web Worker version and run multiple instances in parallel to process multiple files, but a single file can only be processed in a single thread.

[zackees]

Here's an example that I created:

https://www.zaxtunes.com/client_transcoder/

Now everyone trying to find the same thing can just use my code instead.

Cheers,
Z

[brunoluiz]

@zackees Aren't you using https://github.com/bgrins/videoconverter.js instead tho? At least this is what is in the header of the ffmpeg-asm.js you pointed out in the H1 of your website.

/*
Most files in FFmpeg are under the GNU Lesser General Public License version 2.1
or later (LGPL v2.1+). Read the file COPYING.LGPLv2.1 for details. Some other
files have MIT/X11/BSD-style licenses. In combination the LGPL v2.1+ applies to
FFmpeg.
The source code used to build this file can be obtained at https://github.com/bgrins/videoconverter.js,
and in zip form at https://github.com/bgrins/videoconverter.js/archive/master.zip
*/

[zackees]

https://github.com/bgrins/videoconverter.js doesn't know how to seperate responsibilities, the gui code is intrained with the ffmpeg stuff. My example is entirely separate.

[siebediels]

@zackees Is this example still available somewhere? I'm also struggling to use ffmpeg.js in the browser. The NPM build seems to be using some process.stdin() methods which aren't available in browser (#137). I would like to use it in a normal webpack app, e.g.

import ffmpeg from 'ffmpeg.js'; // Import node_module

const result = ffmpeg({
  MEMFS: [{ name: 'test.mkv', data: new Uint8Array() }], // Uint8Array is of course filled with actual data
  arguments: ['-i', 'test.mkv', '-c:v', 'rawvideo', '-an', 'out.webm'],
});

[zackees]

I was able to find a working version in another code repo somewhere but it was SOOOOOOOOOOO SLOWWWW it wasn't worth it.

[eulphean]

@siebediels - did you ever find a solution to this? @zackees, I can't access https://www.zaxtunes.com/client_transcoder/ \ anymore. Are you using ffmpeg.js or ffmpeg.wasm? I believe the only solution right now for this issue is to use this library instread https://github.com/ffmpegwasm/ffmpeg.wasm

[zackees]

I've made the repo public and you can clone to this commit:

zackees/zaxtunes.com@e3d438e

[DerStimmler]

I'm using vite with the plugin "vite-plugin-require".

import { defineConfig } from 'vite';
import vitePluginRequire from "vite-plugin-require";

export default defineConfig({
    plugins: [
        vitePluginRequire.default()
    ]
});

That way I can use require in the browser as shown in the readme.

const ffmpeg = require("ffmpeg.js/ffmpeg-mp4.js");

Works fine but I haven't tried the web worker yet.

[wukongyang]

我正在使用带有插件“ vite-plugin-require ”的 vite。

import { defineConfig } from 'vite';
import vitePluginRequire from "vite-plugin-require";

export default defineConfig({
    plugins: [
        vitePluginRequire.default()
    ]
});

这样，我就可以在浏览器中使用 require，如自述文件中所示。

const ffmpeg = require("ffmpeg.js/ffmpeg-mp4.js");

运行良好，但我还没有尝试过 Web Worker。

我正在使用带有插件“ vite-plugin-require ”的 vite。

import { defineConfig } from 'vite';
import vitePluginRequire from "vite-plugin-require";

export default defineConfig({
    plugins: [
        vitePluginRequire.default()
    ]
});

这样，我就可以在浏览器中使用 require，如自述文件中所示。

const ffmpeg = require("ffmpeg.js/ffmpeg-mp4.js");

运行良好，但我还没有尝试过 Web Worker。

你好请问你在浏览器端正常使用了吗？我从npm上安装的版本会报错

[DerStimmler]

@wukongyang

Yes I use this library in the browser.

Note that I use vite together with the plugin "vite-plugin-require" for that.

You can take this repository for reference on how to use ffmpeg.js in your browser with and without WebWorkers:
https://github.com/DerStimmler/web-video-conversion

[wukongyang]

@wukongyang

Yes I use this library in the browser.

Note that I use vite together with the plugin "vite-plugin-require" for that.

You can take this repository for reference on how to use ffmpeg.js in your browser with and without WebWorkers: https://github.com/DerStimmler/web-video-conversion

zhuan转出来的文件不能播放，还有个问题是只能从webm转成mp4吗？我当前的问题是 因为视频编码的问题，在浏览器中播放只有声音没有画面，因此想重新编码。请问能帮忙解决吗

[DerStimmler]

In my tests, ffmpeg.js was a bit picky about the input files when using the default configuration.
So you may need to provide custom arguments based on your input and output files.

ffmpeg({
		...
		arguments: ["-i", inputFileName, outputFileName], //add further arguments here
		...
})