├── build_agpl
├── asm.js
│ ├── benchmark.js
│ ├── bigbuckbunny.jpg
│ ├── bigbuckbunny.webm
│ ├── ffmpeg-all-codecs.js
│ ├── ffmpeg-all-codecs.js.mem
│ ├── ffmpeg.js
│ ├── ffmpeg.js.mem
│ ├── index.html
│ ├── lodash.js
│ ├── site
│ │ ├── code-blocks
│ │ │ ├── example-1.html
│ │ │ ├── example-1.txt
│ │ │ ├── example-2.html
│ │ │ ├── example-2.txt
│ │ │ ├── example-3.html
│ │ │ ├── example-3.txt
│ │ │ ├── example-4.html
│ │ │ ├── example-4.txt
│ │ │ ├── example-5.html
│ │ │ └── example-5.txt
│ │ ├── favicon.ico
│ │ ├── light_toast.png
│ │ ├── load.gif
│ │ ├── logo.png
│ │ ├── site.css
│ │ └── site.js
│ ├── terminal.js
│ ├── worker-asm.js
│ └── worker.js
├── index.html
└── wasm
│ ├── benchmark.js
│ ├── bigbuckbunny.jpg
│ ├── bigbuckbunny.webm
│ ├── ffmpeg.js
│ ├── ffmpeg.wasm
│ ├── ffmpeg_post.js
│ ├── ffmpeg_pre.js
│ ├── index.html
│ ├── lodash.js
│ ├── site
│ ├── code-blocks
│ │ ├── example-1.html
│ │ ├── example-1.txt
│ │ ├── example-2.html
│ │ ├── example-2.txt
│ │ ├── example-3.html
│ │ ├── example-3.txt
│ │ ├── example-4.html
│ │ ├── example-4.txt
│ │ ├── example-5.html
│ │ └── example-5.txt
│ ├── favicon.ico
│ ├── light_toast.png
│ ├── load.gif
│ ├── logo.png
│ ├── site.css
│ └── site.js
│ ├── terminal.js
│ ├── worker-asm.js
│ └── worker.js
├── build_all_codecs
├── asm.js
│ ├── benchmark.js
│ ├── bigbuckbunny.jpg
│ ├── bigbuckbunny.webm
│ ├── ffmpeg-all-codecs.js
│ ├── ffmpeg-all-codecs.js.mem
│ ├── index.html
│ ├── lodash.js
│ ├── site
│ │ ├── code-blocks
│ │ │ ├── example-1.html
│ │ │ ├── example-1.txt
│ │ │ ├── example-2.html
│ │ │ ├── example-2.txt
│ │ │ ├── example-3.html
│ │ │ ├── example-3.txt
│ │ │ ├── example-4.html
│ │ │ ├── example-4.txt
│ │ │ ├── example-5.html
│ │ │ └── example-5.txt
│ │ ├── favicon.ico
│ │ ├── light_toast.png
│ │ ├── load.gif
│ │ ├── logo.png
│ │ ├── site.css
│ │ └── site.js
│ ├── terminal.js
│ ├── worker-asm.js
│ └── worker.js
├── index.html
└── wasm
│ ├── benchmark.js
│ ├── bigbuckbunny.jpg
│ ├── bigbuckbunny.webm
│ ├── ffmpeg-all-codecs.js
│ ├── ffmpeg-all-codecs.js.mem
│ ├── ffmpeg-all-codecs.wasm
│ ├── index.html
│ ├── lodash.js
│ ├── site
│ ├── code-blocks
│ │ ├── example-1.html
│ │ ├── example-1.txt
│ │ ├── example-2.html
│ │ ├── example-2.txt
│ │ ├── example-3.html
│ │ ├── example-3.txt
│ │ ├── example-4.html
│ │ ├── example-4.txt
│ │ ├── example-5.html
│ │ └── example-5.txt
│ ├── favicon.ico
│ ├── light_toast.png
│ ├── load.gif
│ ├── logo.png
│ ├── site.css
│ └── site.js
│ ├── terminal.js
│ ├── worker-asm.js
│ └── worker.js
└── index.html
/build_agpl/asm.js/bigbuckbunny.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonasof/videoconverter.js-wasm-demo/9f326af87b665bb45cdd71f298f481609bc55283/build_agpl/asm.js/bigbuckbunny.jpg
--------------------------------------------------------------------------------
/build_agpl/asm.js/bigbuckbunny.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonasof/videoconverter.js-wasm-demo/9f326af87b665bb45cdd71f298f481609bc55283/build_agpl/asm.js/bigbuckbunny.webm
--------------------------------------------------------------------------------
/build_agpl/asm.js/ffmpeg-all-codecs.js.mem:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonasof/videoconverter.js-wasm-demo/9f326af87b665bb45cdd71f298f481609bc55283/build_agpl/asm.js/ffmpeg-all-codecs.js.mem
--------------------------------------------------------------------------------
/build_agpl/asm.js/ffmpeg.js.mem:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonasof/videoconverter.js-wasm-demo/9f326af87b665bb45cdd71f298f481609bc55283/build_agpl/asm.js/ffmpeg.js.mem
--------------------------------------------------------------------------------
/build_agpl/asm.js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | videoconverter.js - Convert Videos In Your Web Browser
6 |
66 |
67 |
68 |
79 |
80 |
81 |
Terminal Demo
82 |
83 | Imagine that you have installed FFmpeg on your computer. Also imagine that you have files called input.webm and input.jpeg in the current directory. Feel free to run whatever commands you want, or try the sample commands below:
84 |
85 |
86 |
87 | Help
88 |
89 | List Codecs
90 |
91 | Vertical Flip Image
92 |
93 | Horizontal Flip Image
94 |
95 | Video to .mp4
96 |
97 | Video to .gif
98 |
99 | Video to screenshots
100 |
101 | Draw Boxes on Video
102 |
103 | H.264
104 |
105 | VP9
106 |
107 | Benchmark 5s Video To .gif
108 | Benchmark 20s Video To .gif
109 | Benchmark full Video To .gif
110 |
111 | Benchmark full Video To .gif with Boxes
112 |
113 |
114 |
115 |
116 | videoconverter.js
117 |
118 |
123 |
Loading JavaScript files (it may take a minute)
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
var results = ffmpeg_run({
2 | arguments: [string],
3 | files: [
4 | {
5 | data: UInt8Array,
6 | name: string
7 | }
8 | ]
9 | });
10 |
11 | // results is an Array of { data: UInt8Array, name: string }
12 | results.forEach(function (file) {
13 | console.log("File recieved" , file.name, file.data);
14 | });
15 | importScripts('ffmpeg.js' );
2 |
3 | function print(text) {
4 | postMessage({
5 | 'type' : 'stdout' ,
6 | 'data' : text
7 | });
8 | }
9 |
10 | onmessage = function (event) {
11 | var module = {
12 | files: event.data.files || [],
13 | arguments: event.data.arguments || [],
14 | print: print,
15 | printErr: print
16 | };
17 | postMessage({
18 | 'type' : 'start' ,
19 | 'data' : module.arguments
20 | });
21 | var result = ffmpeg_run(module);
22 | postMessage({
23 | 'type' : 'done' ,
24 | 'data' : result
25 | });
26 | };
27 |
28 | postMessage({
29 | 'type' : 'ready'
30 | });
31 | var worker = new Worker("worker.js" );
2 | worker.onmessage = function (event) {
3 | var message = event.data;
4 | if (message.type == "ready" ) {
5 | outputElement.textContent = "Loaded" ;
6 | worker.postMessage({
7 | type: 'command' ,
8 | arguments: ['-help' ]
9 | })
10 | } else if (message.type == "stdout" ) {
11 | outputElement.textContent += message.data + "\n" ;
12 | } else if (message.type == "start" ) {
13 | outputElement.textContent = "Worker has received command\n" ;
14 | }
15 | };
16 | var sampleVideoData;
2 | function retrieveSampleVideo() {
3 | var oReq = new XMLHttpRequest();
4 | oReq.open("GET" , "bigbuckbunny.webm" , true );
5 | oReq.responseType = "arraybuffer" ;
6 |
7 | oReq.onload = function (oEvent) {
8 | var arrayBuffer = oReq.response;
9 | if (arrayBuffer) {
10 | sampleVideoData = new Uint8Array(arrayBuffer);
11 | }
12 | };
13 |
14 | oReq.send(null );
15 | }
16 | function getDownloadLink(fileData, fileName) {
2 | var a = document .createElement('a' );
3 | a.download = fileName;
4 | var blob = new Blob([fileData]);
5 | var src = window .URL.createObjectURL(blob);
6 | a.href = src;
7 | a.textContent = 'Click here to download ' + fileName + "!" ;
8 | return a;
9 | }
10 |
11 | var result = ffmpeg_run(module);
12 | result.forEach(function (file) {
13 | getDownloadLink(file.data, file.name);
14 | });
15 | videoconverter.js - Convert Videos In Your Web Browser
6 |
66 |
67 |
68 |
79 |
80 |
81 |
Terminal Demo
82 |
83 | Imagine that you have installed FFmpeg on your computer. Also imagine that you have files called input.webm and input.jpeg in the current directory. Feel free to run whatever commands you want, or try the sample commands below:
84 |
85 |
86 |
87 | Help
88 |
89 | List Codecs
90 |
91 | Vertical Flip Image
92 |
93 | Horizontal Flip Image
94 |
95 | Video to .mp4
96 |
97 | Video to .gif
98 |
99 | Video to screenshots
100 |
101 | Draw Boxes on Video
102 |
103 | H.264
104 |
105 | VP9
106 |
107 | Benchmark 5s Video To .gif
108 | Benchmark 20s Video To .gif
109 | Benchmark full Video To .gif
110 |
111 | Benchmark full Video To .gif with Boxes
112 |
113 |
114 |
115 |
116 | videoconverter.js
117 |
118 |
123 |
Loading JavaScript files (it may take a minute)
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
var results = ffmpeg_run({
2 | arguments: [string],
3 | files: [
4 | {
5 | data: UInt8Array,
6 | name: string
7 | }
8 | ]
9 | });
10 |
11 | // results is an Array of { data: UInt8Array, name: string }
12 | results.forEach(function (file) {
13 | console.log("File recieved" , file.name, file.data);
14 | });
15 | importScripts('ffmpeg.js' );
2 |
3 | function print(text) {
4 | postMessage({
5 | 'type' : 'stdout' ,
6 | 'data' : text
7 | });
8 | }
9 |
10 | onmessage = function (event) {
11 | var module = {
12 | files: event.data.files || [],
13 | arguments: event.data.arguments || [],
14 | print: print,
15 | printErr: print
16 | };
17 | postMessage({
18 | 'type' : 'start' ,
19 | 'data' : module.arguments
20 | });
21 | var result = ffmpeg_run(module);
22 | postMessage({
23 | 'type' : 'done' ,
24 | 'data' : result
25 | });
26 | };
27 |
28 | postMessage({
29 | 'type' : 'ready'
30 | });
31 | var worker = new Worker("worker.js" );
2 | worker.onmessage = function (event) {
3 | var message = event.data;
4 | if (message.type == "ready" ) {
5 | outputElement.textContent = "Loaded" ;
6 | worker.postMessage({
7 | type: 'command' ,
8 | arguments: ['-help' ]
9 | })
10 | } else if (message.type == "stdout" ) {
11 | outputElement.textContent += message.data + "\n" ;
12 | } else if (message.type == "start" ) {
13 | outputElement.textContent = "Worker has received command\n" ;
14 | }
15 | };
16 | var sampleVideoData;
2 | function retrieveSampleVideo() {
3 | var oReq = new XMLHttpRequest();
4 | oReq.open("GET" , "bigbuckbunny.webm" , true );
5 | oReq.responseType = "arraybuffer" ;
6 |
7 | oReq.onload = function (oEvent) {
8 | var arrayBuffer = oReq.response;
9 | if (arrayBuffer) {
10 | sampleVideoData = new Uint8Array(arrayBuffer);
11 | }
12 | };
13 |
14 | oReq.send(null );
15 | }
16 | function getDownloadLink(fileData, fileName) {
2 | var a = document .createElement('a' );
3 | a.download = fileName;
4 | var blob = new Blob([fileData]);
5 | var src = window .URL.createObjectURL(blob);
6 | a.href = src;
7 | a.textContent = 'Click here to download ' + fileName + "!" ;
8 | return a;
9 | }
10 |
11 | var result = ffmpeg_run(module);
12 | result.forEach(function (file) {
13 | getDownloadLink(file.data, file.name);
14 | });
15 | videoconverter.js - Convert Videos In Your Web Browser
6 |
66 |
67 |
68 |
79 |
80 |
81 |
Terminal Demo
82 |
83 | Imagine that you have installed FFmpeg on your computer. Also imagine that you have files called input.webm and input.jpeg in the current directory. Feel free to run whatever commands you want, or try the sample commands below:
84 |
85 |
86 |
87 | Help
88 |
89 | List Codecs
90 |
91 | Vertical Flip Image
92 |
93 | Horizontal Flip Image
94 |
95 | Video to .mp4
96 |
97 | Video to .gif
98 |
99 | Video to screenshots
100 |
101 | Draw Boxes on Video
102 |
103 | H.264
104 |
105 | VP9
106 |
107 | Benchmark 5s Video To .gif
108 | Benchmark 20s Video To .gif
109 | Benchmark full Video To .gif
110 |
111 | Benchmark full Video To .gif with Boxes
112 |
113 |
114 |
115 |
116 | videoconverter.js
117 |
118 |
123 |
Loading JavaScript files (it may take a minute)
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
var results = ffmpeg_run({
2 | arguments: [string],
3 | files: [
4 | {
5 | data: UInt8Array,
6 | name: string
7 | }
8 | ]
9 | });
10 |
11 | // results is an Array of { data: UInt8Array, name: string }
12 | results.forEach(function (file) {
13 | console.log("File recieved" , file.name, file.data);
14 | });
15 | importScripts('ffmpeg.js' );
2 |
3 | function print(text) {
4 | postMessage({
5 | 'type' : 'stdout' ,
6 | 'data' : text
7 | });
8 | }
9 |
10 | onmessage = function (event) {
11 | var module = {
12 | files: event.data.files || [],
13 | arguments: event.data.arguments || [],
14 | print: print,
15 | printErr: print
16 | };
17 | postMessage({
18 | 'type' : 'start' ,
19 | 'data' : module.arguments
20 | });
21 | var result = ffmpeg_run(module);
22 | postMessage({
23 | 'type' : 'done' ,
24 | 'data' : result
25 | });
26 | };
27 |
28 | postMessage({
29 | 'type' : 'ready'
30 | });
31 | var worker = new Worker("worker.js" );
2 | worker.onmessage = function (event) {
3 | var message = event.data;
4 | if (message.type == "ready" ) {
5 | outputElement.textContent = "Loaded" ;
6 | worker.postMessage({
7 | type: 'command' ,
8 | arguments: ['-help' ]
9 | })
10 | } else if (message.type == "stdout" ) {
11 | outputElement.textContent += message.data + "\n" ;
12 | } else if (message.type == "start" ) {
13 | outputElement.textContent = "Worker has received command\n" ;
14 | }
15 | };
16 | var sampleVideoData;
2 | function retrieveSampleVideo() {
3 | var oReq = new XMLHttpRequest();
4 | oReq.open("GET" , "bigbuckbunny.webm" , true );
5 | oReq.responseType = "arraybuffer" ;
6 |
7 | oReq.onload = function (oEvent) {
8 | var arrayBuffer = oReq.response;
9 | if (arrayBuffer) {
10 | sampleVideoData = new Uint8Array(arrayBuffer);
11 | }
12 | };
13 |
14 | oReq.send(null );
15 | }
16 | function getDownloadLink(fileData, fileName) {
2 | var a = document .createElement('a' );
3 | a.download = fileName;
4 | var blob = new Blob([fileData]);
5 | var src = window .URL.createObjectURL(blob);
6 | a.href = src;
7 | a.textContent = 'Click here to download ' + fileName + "!" ;
8 | return a;
9 | }
10 |
11 | var result = ffmpeg_run(module);
12 | result.forEach(function (file) {
13 | getDownloadLink(file.data, file.name);
14 | });
15 | BUILD_ALL_CODECS
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/build_all_codecs/wasm/bigbuckbunny.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonasof/videoconverter.js-wasm-demo/9f326af87b665bb45cdd71f298f481609bc55283/build_all_codecs/wasm/bigbuckbunny.jpg
--------------------------------------------------------------------------------
/build_all_codecs/wasm/bigbuckbunny.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonasof/videoconverter.js-wasm-demo/9f326af87b665bb45cdd71f298f481609bc55283/build_all_codecs/wasm/bigbuckbunny.webm
--------------------------------------------------------------------------------
/build_all_codecs/wasm/ffmpeg-all-codecs.js.mem:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonasof/videoconverter.js-wasm-demo/9f326af87b665bb45cdd71f298f481609bc55283/build_all_codecs/wasm/ffmpeg-all-codecs.js.mem
--------------------------------------------------------------------------------
/build_all_codecs/wasm/ffmpeg-all-codecs.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonasof/videoconverter.js-wasm-demo/9f326af87b665bb45cdd71f298f481609bc55283/build_all_codecs/wasm/ffmpeg-all-codecs.wasm
--------------------------------------------------------------------------------
/build_all_codecs/wasm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | videoconverter.js - Convert Videos In Your Web Browser
6 |
66 |
67 |
68 |
79 |
80 |
81 |
Terminal Demo
82 |
83 | Imagine that you have installed FFmpeg on your computer. Also imagine that you have files called input.webm and input.jpeg in the current directory. Feel free to run whatever commands you want, or try the sample commands below:
84 |
85 |
86 |
87 | Help
88 |
89 | List Codecs
90 |
91 | Vertical Flip Image
92 |
93 | Horizontal Flip Image
94 |
95 | Video to .mp4
96 |
97 | Video to .gif
98 |
99 | Video to screenshots
100 |
101 | Draw Boxes on Video
102 |
103 | H.264
104 |
105 | VP9
106 |
107 | Benchmark 5s Video To .gif
108 | Benchmark 20s Video To .gif
109 | Benchmark full Video To .gif
110 |
111 | Benchmark full Video To .gif with Boxes
112 |
113 |
114 |
115 |
116 | videoconverter.js
117 |
118 |
123 |
Loading JavaScript files (it may take a minute)
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
var results = ffmpeg_run({
2 | arguments: [string],
3 | files: [
4 | {
5 | data: UInt8Array,
6 | name: string
7 | }
8 | ]
9 | });
10 |
11 | // results is an Array of { data: UInt8Array, name: string }
12 | results.forEach(function (file) {
13 | console.log("File recieved" , file.name, file.data);
14 | });
15 | importScripts('ffmpeg.js' );
2 |
3 | function print(text) {
4 | postMessage({
5 | 'type' : 'stdout' ,
6 | 'data' : text
7 | });
8 | }
9 |
10 | onmessage = function (event) {
11 | var module = {
12 | files: event.data.files || [],
13 | arguments: event.data.arguments || [],
14 | print: print,
15 | printErr: print
16 | };
17 | postMessage({
18 | 'type' : 'start' ,
19 | 'data' : module.arguments
20 | });
21 | var result = ffmpeg_run(module);
22 | postMessage({
23 | 'type' : 'done' ,
24 | 'data' : result
25 | });
26 | };
27 |
28 | postMessage({
29 | 'type' : 'ready'
30 | });
31 | var worker = new Worker("worker.js" );
2 | worker.onmessage = function (event) {
3 | var message = event.data;
4 | if (message.type == "ready" ) {
5 | outputElement.textContent = "Loaded" ;
6 | worker.postMessage({
7 | type: 'command' ,
8 | arguments: ['-help' ]
9 | })
10 | } else if (message.type == "stdout" ) {
11 | outputElement.textContent += message.data + "\n" ;
12 | } else if (message.type == "start" ) {
13 | outputElement.textContent = "Worker has received command\n" ;
14 | }
15 | };
16 | var sampleVideoData;
2 | function retrieveSampleVideo() {
3 | var oReq = new XMLHttpRequest();
4 | oReq.open("GET" , "bigbuckbunny.webm" , true );
5 | oReq.responseType = "arraybuffer" ;
6 |
7 | oReq.onload = function (oEvent) {
8 | var arrayBuffer = oReq.response;
9 | if (arrayBuffer) {
10 | sampleVideoData = new Uint8Array(arrayBuffer);
11 | }
12 | };
13 |
14 | oReq.send(null );
15 | }
16 | function getDownloadLink(fileData, fileName) {
2 | var a = document .createElement('a' );
3 | a.download = fileName;
4 | var blob = new Blob([fileData]);
5 | var src = window .URL.createObjectURL(blob);
6 | a.href = src;
7 | a.textContent = 'Click here to download ' + fileName + "!" ;
8 | return a;
9 | }
10 |
11 | var result = ffmpeg_run(module);
12 | result.forEach(function (file) {
13 | getDownloadLink(file.data, file.name);
14 | });
15 | BUILD_AGPL
2 |
3 |
4 | BUILD_ALL_CODECS
5 |
6 |
7 |
--------------------------------------------------------------------------------
videoconverter.js
71 | 
122 |