├── .gitignore ├── ffmpeg-mp4.html ├── ffmpeg-mp4.js ├── mkv-mp4.js ├── package.json ├── readme.md ├── type-conversions.js ├── version.browser.js ├── version.html ├── version.js ├── video ├── out.mp4 ├── sample.mkv └── sample.mp4 └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | js 3 | .DS_store -------------------------------------------------------------------------------- /ffmpeg-mp4.html: -------------------------------------------------------------------------------- 1 | 2 | FFMPEG in browser 3 | 4 | 5 |

FFMPEG MP4

6 |

use window.ffmpeg in browser

7 |

Example

8 | 9 | 10 | 
11 |         
12 |
13 | 14 | 15 | 56 | 59 | 60 | -------------------------------------------------------------------------------- /ffmpeg-mp4.js: -------------------------------------------------------------------------------- 1 | // https://github.com/Kagami/ffmpeg.js 2 | var ffmpeg = require("ffmpeg.js/ffmpeg-mp4.js"); 3 | window.ffmpeg = ffmpeg; -------------------------------------------------------------------------------- /mkv-mp4.js: -------------------------------------------------------------------------------- 1 | // https://github.com/Kagami/ffmpeg.js 2 | var ffmpeg = require("ffmpeg.js/ffmpeg-mp4.js"); 3 | var fs = require("fs"); 4 | var testData = new Uint8Array(fs.readFileSync("./video/sample.mkv")); 5 | // Encode mkv video to mp4. 6 | var result = ffmpeg({ 7 | MEMFS: [{name: "sample.mkv", data: testData}], 8 | arguments: ["-i", "sample.mkv", "-c", "copy", "out.mp4"], 9 | // Ignore stdin read requests. 10 | stdin: function() {}, 11 | }); 12 | // Write out.webm to disk. 13 | var out = result.MEMFS[0]; 14 | fs.writeFileSync('./video/' + out.name, Buffer(out.data)); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ffmpeg.js-examples", 3 | "version": "1.0.0", 4 | "description": "FFMPEG.js examples", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "browserify ffmpeg-mp4.js -o js/ffmpeg-mp4.browser.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "ffmpeg.js": "^3.1.9001" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # FFMPEG.js Examples 2 | 3 | Couple of exmaples of using ffmpeg.js 4 | https://github.com/Kagami/ffmpeg.js 5 | 6 | ## Browserify 7 | 8 | Install browserify 9 | 10 | ``` 11 | npm i -g browserify 12 | ``` 13 | 14 | Browserify the examples 15 | 16 | ``` 17 | browserify ffmpeg-mp4.js -o js/ffmpeg-mp4.browser.js 18 | ``` 19 | 20 | ## Run a static http server 21 | 22 | ``` 23 | npm i -g http-server 24 | http-server . 25 | ``` 26 | 27 | View http://localhost:8080/ffmpeg-mp4.html 28 | 29 | And other pages. -------------------------------------------------------------------------------- /type-conversions.js: -------------------------------------------------------------------------------- 1 | // arrayBuffer to blob 2 | function ArrayBufferToBlob(arrayBuffer) { 3 | const dataView = new DataView(arrayBuffer); 4 | const blob = new Blob([dataView], { type: mimeString }); 5 | return blob 6 | } 7 | 8 | // blob to arrayBuffer 9 | function blobToArrayBuffer(blob, cb) { 10 | const fileReader = new FileReader(); 11 | fileReader.onload = function(event) { 12 | const arrayBuffer = event.target.result; 13 | cb(arrayBuffer) 14 | }; 15 | fileReader.readAsArrayBuffer(blob); 16 | } 17 | 18 | module.exports = { 19 | ArrayBufferToBlob, 20 | blobToArrayBuffer 21 | } 22 | -------------------------------------------------------------------------------- /version.html: -------------------------------------------------------------------------------- 1 | 2 | FFMPEG in browser 3 | 4 | 5 |

FFMPEG Version

6 |

See console.log

7 | 8 | 9 | 13 | 14 | -------------------------------------------------------------------------------- /version.js: -------------------------------------------------------------------------------- 1 | var ffmpeg = require("ffmpeg.js"); 2 | var stdout = ""; 3 | var stderr = ""; 4 | // Print FFmpeg's version. 5 | ffmpeg({ 6 | arguments: ["-version"], 7 | print: function(data) { stdout += data + "\n"; }, 8 | printErr: function(data) { stderr += data + "\n"; }, 9 | onExit: function(code) { 10 | console.log("Process exited with code " + code); 11 | console.log(stdout); 12 | }, 13 | }); -------------------------------------------------------------------------------- /video/out.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fijiwebdesign/ffmpeg.js-examples/89dfb5f2a60b2efb371dc82e78df820675defb64/video/out.mp4 -------------------------------------------------------------------------------- /video/sample.mkv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fijiwebdesign/ffmpeg.js-examples/89dfb5f2a60b2efb371dc82e78df820675defb64/video/sample.mkv -------------------------------------------------------------------------------- /video/sample.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fijiwebdesign/ffmpeg.js-examples/89dfb5f2a60b2efb371dc82e78df820675defb64/video/sample.mp4 -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | ffmpeg.js@^3.1.9001: 6 | version "3.1.9001" 7 | resolved "https://registry.yarnpkg.com/ffmpeg.js/-/ffmpeg.js-3.1.9001.tgz#3569b993027667feea22a2a6dc2b1350fbb9f9c1" 8 | --------------------------------------------------------------------------------