muaz-khan / ffmpeg.js Goto Github PK

WhatsApp exported audios are in Ogg format which is not compatible with iPhone.

Can you add this feature?

Thanks

I have a h264 strean( Uint8Array ) i would like to decode it to YUV Array to display it on a html canvas.
Any help would be greatly appreciated

Hi there, thanks for figuring out how to get ffmpeg up and running.

I took one of your demo's and made it much much simpler and decoupled from the dom code. It's designed to allow someone else to quickly use ffmpeg-asm.js in the source code.

Please feel free to copy my source code into your demo's here:
https://www.zaxtunes.com/client_transcoder/

The converted mp4 file is not playable on chrome, it can be download only. How can i play mp4 file on chrome? @muaz-khan please help.

How to use it in node.js?Can you support an example?

Looks like someone asked the same question back in 2017 here's
the link.
I used this method of recording canvas with microphone and pack it in a single .webm .

But, using this method, I tried to record the .webm created from method above but it throws Invalid sample format '(null)' Error opening filters.

Is there any additional ffmpeg configurations I need to do beforehand? did I miss something?

EDIT: I've tried to turn off the audio stream, turns out it works fine. Is there any workaround to this?
EDIT2: Looks like this is have the same issue as issue #12 .

Does anything exist today to convert WebRTC stream to RTMP stream?
If not, how difficult would it be to convert WebRTC streams to RTMP?

Thanks,

Ray

this is my handler.js

var fs = require('fs'),
sys = require('sys'),
exec = require('child_process').exec;
//r ejs = require('ejs');
//r mysql = require('mysql');
//r DATABASE = 'vistasoft';

function home(response) {
response.writeHead(200, {
'Content-Type': 'text/html'
});
response.end(fs.readFileSync('./static/home.html'));
}

/*
var mysql = mysql.createConnection({
host: 'localhost',
port: 3306,
user: 'root',
password: 'raazkumar',
});*/

function ifWin(response, files) {
// following command tries to merge wav/webm files using ffmpeg
var merger = __dirname + '\merger.bat';
var audioFile = __dirname + '\upload' + files.audio.name;
var videoFile = __dirname + '\upload' + files.video.name;
var mergedFile = __dirname + '\upload' + files.audio.name.split('.')[0] + '-merged.webm';

// if a "directory" has space in its name; below command will fail
// e.g. "c:\\dir name\\uploads" will fail.
// it must be like this: "c:\\dir-name\\uploads"
var command = merger + ', ' + audioFile + " " + videoFile + " " + mergedFile + '';
exec(command, function (error, stdout, stderr) {
    if (error) {
        console.log(error.stack);
        console.log('Error code: ' + error.code);
        console.log('Signal received: ' + error.signal);
    } else {
        response.statusCode = 200;
        response.writeHead(200, {
            'Content-Type': 'application/json'
        });
        response.end(files.audio.name.split('.')[0] + '-merged.webm');

        fs.unlink(audioFile);
        fs.unlink(videoFile);
    }
});

}

function ifMac(response, files) {
// its probably *nix, assume ffmpeg is available
var audioFile = __dirname + '/uploads/' + files.audio.name;
var videoFile = __dirname + '/uploads/' + files.video.name;
var mergedFile = __dirname + '/uploads/' + files.audio.name.split('.')[0] + '-merged.webm';

var util = require('util'),
    exec = require('child_process').exec;

var command = "ffmpeg -i " + audioFile + " -i " + videoFile + " -map 0:0 -map 1:0 " + mergedFile;

console.log("jieeeeee"+command);
exec(command, function (error, stdout, stderr) {
if (stdout)
{
console.log(stdout);
}
if (stderr){
console.log(stderr);
}

    if (error) {
        console.log('exec error: ' + error);
        response.statusCode = 404;
        response.end();

    } else {
        response.statusCode = 200;
        response.writeHead(200, {
            'Content-Type': 'application/json'
        });
        response.end(files.audio.name.split('.')[0] + '-merged.webm');

        // removing audio/video files
        fs.unlink(audioFile);
        fs.unlink(videoFile);
    }

});

}

//this function merges wav/webm files
function merge(response, files) {
// detect the current operating system
var isWin = !!process.platform.match( /^win/ );

if (isWin) {
    ifWin(response, files);
} else {
    ifMac(response, files);
}

}

function _upload(response, file) {
var fileRootName = file.name.split('.').shift(),
fileExtension = file.name.split('.').pop(),
filePathBase = './public/upload/',
fileRootNameWithBase = filePathBase + fileRootName,
filePath = fileRootNameWithBase + '.' + fileExtension,
fileID = 2,
fileBuffer;

while (fs.existsSync(filePath)) {
    filePath = fileRootNameWithBase + '(' + fileID + ').' + fileExtension;
    console.log("myfilepath="+filePath);

    fileID += 1;
}

file.contents = file.contents.split(',').pop();

fileBuffer = new Buffer(file.contents, "base64");

console.log("file path="+filePath);
fs.writeFileSync(filePath, fileBuffer);
}

// this function uploads files
function upload(response, postData) {
var files = JSON.parse(postData);

// writing audio file to disk
_upload(response, files.audio);

if (files.uploadOnlyAudio) {
    response.statusCode = 200;
    response.writeHead(200, { 'Content-Type': 'application/json' });
    console.log("files.audio="+files.audio.name);
    response.end(files.audio.name);
}

if (!files.uploadOnlyAudio) {
    // writing video file to disk
    _upload(response, files.video);

    merge(response, files);
}

}

function hasMediaType(type) {
var isHasMediaType = false;
['audio/wav', 'audio/ogg', 'video/webm', 'video/mp4'].forEach(function(t) {
if(t===type)
{
isHasMediaType = true;
}
});

return isHasMediaType;

}

function serveStatic(response, pathname) {

var extension = pathname.split('.').pop(),
    extensionTypes = {
        'js': 'application/javascript',
        'webm': 'video/webm',
        'mp4': 'video/mp4',
        'wav': 'audio/wav',
        'ogg': 'audio/ogg',
        'gif': 'image/gif'
    };

response.writeHead(200, {
    'Content-Type': extensionTypes[extension]
});
if (hasMediaType(extensionTypes[extension]))
    {
    response.end(fs.readFileSync('.' + pathname));
    }
else
    {
    response.end(fs.readFileSync('./static' + pathname));
    }
    }

exports.home = home;
exports.upload = upload;
exports.serveStatic = serveStatic;

end of handler.js

this is my merger.bat file code
@echo off
"C:\ffmpeg\bin\ffmpeg.exe" -itsoffset -00:00:00 -i %1 -itsoffset -00:00:00 -i %2 %3

for %%a in (".webm") do ffmpeg -i "%%a" -c:v libx264 -preset slow -crf 20 -c:a libvo_aacenc -b:a 128k "C:\Users\Vistasoft\Desktop\KVApp_update\public\upload%%~na.mp4"
pause

end of merger.bat

now i want to get and save mp4 file help us as soon as
email : [email protected]

I'm using ffmpeg in C for my Android project. It works perfect till Google release lasted NDK, all my library broken now.
Then I decided to switch my project to hybrid app, using javascript as a development.
I found this repo which help me decode/encode audio/video file.
The problem is, I have a lot of audio/video encoded by my algorithm, now I want to use ffmpeg in javascript to decode it before it can play in the browser.
Please give me some suggestion, thanks you!

Hi,
would it be possible to manage a remote source for audio?
Behave like ffmpeg command line with -i option

Thanks and BR

Is it possible to increase performance by recording in H.264 codec, then simply rewrapping with ffmpeg.js?

I'm experimenting with the following setup:

1. Recording: video/webm;codecs=h264
   recordVideo = RecordRTC(stream, { type: "video", mimeType: "video/webm;codecs=h264", });
2. Copying codec, bypassing the transcoding overhead: -c:v copy
   worker.postMessage({ type: "command", arguments: "-i video.webm -c:v copy output.mp4".split(" "), files: [ { data: new Uint8Array(aab), name: "video.webm", }, ], });

Result:
In theory it should work, but I'm getting a black screen s a result. I'm using the demo source (https://github.com/muaz-khan/Ffmpeg.js/blob/master/webm-to-mp4.html) with the above modifications.

Hi, we use this in our project together with RecordRTC, suddenly it does not work in Chrome anymore. The console shows no errors and the audio tag is just not working. See the demo to reproduce the error:
https://www.webrtc-experiment.com/ffmpeg/wav-to-ogg.html

It works fine in Firefox.

https://www.webrtc-experiment.com/ffmpeg/merging-wav-and-webm-into-mp4.html

I got error like this:
Uncaught TypeError: Cannot read property 'image' of undefined
at 359a679c-1052-41ba-8ee2-d8c3bdc60abe:317
at Array.map ()
at whammyInWebWorker (359a679c-1052-41ba-8ee2-d8c3bdc60abe:316)
at onmessage (359a679c-1052-41ba-8ee2-d8c3bdc60abe:323)

Problem code:

var webm = new ArrayToWebM(frames.map(function(frame) {
      var webp = parseWebP(parseRIFF(atob(frame.image.slice(23))));
       webp.duration = frame.duration;
       return webp;
 }));

the passed in frames is [undefined].

Hello Muaz,
We are trying to use ffmpeg.js file in our ionic project to merge a gif and mp3 file and get a mp4 file but the app crashes after giving the following log on console :

file received ffmpeg command.
controllers.js:441 {"type":"start","data":"-i video.gif -c:v mpeg4 -c:a copy -c:s copy -flags -global_header -b:v 8k -b:a 256k -strict experimental output.mp4"}

Please any help would be appreciated , it works fine in browser .

after "receive command" it crashes.

Hello Muaz,

Facing issue when trying to merge multiple stream webm file using ffmpeg,
Error as:
ffmpeg exited with code 1: Error reinitializing filters!
Failed to inject frame into filter network: Invalid argument
Error while processing the decoded data for stream #8:0
Conversion failed!

Thanks

Uncaught SyntaxError: Unexpected end of input
at blob:http://localhost:8080/4d2044dc-bd40-4723-8dde-330d37bb80d0:1

this error generated when I run webm-to-mp4 code. please solve this problem @muaz-khan

Uncaught SyntaxError: missing ) after argument list

this error also generated in ffmpeg_asm.js at line 1316

Imagine I have an array of *.ogg links and I want to download them in a single file.

Thank you for your examples.

Sir @muaz-khan, I am using chrome version 67.0.3396.99 (latest), I am using your demo WebM to mp4 , after conversion of WebM video into mp4, the converted video not supported on chrome browser, it is play offline after download through link. The converted video looks like this

I've tried converting webm videos to mp4 from the recorded blob using MediaStreamRecorder but unsuccessful and getting an error. Here's the logs:

ffmpeg-asm.js file has been loaded.
-i video.webm -c:v mpeg4 -b:v 6400k -strict experimental output.mp4
ffmpeg-asm.js file received ffmpeg command.
Received command: -i video.webm -c:v mpeg4 -b:v 6400k -strict experimental output.mp4
ffmpeg version git-2013-11-21-d1760dd Copyright (c) 2000-2013 the FFmpeg developers
built on Nov 21 2013 20:03:34 with emcc (Emscripten GCC-like replacement) 1.7.5 (commit 42fdcd5e0f7410d34d57fbf883c4e8039ec4d824)
configuration: --cc=emcc --enable-cross-compile --target-os=none --arch=x86_32 --cpu=generic --disable-ffplay --disable-ffprobe --disable-ffserver --disable-asm --disable-doc --disable-devices --disable-pthreads --disable-w32threads --disable-network --disable-hwaccels --disable-parsers --disable-bsfs --disable-debug --disable-zlib --disable-protocols --disable-indevs --disable-outdevs --enable-protocol=file --enable-pic --enable-small
libavutil 52. 52.100 / 52. 52.100
libavcodec 55. 41.100 / 55. 41.100
libavformat 55. 21.100 / 55. 21.100
libavdevice 55. 5.100 / 55. 5.100
libavfilter 3. 90.102 / 3. 90.102
libswscale 2. 5.101 / 2. 5.101
libswresample 0. 17.104 / 0. 17.104
[vp8 @ 0xcb4960] Warning: not compiled with thread support, using thread emulation
Guessed Channel Layout for Input Stream #0.0 : mono
Input #0, matroska,webm, from 'video.webm':
Duration: N/A, start: 0.000000, bitrate: N/A
Stream #0:0(eng): Audio: opus, 48000 Hz, mono (default)
Stream #0:1(eng): Video: vp8, yuv420p, 848x480, SAR 1:1 DAR 53:30, 1k tbr, 1k tbn, 1k tbc (default)
Metadata:
alpha_mode : 1
[graph 1 input from stream 0:0 @ 0xd8c1f0] Invalid sample format (null)
Error opening filters!
Finished processing (took 4001ms)
{"type":"done","data":[{"name":"output.mp4","data":{}}],"time":4001}
{"name":"output.mp4","data":{}}
{}

Thank you already in advance!

Cannot enlarge memory arrays in asm.js，How to solve the problem.

I need to implement x264 library for H264 encoding/ decoding. I have code of x264 but I can't implement that code in your web-to-mp4.html but I failed to load that library. Please help me for that @muaz-khan thank you !