Git Product home page Git Product logo

webm-to-mp4's Introduction

webm-to-mp4 Travis CI Build Status

Convert a webm video to mp4.

Useful for handling MediaRecorder output.

NPM Badge

Install

npm install webm-to-mp4

Usage

const { promises: fs } = require("fs");
const webmToMp4 = require("webm-to-mp4");

await fs.writeFile("file.mp4", Buffer.from(webmToMp4(await fs.readFile("file.webm"))));

API

webmToMp4(webmData)

input

Type: Iterable (includes Buffers, ArrayBuffers and Uint8Arrays)

The webm data to convert.

webm-to-mp4's People

Contributors

richienb 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

Watchers

 avatar  avatar  avatar  avatar

webm-to-mp4's Issues

Error converting file

Hello there got a problem with conversion

I built an electron app to convert webm files to mp4 files basically when you click on a button the frontend part of the electron app asks the backend part to open a file dialog box once the file is selected it gets the path of the selected path then tries to read the path of the selected file with fs.readFileSync(path) then i try to convert the file as so:

var converted = Buffer.from(webmToMp4(file))

file variable contains the read file, then if you throw this piece of code in a try catch block and if you put console.error(error) in the catch part you get this error in the console:

Error: Conversion error: ffmpeg version n4.2.2 Copyright (c) 2000-2019 the FFmpeg developers
built with emcc (Emscripten gcc/clang-like replacement) 1.39.11
configuration: --cc=emcc --ranlib=emranlib --enable-cross-compile --target-os=none --arch=x86 --disable-runtime-cpudetect --disable-asm --disable-fast-unaligned --disable-pthreads --disable-w32threads --disable-os2threads --disable-debug --disable-stripping --disable-safe-bitstream-reader --disable-all --enable-ffmpeg --enable-avcodec --enable-avformat --enable-avfilter --enable-swresample --enable-swscale --disable-network --disable-d3d11va --disable-dxva2 --disable-vaapi --disable-vdpau --enable-decoder=vp8 --enable-decoder=h264 --enable-decoder=vorbis --enable-decoder=opus --enable-decoder=mp3 --enable-decoder=aac --enable-decoder=pcm_s16le --enable-decoder=mjpeg --enable-decoder=png --enable-demuxer=matroska --enable-demuxer=ogg --enable-demuxer=mov --enable-demuxer=mp3 --enable-demuxer=wav --enable-demuxer=image2 --enable-demuxer=concat --enable-protocol=file --enable-filter=aresample --enable-filter=scale --enable-filter=crop --enable-filter=overlay --enable-filter=hstack --enable-filter=vstack --disable-bzlib --disable-iconv --disable-libxcb --disable-lzma --disable-sdl2 --disable-securetransport --disable-xlib --enable-zlib --enable-encoder=libx264 --enable-encoder=libmp3lame --enable-encoder=aac --enable-muxer=mp4 --enable-muxer=mp3 --enable-muxer=null --enable-gpl --enable-libmp3lame --enable-libx264 --extra-cflags='-s USE_ZLIB=1 -I../lame/dist/include' --extra-ldflags=-L../lame/dist/lib
libavutil 56. 31.100 / 56. 31.100
libavcodec 58. 54.100 / 58. 54.100
libavformat 58. 29.100 / 58. 29.100
libavfilter 7. 57.100 / 7. 57.100
libswscale 5. 5.100 / 5. 5.100
libswresample 3. 5.100 / 3. 5.100
Input #0, matroska,webm, from 'input.webm':
Metadata:
encoder : Chrome
Duration: N/A, start: 0.000000, bitrate: N/A
Stream #0:0(eng): Video: vp9, none(tv, bt709), 1920x1080, SAR 1:1 DAR 16:9, 1k tbr, 1k tbn, 1k tbc (default)
Metadata:
alpha_mode : 1
Output #0, mp4, to 'output.mp4':
Metadata:
encoder : Lavf58.29.100
Stream #0:0(eng): Video: vp9 (vp09 / 0x39307076), none(tv, bt709), 1920x1080 [SAR 1:1 DAR 16:9], q=2-31, 1k tbr, 16k tbn, 1k tbc (default)
Metadata:
alpha_mode : 1
Stream mapping:
Stream #0:0 -> #0:0 (copy)
Press [q] to stop, [?] for help
Unknown bitstream filter 'vp9_superframe'
av_interleaved_write_frame(): Bitstream filter not found
frame= 1 fps=0.0 q=-1.0 Lsize= 0kB time=00:00:00.00 bitrate=N/A speed= 0x
video:50kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown
Conversion failed!
exception thrown: Error: Conversion error: ffmpeg version n4.2.2 Copyright (c) 2000-2019 the FFmpeg developers
built with emcc (Emscripten gcc/clang-like replacement) 1.39.11
configuration: --cc=emcc --ranlib=emranlib --enable-cross-compile --target-os=none --arch=x86 --disable-runtime-cpudetect --disable-asm --disable-fast-unaligned --disable-pthreads --disable-w32threads --disable-os2threads --disable-debug --disable-stripping --disable-safe-bitstream-reader --disable-all --enable-ffmpeg --enable-avcodec --enable-avformat --enable-avfilter --enable-swresample --enable-swscale --disable-network --disable-d3d11va --disable-dxva2 --disable-vaapi --disable-vdpau --enable-decoder=vp8 --enable-decoder=h264 --enable-decoder=vorbis --enable-decoder=opus --enable-decoder=mp3 --enable-decoder=aac --enable-decoder=pcm_s16le --enable-decoder=mjpeg --enable-decoder=png --enable-demuxer=matroska --enable-demuxer=ogg --enable-demuxer=mov --enable-demuxer=mp3 --enable-demuxer=wav --enable-demuxer=image2 --enable-demuxer=concat --enable-protocol=file --enable-filter=aresample --enable-filter=scale --enable-filter=crop --enable-filter=overlay --enable-filter=hstack --enable-filter=vstack --disable-bzlib --disable-iconv --disable-libxcb --disable-lzma --disable-sdl2 --disable-securetransport --disable-xlib --enable-zlib --enable-encoder=libx264 --enable-encoder=libmp3lame --enable-encoder=aac --enable-muxer=mp4 --enable-muxer=mp3 --enable-muxer=null --enable-gpl --enable-libmp3lame --enable-libx264 --extra-cflags='-s USE_ZLIB=1 -I../lame/dist/include' --extra-ldflags=-L../lame/dist/lib
libavutil 56. 31.100 / 56. 31.100
libavcodec 58. 54.100 / 58. 54.100
libavformat 58. 29.100 / 58. 29.100
libavfilter 7. 57.100 / 7. 57.100
libswscale 5. 5.100 / 5. 5.100
libswresample 3. 5.100 / 3. 5.100
Input #0, matroska,webm, from 'input.webm':
Metadata:
encoder : Chrome
Duration: N/A, start: 0.000000, bitrate: N/A
Stream #0:0(eng): Video: vp9, none(tv, bt709), 1920x1080, SAR 1:1 DAR 16:9, 1k tbr, 1k tbn, 1k tbc (default)
Metadata:
alpha_mode : 1
Output #0, mp4, to 'output.mp4':
Metadata:
encoder : Lavf58.29.100
Stream #0:0(eng): Video: vp9 (vp09 / 0x39307076), none(tv, bt709), 1920x1080 [SAR 1:1 DAR 16:9], q=2-31, 1k tbr, 16k tbn, 1k tbc (default)
Metadata:
alpha_mode : 1
Stream mapping:
Stream #0:0 -> #0:0 (copy)
Press [q] to stop, [?] for help
Unknown bitstream filter 'vp9_superframe'
av_interleaved_write_frame(): Bitstream filter not found
frame= 1 fps=0.0 q=-1.0 Lsize= 0kB time=00:00:00.00 bitrate=N/A speed= 0x
video:50kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown
Conversion failed!
,Error: Conversion error: ffmpeg version n4.2.2 Copyright (c) 2000-2019 the FFmpeg developers
built with emcc (Emscripten gcc/clang-like replacement) 1.39.11
configuration: --cc=emcc --ranlib=emranlib --enable-cross-compile --target-os=none --arch=x86 --disable-runtime-cpudetect --disable-asm --disable-fast-unaligned --disable-pthreads --disable-w32threads --disable-os2threads --disable-debug --disable-stripping --disable-safe-bitstream-reader --disable-all --enable-ffmpeg --enable-avcodec --enable-avformat --enable-avfilter --enable-swresample --enable-swscale --disable-network --disable-d3d11va --disable-dxva2 --disable-vaapi --disable-vdpau --enable-decoder=vp8 --enable-decoder=h264 --enable-decoder=vorbis --enable-decoder=opus --enable-decoder=mp3 --enable-decoder=aac --enable-decoder=pcm_s16le --enable-decoder=mjpeg --enable-decoder=png --enable-demuxer=matroska --enable-demuxer=ogg --enable-demuxer=mov --enable-demuxer=mp3 --enable-demuxer=wav --enable-demuxer=image2 --enable-demuxer=concat --enable-protocol=file --enable-filter=aresample --enable-filter=scale --enable-filter=crop --enable-filter=overlay --enable-filter=hstack --enable-filter=vstack --disable-bzlib --disable-iconv --disable-libxcb --disable-lzma --disable-sdl2 --disable-securetransport --disable-xlib --enable-zlib --enable-encoder=libx264 --enable-encoder=libmp3lame --enable-encoder=aac --enable-muxer=mp4 --enable-muxer=mp3 --enable-muxer=null --enable-gpl --enable-libmp3lame --enable-libx264 --extra-cflags='-s USE_ZLIB=1 -I../lame/dist/include' --extra-ldflags=-L../lame/dist/lib
libavutil 56. 31.100 / 56. 31.100
libavcodec 58. 54.100 / 58. 54.100
libavformat 58. 29.100 / 58. 29.100
libavfilter 7. 57.100 / 7. 57.100
libswscale 5. 5.100 / 5. 5.100
libswresample 3. 5.100 / 3. 5.100
Input #0, matroska,webm, from 'input.webm':
Metadata:
encoder : Chrome
Duration: N/A, start: 0.000000, bitrate: N/A
Stream #0:0(eng): Video: vp9, none(tv, bt709), 1920x1080, SAR 1:1 DAR 16:9, 1k tbr, 1k tbn, 1k tbc (default)
Metadata:
alpha_mode : 1
Output #0, mp4, to 'output.mp4':
Metadata:
encoder : Lavf58.29.100
Stream #0:0(eng): Video: vp9 (vp09 / 0x39307076), none(tv, bt709), 1920x1080 [SAR 1:1 DAR 16:9], q=2-31, 1k tbr, 16k tbn, 1k tbc (default)
Metadata:
alpha_mode : 1
Stream mapping:
Stream #0:0 -> #0:0 (copy)
Press [q] to stop, [?] for help
Unknown bitstream filter 'vp9_superframe'
av_interleaved_write_frame(): Bitstream filter not found
frame= 1 fps=0.0 q=-1.0 Lsize= 0kB time=00:00:00.00 bitrate=N/A speed= 0x
video:50kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown
Conversion failed!

at Object.onExit (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/webm-to-mp4/index.js:20:11)
at h.quit (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:19:34)
at Cb (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:18:76)
at R (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:101:406)
at rd (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:129:108942)
at Ae (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:129:157758)
at b (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:16:439)
at Va (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:17:483)
at module.exports (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:161:115)
at module.exports (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/webm-to-mp4/index.js:8:9)
at Object.onExit (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/webm-to-mp4/index.js:20:11)
at h.quit (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:19:34)
at b (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:17:77)
at Va (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:17:483)
at module.exports (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/ffmpeg.js/ffmpeg-mp4.js:161:115)
at module.exports (/home/willmil11/vscode/Webm-to-mp4-gui/node_modules/webm-to-mp4/index.js:8:9)
at /home/willmil11/vscode/Webm-to-mp4-gui/app.js:69:49

Please note the code is running in a debian based virtual machine if i need to install anything special to make it work with the cpu instead of the inexistent gpu cuz its a virtual machine tell me be simple tho im not a noob but not a pro :)

Support audio-only

Can I use this to convert webm audio file to a audio mp4 file? Don't need video, just audio.

Question

Hi
Can this be used on a mobile browser?

I'm trying to use -c:v copy along the same lines as this post https://stackoverflow.com/a/60443156 but not having any luck.
Trying to copy the video in a webm;codecs=h264 container made in Media Recorder to a mp4 one.

Got it working on desktop browsers using ffmpeg.wasm but battling to get it to work on mobile so looking for an alternative solution

Appreciate any assistance

Angular

Is there any way to implement this in angular ?

Browsers

Can this work in a browser (ie not via Node) after processing it with something like browserify?

Since Safari can now do video|audio/mp4 natively using MediaRecorder, yet Chrome and FireFox can only do WebM, this module is the missing link to full compatibility for something I'd like to build.

But I'd rather it ran in the client/browser than the server/nodejs.

Converted Video Does Not Play in iOS Safari/Chrome

I am capturing short videos using MediaRecorder on various devices which need to be viewed on various devices. Hence the need to convert webm to mp4. In Chrome on Win10, I am recording video using a mimeType of "video/webm;codecs=h264". I convert the binary into base64 and post it to my Lambda/Nodejs (16.x) function. The Lambda function inspects the base64 and sees that it has "wemb" in the "data:" section. If so, it converts the base64 to a Buffer and then uses webm-to-mp4 to convert the Buffer to mp4, then my code converts the Buffer to base64 for storage. To view the video, I am using a Vuejs app that obtains the base64 video from a Lambda and then it uses an html5 video tag and dynamically sets the src attribute equal to the base64 string. All this works great if the video was recorded on an iOS device using the mimeType set to "video/mp4", but of course we have to use webm when recording the video on non-iOS devices. For the moment I am focusing on recording video using Chrome on Win10.

Here is my code that is doing the conversion using webm-to-mp4:

module.exports.webmToMp4 = async (strWebmDataUri) => {
// require node's fs. https://nodejs.org/api/fs.html
const { promises: fs } = require("fs");
// require webm-to-mp4. https://www.npmjs.com/package/webm-to-mp4
const webmToMp4 = require("webm-to-mp4");
// strip intro bytes to obtain pure base64 string
const strBase64 = strWebmDataUri.replace("data:video/webm;codecs=h264;base64,", "");
// use fs Buffer to convert the base64 to a buffer
const bufWebm = Buffer.from(strBase64, "base64");
// use webToMp4 to transcode the buffer from webm to mp4
const bufMp4 = Buffer.from(webmToMp4(bufWebm));
// convert the buffer to base64 and append the intro bytes
const strMp4DataUri = "data:video/mp4;codecs=h264;base64," + bufMp4.toString("base64");
// return the (awesome) mp4 DataUri
return strMp4DataUri;
}

I am preparing to do more analysis by using VLC to compare the codecs. I hope to compare between a webm, a webm converted to mp4, and a mp4 recorded on an iPhone. If you think that would be helpful just let me know and I will do that and post my findings. In the meantime, I am waiting on Pastebin to "moderate" my paste of a webm to mp4 video (base64 format). As soon as they approve my paste (I guess it looks fishy) I will post the link to it here.

Also, I am looking at this StackOverflow thread:

https://stackoverflow.com/questions/57812515/media-stream-recording-only-doesnt-work-on-iphone-safari-do-i-have-to-consider

One of the answers that seems to be quite authoritative says the following:


There are 2 ways -

Solution #1 (NOT GUARANTEED) :

Try with VP8 codec like so: new Blob(recordedBlobs, {'video/webm;codecs=vp8'});
Solution #2 (GUARANTEED) :

Record with video/webm;codecs=h264, as MP4 and Webm supports h264 codec.

check for available containers here -> video_codec_and_container

Now you just need to change the video container from WEBM to MP4. Which is way easy using tool such as ffmpeg - Note: copy the video codec, so that re-encoding will be avoided

ffmpeg -i INPUT.webm -codec:v copy OUTPUT.mp4
Recommendation: Convert videos to MP4 because WEBM has support for limited browsers.

So, this is why I am trying to record using the codec set to h264. What do you think - can webm-to-mp4 accomplish what this is saying, where all it needs to do is change the video container from webm to mp4 without re-encoding? If so, then I think it would need to solve the audio codec issue as well, no? A pure webm shows the audio codec as Opus Audio (Opus), but a pure mp4 (no conversion, straight from an iPhone) shows the audio codec as MPEG AAC Audio (mp4a). So perhaps the end goal should be to remain in the H264 video codec, convert the audio from Opus to mp4a, and change the container to mp4. What do you think?

Invalid Data Found Error During Conversion

During webm to mp4 conversion I receive the following error.
I submit a populated webm blob to webm-mp4 convertor. Still no luck with the conversion.
Any hints for a workaround are highly appreciated.

image

input.webm: Invalid data found when processing input
    at Object.onExit (index.js:20:11)
    at q.quit (ffmpeg-mp4.js:19:34)
    at _ (ffmpeg-mp4.js:18:76)
    at R (ffmpeg-mp4.js:101:406)
    at Tk (ffmpeg-mp4.js:129:108942)
    at Array.ck (ffmpeg-mp4.js:129:21234)
    at hk (ffmpeg-mp4.js:129:33188)
    at uk (ffmpeg-mp4.js:129:17042)
    at iB (ffmpeg-mp4.js:129:156148)
    at e (ffmpeg-mp4.js:16:439)
    at Object.onExit (index.js:20:11)
    at q.quit (ffmpeg-mp4.js:19:34)
    at e (ffmpeg-mp4.js:17:77)
    at L (ffmpeg-mp4.js:17:483)
    at A.exports (ffmpeg-mp4.js:161:115)
    at A.exports (index.js:8:9)
    at Object.<anonymous> (RoomClient.js:4655:19)
onExit @ index.js:20
q.quit @ ffmpeg-mp4.js:19
e @ ffmpeg-mp4.js:17
L @ ffmpeg-mp4.js:17
A.exports @ ffmpeg-mp4.js:161
A.exports @ index.js:8
(anonim) @ RoomClient.js:4655
await in (anonim) (eş zamansız)
r @ RecordRTC.js:181
(anonim) @ RecordRTC.js:5521
(anonim) @ RecordRTC.js:2327
setTimeout (eş zamansız)
Z.stop @ RecordRTC.js:2322
F.stop @ RecordRTC.js:5518
t @ RecordRTC.js:133
stopRecording @ RoomClient.js:4647
onClick @ TopBar.js:419
a @ react-dom.production.min.js:14
h @ react-dom.production.min.js:14
(anonim) @ react-dom.production.min.js:14
k @ react-dom.production.min.js:15
fe @ react-dom.production.min.js:52
te @ react-dom.production.min.js:51
ae @ react-dom.production.min.js:52
he @ react-dom.production.min.js:56
P @ react-dom.production.min.js:287
X @ react-dom.production.min.js:19
qe @ react-dom.production.min.js:70
Ke @ react-dom.production.min.js:69
e.unstable_runWithPriority @ scheduler.production.min.js:19
Xt @ react-dom.production.min.js:122
V @ react-dom.production.min.js:287
Le @ react-dom.production.min.js:68

Video not playing in Mac and Windows

I converted a webm file to mp4 and downloaded it on my windows as well as mac. The file is not being played. It generates a codec error.

To Reproduce
Steps to reproduce the behavior:

  1. Convert a webm file to mp4
  2. Download the mp4
  3. Play it in your system
  4. The video will not be played

Expected behavior
The video to be played

Desktop (please complete the following information):

  • OS: Windows 10 and Mac 10.13.6
  • Browser Chrome and Brave respectively

Fuzzy quality

I'm using this line
'-i video.webm -c:v mpeg4 -b:v 20000k -strict experimental output.mp4'

as you can see, I increased the quality, but the result image quality is still kind of fuzzy. Is there a way to use another compression? where can I find the list of all the possible parameters?

Thanks

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.