├── index.html
├── LICENSE
├── worker-asm.js
├── server.js
├── README.md
├── audio-plus-canvas-recording.html
├── webm-to-mp4.html
├── video-cropping.html
├── wav-to-ogg.html
├── wav-to-aac.html
├── merging-wav-and-webm-into-mp4.html
└── audio-plus-screen-recording.html


/index.html:
--------------------------------------------------------------------------------
1 | <ol>
2 | 	<li><a href="wav-to-aac.html">wav-to-aac.html</a></li>
3 | 	<li><a href="wav-to-ogg.html">wav-to-ogg.html</a></li>
4 | 	<li><a href="webm-to-mp4.html">webm-to-mp4.html</a></li>
5 | 	<li><a href="merging-wav-and-webm-into-mp4.html">merging-wav-and-webm-into-mp4.html</a></li>
6 | 	<li><a href="audio-plus-canvas-recording.html">audio-plus-canvas-recording.html</a></li>
7 | 	<li><a href="audio-plus-screen-recording.html">audio-plus-screen-recording.html</a></li>
8 |     <li><a href="video-cropping.html">video-cropping.html</a></li>
9 | </ol>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 [Muaz Khan](https://github.com/muaz-khan)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/worker-asm.js:
--------------------------------------------------------------------------------
 1 | // this file is used to run ffmpeg_asm.js!
 2 | // however, it is included in the HTML as "processInWebWorker" method instead of linking as a separate javascript file!
 3 | 
 4 | importScripts('https://googledrive.com/host/0B6GWd_dUUTT8OEtLRGdQb2pibDg/ffmpeg_asm.js');
 5 | 
 6 | var now = Date.now;
 7 | 
 8 | function print(text) {
 9 |   postMessage({
10 |     'type' : 'stdout',
11 |     'data' : text
12 |   });
13 | }
14 | 
15 | onmessage = function(event) {
16 | 
17 |   var message = event.data;
18 | 
19 |   if (message.type === "command") {
20 | 
21 |     var Module = {
22 |       print: print,
23 |       printErr: print,
24 |       files: message.files || [],
25 |       arguments: message.arguments || [],
26 |       TOTAL_MEMORY: message.TOTAL_MEMORY || false
27 |       // Can play around with this option - must be a power of 2
28 |       // TOTAL_MEMORY: 268435456
29 |     };
30 | 
31 |     postMessage({
32 |       'type' : 'start',
33 |       'data' : Module.arguments.join(" ")
34 |     });
35 | 
36 |     postMessage({
37 |       'type' : 'stdout',
38 |       'data' : 'Received command: ' +
39 |                 Module.arguments.join(" ") +
40 |                 ((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")
41 |     });
42 | 
43 |     var time = now();
44 |     var result = ffmpeg_run(Module);
45 | 
46 |     var totalTime = now() - time;
47 |     postMessage({
48 |       'type' : 'stdout',
49 |       'data' : 'Finished processing (took ' + totalTime + 'ms)'
50 |     });
51 | 
52 |     postMessage({
53 |       'type' : 'done',
54 |       'data' : result,
55 |       'time' : totalTime
56 |     });
57 |   }
58 | };
59 | 
60 | postMessage({
61 |   'type' : 'ready'
62 | });
63 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | // http://127.0.0.1:9001
 2 | // http://localhost:9001
 3 | 
 4 | var server = require('http'),
 5 |     url = require('url'),
 6 |     path = require('path'),
 7 |     fs = require('fs');
 8 | 
 9 | function serverHandler(request, response) {
10 |     var uri = url.parse(request.url).pathname,
11 |         filename = path.join(process.cwd(), uri);
12 | 
13 |     fs.exists(filename, function(exists) {
14 |         if (!exists) {
15 |             response.writeHead(404, {
16 |                 'Content-Type': 'text/plain'
17 |             });
18 |             response.write('404 Not Found: ' + filename + '\n');
19 |             response.end();
20 |             return;
21 |         }
22 | 
23 |         if (filename.indexOf('favicon.ico') !== -1) {
24 |             return;
25 |         }
26 | 
27 |         var isWin = !!process.platform.match(/^win/);
28 | 
29 |         if (fs.statSync(filename).isDirectory() && !isWin) {
30 |             filename += '/index.html';
31 |         } else if (fs.statSync(filename).isDirectory() && !!isWin) {
32 |             filename += '\\index.html';
33 |         }
34 | 
35 |         fs.readFile(filename, 'binary', function(err, file) {
36 |             if (err) {
37 |                 response.writeHead(500, {
38 |                     'Content-Type': 'text/plain'
39 |                 });
40 |                 response.write(err + '\n');
41 |                 response.end();
42 |                 return;
43 |             }
44 | 
45 |             var contentType;
46 | 
47 |             if (filename.toString().toLowerCase().indexOf('html') != -1) {
48 |                 contentType = 'text/html';
49 |             }
50 | 
51 |             else if (filename.indexOf('.js') != -1) {
52 |                 contentType = 'application/javascript';
53 |             }
54 | 
55 |             if (contentType) {
56 |                 response.writeHead(200, {
57 |                     'Content-Type': contentType
58 |                 });
59 |             } else response.writeHead(200);
60 | 
61 |             response.write(file, 'binary');
62 |             response.end();
63 |         });
64 |     });
65 | }
66 | 
67 | var app;
68 | 
69 | app = server.createServer(serverHandler);
70 | 
71 | app = app.listen(process.env.PORT || 9001, process.env.IP || "0.0.0.0", function() {
72 |     var addr = app.address();
73 |     console.log("Server listening at", addr.address + ":" + addr.port);
74 | });
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Ffmpeg Demos](https://github.com/muaz-khan/Ffmpeg.js) / [Demos](https://www.webrtc-experiment.com/ffmpeg/)
 2 | 
 3 | | Demo Name        | Demo           | Code |
 4 | | ------------- |-------------|-------------|
 5 | | Transcoding WAV into AAC | [Demo](https://www.webrtc-experiment.com/ffmpeg/wav-to-aac.html)  | [Source](https://github.com/muaz-khan/Ffmpeg.js/blob/master/wav-to-aac.html) |
 6 | | Transcoding WAV into Ogg | [Demo](https://www.webrtc-experiment.com/ffmpeg/wav-to-ogg.html)  | [Source](https://github.com/muaz-khan/Ffmpeg.js/blob/master/wav-to-ogg.html) |
 7 | | Transcoding WebM into mp4 | [Demo](https://www.webrtc-experiment.com/ffmpeg/webm-to-mp4.html)  | [Source](https://github.com/muaz-khan/Ffmpeg.js/blob/master/webm-to-mp4.html) |
 8 | | Transcoding WebM into mp4; then merging WAV+mp4 into single mp4 | [Demo](https://www.webrtc-experiment.com/ffmpeg/merging-wav-and-webm-into-mp4.html)  | [Source](https://github.com/muaz-khan/Ffmpeg.js/blob/master/merging-wav-and-webm-into-mp4.html) |
 9 | | Recording Audio+Canvas and merging in single mp4 | [Demo](https://www.webrtc-experiment.com/ffmpeg/audio-plus-canvas-recording.html)  | [Source](https://github.com/muaz-khan/Ffmpeg.js/blob/master/audio-plus-canvas-recording.html) |
10 | | Recording Audio+Screen and merging in single mp4 | [Demo](https://www.webrtc-experiment.com/ffmpeg/audio-plus-screen-recording.html)  | [Source](https://github.com/muaz-khan/Ffmpeg.js/blob/master/audio-plus-screen-recording.html) |
11 | | Video Cropping | [Demo](https://www.webrtc-experiment.com/ffmpeg/video-cropping.html)  | [Source](https://github.com/muaz-khan/Ffmpeg.js/blob/master/video-cropping.html) |
12 | 
13 | Remember: [`ffmpeg-asm.js`](https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js)'s credit goes to: https://github.com/bgrins/videoconverter.js
14 | 
15 | * [audo-plus-canvas-recording.gif](https://cdn.webrtc-experiment.com/images/audo-plus-canvas-recording.gif)
16 | 
17 | # File Size?
18 | 
19 | **It is suggested to download `ffmpeg-asm` file and try locally!**
20 | 
21 | [`ffmpeg-asm.js`](https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js) file's default size is 18MB; however you can gzip it to make it about 6MB.
22 | 
23 | # LocalHost
24 | 
25 | ```sh
26 | node server.js
27 | ```
28 | 
29 | Now open `http://localhost:9001/`.
30 | 
31 | # Disclaimer
32 | 
33 | There is no warranty, expressed or implied, associated with this product. Use at your own risk.
34 | 
35 | * https://www.webrtc-experiment.com/disclaimer/
36 | 
37 | # License
38 | 
39 | [All these demos](https://github.com/muaz-khan/Ffmpeg.js) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com/).
40 | 


--------------------------------------------------------------------------------
/audio-plus-canvas-recording.html:
--------------------------------------------------------------------------------
  1 | <title>Audio + Canvas2D/HTML recording using RecordRTC!</title>
  2 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
  3 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  4 | <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
  5 | <meta name="author" content="Muaz Khan">
  6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7 | <style>
  8 |     body {overflow-x:hidden;background: rgb(233, 233, 233);}
  9 |     #elementToShare {
 10 |         background: rgb(233, 233, 233);
 11 |         font-size: 2em;
 12 |         height: 100%;
 13 |         left: 0;
 14 |         padding: 0 1em;
 15 |         position: absolute;
 16 |         top: 0;
 17 |         width: 100%;
 18 |     }
 19 | 
 20 |     input, textarea {
 21 |         border: 1px solid red;
 22 |         font-size: 1em;
 23 |         outline: none;
 24 |         padding: .3em .8em;
 25 |     }
 26 | 
 27 |     button, input[type=button] {
 28 |         -moz-border-radius: 3px;
 29 |         -moz-transition: none;
 30 |         -webkit-transition: none;
 31 |         background: #0370ea;
 32 |         background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
 33 |         background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
 34 |         border: 1px solid #076bd2;
 35 |         border-radius: 3px;
 36 |         color: #fff;
 37 |         display: inline-block;
 38 |         font-family: inherit;
 39 |         font-size: .8em;
 40 |         font-size: 1.5em;
 41 |         line-height: 1.3;
 42 |         padding: 5px 12px;
 43 |         text-align: center;
 44 |         text-shadow: 1px 1px 1px #076bd2;
 45 |     }
 46 | 
 47 |     button:hover, input[type=button]:hover { background: rgb(9, 147, 240); }
 48 | 
 49 |     button:active, input[type=button]:active { background: rgb(10, 118, 190); }
 50 | 
 51 |     button[disabled], input[type=button][disabled] {
 52 |         background: none;
 53 |         border: 1px solid rgb(187, 181, 181);
 54 |         color: gray;
 55 |         text-shadow: none;
 56 |     }
 57 |     a {
 58 |         color: #2844FA;
 59 |         cursor: pointer;
 60 |         text-decoration: none;
 61 |     }
 62 |     a:hover, a:focus { color: #1B29A4; }
 63 |     a:active { color: #000; }
 64 | </style>
 65 | 
 66 | <div id="elementToShare" contenteditable style="margin-top:3px;">
 67 |     <h2>
 68 | 		Audio + Canvas2D/HTML recording <br />using <a href="https://www.webrtc-experiment.com/RecordRTC/" contenteditable="false">RecordRTC</a> and <a href="https://www.webrtc-experiment.com/ffmpeg/" contenteditable="false">ffmpeg</a>!
 69 | 	</h2>
 70 |     <h3>Content is edit-able.</h3>
 71 |     <input type="text" value="Type Text!" />
 72 |     <br />
 73 |     <textarea>resize textarea</textarea>
 74 |     <br /><br />
 75 |     <ol>
 76 |         <li>This demo uses <a href="https://www.webrtc-experiment.com/Pre-recorded-Media-Streaming/" contenteditable="false">HTML2Canvas Library</a> along with <a href="https://www.webrtc-experiment.com/RecordRTC/" contenteditable="false">RecordRTC</a> to record/encode HTML snapshots (webp images) in WebM container.</li>
 77 |         <li>It also uses <a href="https://www.webrtc-experiment.com/RecordRTC/" contenteditable="false">RecordRTC</a> to record audio in WAV container.</li>
 78 |         <li>Then it uses <a href="https://www.webrtc-experiment.com/ffmpeg/" contenteditable="false">ffmpeg-asm.js</a> to transcode and merge both WAV/WebM in single MP4 container.</li>
 79 |     </ol>
 80 | </div>
 81 | 
 82 | <div style="position: fixed;top;0;left: 20%;right: 20%;text-align: center;">
 83 |     <button id="start" contenteditable="false">Start Audio+Canvas Recording</button>
 84 |     <button id="stop" disabled contenteditable="false">Stop</button>
 85 | </div>
 86 | 
 87 | <script src="https://cdn.webrtc-experiment.com/screenshot.js"> </script>
 88 | <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"> </script>
 89 | <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 90 | 
 91 | <script>
 92 | var elementToShare = document.getElementById('elementToShare');
 93 | var canvas2d = document.createElement('canvas');
 94 | var context = canvas2d.getContext('2d');
 95 | 
 96 | canvas2d.width = elementToShare.clientWidth;
 97 | canvas2d.height = elementToShare.clientHeight;
 98 | 
 99 | canvas2d.style.top = 0;
100 | canvas2d.style.left = 0;
101 | canvas2d.style.zIndex = -1;
102 | (document.body || document.documentElement).appendChild(canvas2d);
103 | 
104 | var isRecordingStarted = false;
105 | var isStoppedRecording = false;
106 | 
107 | (function looper() {
108 |     if(!isRecordingStarted) {
109 |         return setTimeout(looper, 500);
110 |     }
111 | 
112 |     html2canvas(elementToShare, {
113 |         grabMouse: true,
114 |         onrendered: function(canvas) {
115 |             context.clearRect(0, 0, canvas2d.width, canvas2d.height);
116 |             context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);
117 | 
118 |             if(isStoppedRecording) {
119 |                 return;
120 |             }
121 | 
122 |             setTimeout(looper, 1);
123 |         }
124 |     });
125 | })();
126 | 
127 | var canvasRecorder = RecordRTC(canvas2d, {
128 |     type: 'canvas'
129 | });
130 | 
131 | var recordAudio;
132 | 
133 | document.getElementById('start').onclick = function() {
134 |     this.disabled = true;
135 |     navigator.getUserMedia({ audio: true }, function(stream) {
136 |         var audio = document.createElement('audio');
137 |         audio.muted = true;
138 |         audio.volume = 0;
139 |         audio.srcObject = stream;
140 | 
141 |         recordAudio = RecordRTC(stream, {
142 |             type: 'audio',
143 | 			recorderType: StereoAudioRecorder
144 |         });
145 | 
146 |         isStoppedRecording = false;
147 |         isRecordingStarted = true;
148 | 
149 |         canvasRecorder.startRecording();
150 |         recordAudio.startRecording();
151 | 
152 |         document.getElementById('stop').disabled = false;
153 |     }, function(error) { log( JSON.stringify ( error ) ); });
154 | };
155 | document.getElementById('stop').onclick = function() {
156 |     this.disabled = true;
157 |     recordAudio.stopRecording(function() {
158 |         isStoppedRecording = true;
159 |         canvasRecorder.stopRecording(function() {
160 |             convertStreams(canvasRecorder.getBlob(), recordAudio.getBlob());
161 |             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
162 |         });
163 |     });
164 | 
165 |     document.getElementById('start').disabled = false;
166 | };
167 | 
168 | var workerPath = 'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
169 | 
170 | if(document.domain == 'localhost') {
171 | 	workerPath = location.href.replace(location.href.split('/').pop(), '') + 'ffmpeg_asm.js';
172 | }
173 | 
174 | function processInWebWorker() {
175 |     var blob = URL.createObjectURL(new Blob(['importScripts("' + workerPath + '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: 268435456};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});'], {
176 |         type: 'application/javascript'
177 |     }));
178 | 
179 |     var worker = new Worker(blob);
180 |     URL.revokeObjectURL(blob);
181 |     return worker;
182 | }
183 | 
184 | var worker;
185 | 
186 | function convertStreams(videoBlob, audioBlob) {
187 |     var vab;
188 |     var aab;
189 |     var buffersReady;
190 |     var workerReady;
191 |     var posted = false;
192 | 
193 |     var fileReader1 = new FileReader();
194 |     fileReader1.onload = function() {
195 |         vab = this.result;
196 | 
197 |         if (aab) buffersReady = true;
198 | 
199 |         if (buffersReady && workerReady && !posted) postMessage();
200 |     };
201 |     var fileReader2 = new FileReader();
202 |     fileReader2.onload = function() {
203 |         aab = this.result;
204 | 
205 |         if (vab) buffersReady = true;
206 | 
207 |         if (buffersReady && workerReady && !posted) postMessage();
208 |     };
209 | 
210 |     fileReader1.readAsArrayBuffer(videoBlob);
211 |     fileReader2.readAsArrayBuffer(audioBlob);
212 | 
213 |     if (!worker) {
214 |         worker = processInWebWorker();
215 |     }
216 | 
217 |     worker.onmessage = function(event) {
218 |         var message = event.data;
219 |         if (message.type == "ready") {
220 |             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file has been loaded.');
221 |             workerReady = true;
222 |             if (buffersReady)
223 |                 postMessage();
224 |         } else if (message.type == "stdout") {
225 |             log(message.data);
226 |         } else if (message.type == "start") {
227 |             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file received ffmpeg command.');
228 |         } else if (message.type == "done") {
229 |             log(JSON.stringify(message));
230 | 
231 |             var result = message.data[0];
232 |             log(JSON.stringify(result));
233 | 
234 |             var blob = new Blob([result.data], {
235 |                 type: 'video/mp4'
236 |             });
237 | 
238 |             log(JSON.stringify(blob));
239 | 
240 |             PostBlob(blob);
241 |         }
242 |     };
243 |     var postMessage = function() {
244 |         posted = true;
245 | 		
246 | 		/*
247 | 			[
248 |                 '-i', 'video.webm',
249 |                 '-i', 'audio.wav',
250 | 				'-s', '1280x720',
251 |                 '-c:v', 'mpeg4',
252 |                 '-c:a', 'aac',
253 |                 '-b:v', '1450k',
254 |                 '-b:a', '96k',
255 | 				'-bf', '2',
256 | 				'-g', '90',
257 | 				'-sc_threshold', '0',
258 | 				'-ar', '32000',
259 |                 '-strict', 'experimental', 'output.mp4'
260 |             ]
261 | 		*/
262 | 		
263 | 		worker.postMessage({
264 |             type: 'command',
265 |             arguments: [
266 |                 '-i', 'video.webm',
267 |                 '-i', 'audio.wav',
268 |                 '-c:v', 'mpeg4',
269 |                 '-c:a', 'vorbis', // or aac
270 |                 '-b:v', '6400k',  // or 1450k
271 |                 '-b:a', '4800k',  // or 96k
272 |                 '-strict', 'experimental', 'output.mp4'
273 |             ],
274 |             files: [
275 |                 {
276 |                     data: new Uint8Array(vab),
277 |                     name: 'video.webm'
278 |                 },
279 |                 {
280 |                     data: new Uint8Array(aab),
281 |                     name: "audio.wav"
282 |                 }
283 |             ]
284 |         });
285 |     };
286 | }
287 | 
288 | var h2 = document.querySelector('h2');
289 | 
290 | function PostBlob(blob) {
291 |     h2.innerHTML = '<a href="' + URL.createObjectURL(blob) + '" target="_blank" download="Recorded Audio+Canvas File.mp4">Download Recorded Audio+Canvas file in MP4 container and play in VLC player!</a>';
292 |     h2.setAttribute('contenteditable', 'false');
293 | }
294 | 
295 | function log(message) {
296 |     h2.innerHTML = message;
297 |     console.log(message);
298 | }
299 | </script>
300 | <a href="https://www.webrtc-experiment.com/ffmpeg/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">←Try other Ffmpeg.js and RecordRTC demos</a>
301 | 


--------------------------------------------------------------------------------
/webm-to-mp4.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | > Muaz Khan     - www.MuazKhan.com
  3 | > MIT License   - www.WebRTC-Experiment.com/licence
  4 | > Documentation - github.com/muaz-khan/Ffmpeg.js
  5 | -->
  6 | <!DOCTYPE html>
  7 | <html lang="en">
  8 |     <head>
  9 |         <title>RecordRTC WebM to mp4 using ffmpeg-asm.js ® Muaz Khan</title>
 10 |         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 11 |         <meta charset="utf-8">
 12 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 13 |         <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
 14 |         <meta name="author" content="Muaz Khan">
 15 |         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 16 | 
 17 |         <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
 18 | 
 19 |         <style>
 20 |             video {
 21 |                 vertical-align: bottom;
 22 |                 width: 300px;
 23 |             }
 24 | 
 25 |             input {
 26 |                 border: 1px solid #d9d9d9;
 27 |                 border-radius: 1px;
 28 |                 font-size: 2em;
 29 |                 margin: .2em;
 30 |                 width: 30%;
 31 |             }
 32 | 
 33 |             p, .inner { padding: 1em; }
 34 | 
 35 |             li {
 36 |                 border-bottom: 1px solid rgb(189, 189, 189);
 37 |                 border-left: 1px solid rgb(189, 189, 189);
 38 |                 padding: .5em;
 39 |             }
 40 | 
 41 |             label {
 42 |                 display: inline-block;
 43 |                 width: 8em;
 44 |             }
 45 |         </style>
 46 |         <script>
 47 |             document.createElement('article');
 48 |             document.createElement('footer');
 49 |         </script>
 50 | 
 51 |         <!-- script used for audio/video/gif recording -->
 52 |         <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"> </script>
 53 |         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 54 |     </head>
 55 | 
 56 |     <body>
 57 |         <article>
 58 |             <header style="text-align: center;">
 59 |                 <h1>
 60 |                     <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> WebM to mp4 using <a href="http://bgrins.github.io/videoconverter.js/">ffmpeg-asm.js</a>!
 61 |                 </h1>
 62 |                 <p>
 63 |                     <a href="https://www.webrtc-experiment.com/ffmpeg/">HOME</a>
 64 |                     <span> &copy; </span>
 65 |                     <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
 66 | 
 67 |                     .
 68 |                     <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
 69 | 
 70 |                     .
 71 |                     <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
 72 | 
 73 |                     .
 74 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/issues?state=open" target="_blank">Latest issues</a>
 75 | 
 76 |                     .
 77 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">What's New?</a>
 78 |                 </p>
 79 |             </header>
 80 | 
 81 |             <div class="github-stargazers"></div>
 82 | 
 83 |             <section class="experiment">
 84 |                 <h2 class="header">Logs</h2>
 85 |                 <ol id="logs-preview">
 86 |                     <li>
 87 |                         <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> experiment converting WebM to mp4 inside the browser!
 88 |                     </li>
 89 |                 </ol>
 90 |             </section>
 91 | 
 92 |             <section class="experiment">
 93 |                 <h2 class="header">Record Video and convert into "mp4" using <a href="https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js" download="ffmpeg-asm.js">ffmpeg-asm.js</a>!</h2>
 94 | 
 95 |                 <div class="inner">
 96 |                     <button id="record-video">Record</button>
 97 |                     <button id="stop-recording-video" disabled>Stop</button>
 98 |                     <br>
 99 |                     <video id="video-preview" controls></video>
100 |                     <br>
101 |                 </div>
102 |             </section>
103 |             <script>
104 |                 var recordVideo;
105 |                 var videoPreview = document.getElementById('video-preview');
106 |                 var inner = document.querySelector('.inner');
107 | 
108 |                 document.querySelector('#record-video').onclick = function() {
109 |                     this.disabled = true;
110 |                     navigator.getUserMedia({
111 |                             video: true
112 |                         }, function(stream) {
113 |                             videoPreview.srcObject = stream;
114 |                             videoPreview.play();
115 | 
116 |                             recordVideo = RecordRTC(stream, {
117 |                                 type: 'video'
118 |                             });
119 | 
120 |                             recordVideo.startRecording();
121 |                         }, function(error) { throw error;});
122 |                     document.querySelector('#stop-recording-video').disabled = false;
123 |                 };
124 | 
125 |                 document.querySelector('#stop-recording-video').onclick = function() {
126 |                     this.disabled = true;
127 | 
128 |                     recordVideo.stopRecording(function(url) {
129 |                         videoPreview.src = url;
130 |                         videoPreview.download = 'video.webm';
131 | 
132 |                         log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
133 |                         convertStreams(recordVideo.getBlob());
134 |                     });
135 |                 };
136 | 
137 |                 var workerPath = 'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
138 |                 if(document.domain == 'localhost') {
139 |                     workerPath = location.href.replace(location.href.split('/').pop(), '') + 'ffmpeg_asm.js';
140 |                 }
141 | 
142 |                 function processInWebWorker() {
143 |                     var blob = URL.createObjectURL(new Blob(['importScripts("' + workerPath + '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: message.TOTAL_MEMORY || false};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});'], {
144 |                         type: 'application/javascript'
145 |                     }));
146 | 
147 |                     var worker = new Worker(blob);
148 |                     URL.revokeObjectURL(blob);
149 |                     return worker;
150 |                 }
151 | 
152 |                 var worker;
153 | 
154 |                 function convertStreams(videoBlob) {
155 |                     var aab;
156 |                     var buffersReady;
157 |                     var workerReady;
158 |                     var posted;
159 | 
160 |                     var fileReader = new FileReader();
161 |                     fileReader.onload = function() {
162 |                         aab = this.result;
163 |                         postMessage();
164 |                     };
165 |                     fileReader.readAsArrayBuffer(videoBlob);
166 | 
167 |                     if (!worker) {
168 |                         worker = processInWebWorker();
169 |                     }
170 | 
171 |                     worker.onmessage = function(event) {
172 |                         var message = event.data;
173 |                         if (message.type == "ready") {
174 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file has been loaded.');
175 | 
176 |                             workerReady = true;
177 |                             if (buffersReady)
178 |                                 postMessage();
179 |                         } else if (message.type == "stdout") {
180 |                             log(message.data);
181 |                         } else if (message.type == "start") {
182 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file received ffmpeg command.');
183 |                         } else if (message.type == "done") {
184 |                             log(JSON.stringify(message));
185 | 
186 |                             var result = message.data[0];
187 |                             log(JSON.stringify(result));
188 | 
189 |                             var blob = new File([result.data], 'test.mp4', {
190 |                                 type: 'video/mp4'
191 |                             });
192 | 
193 |                             log(JSON.stringify(blob));
194 | 
195 |                             PostBlob(blob);
196 |                         }
197 |                     };
198 |                     var postMessage = function() {
199 |                         posted = true;
200 | 
201 |                         worker.postMessage({
202 |                             type: 'command',
203 |                             arguments: '-i video.webm -c:v mpeg4 -b:v 6400k -strict experimental output.mp4'.split(' '),
204 |                             files: [
205 |                                 {
206 |                                     data: new Uint8Array(aab),
207 |                                     name: 'video.webm'
208 |                                 }
209 |                             ]
210 |                         });
211 |                     };
212 |                 }
213 | 
214 |                 function PostBlob(blob) {
215 |                     var video = document.createElement('video');
216 |                     video.controls = true;
217 | 
218 |                     var source = document.createElement('source');
219 |                     source.src = URL.createObjectURL(blob);
220 |                     source.type = 'video/mp4; codecs=mpeg4';
221 |                     video.appendChild(source);
222 | 
223 |                     video.download = 'Play mp4 in VLC Player.mp4';
224 | 
225 |                     inner.appendChild(document.createElement('hr'));
226 |                     var h2 = document.createElement('h2');
227 |                     h2.innerHTML = '<a href="' + source.src + '" target="_blank" download="Play mp4 in VLC Player.mp4" style="font-size:200%;color:red;">Download Converted mp4 and play in VLC player!</a>';
228 |                     inner.appendChild(h2);
229 |                     h2.style.display = 'block';
230 |                     inner.appendChild(video);
231 | 
232 |                     video.tabIndex = 0;
233 |                     video.focus();
234 |                     video.play();
235 | 
236 |                     document.querySelector('#record-video').disabled = false;
237 |                 }
238 | 
239 |                 var logsPreview = document.getElementById('logs-preview');
240 | 
241 |                 function log(message) {
242 |                     var li = document.createElement('li');
243 |                     li.innerHTML = message;
244 |                     logsPreview.appendChild(li);
245 | 
246 |                     li.tabIndex = 0;
247 |                     li.focus();
248 |                 }
249 | 
250 |                 window.onbeforeunload = function() {
251 |                     document.querySelector('#record-video').disabled = false;
252 |                 };
253 |             </script>
254 | 
255 |             <section class="experiment own-widgets">
256 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/issues" target="_blank">Ffmpeg.js Issues</a>
257 |                 </h2>
258 |                 <div id="github-issues"></div>
259 |             </section>
260 | 
261 |             <section class="experiment">
262 |                 <h2 class="header" id="feedback">Feedback</h2>
263 |                 <div>
264 |                     <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
265 |                 </div>
266 |                 <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
267 |             </section>
268 | 
269 | 
270 |             <section class="experiment">
271 |                 <h2 class="header">Using ffmpeg-asm.js...</h2>
272 |                 <ol>
273 |                     <li>
274 |                         WebM can be converted in mp4.
275 |                     </li>
276 |                     <li>
277 |                         WAV can be converted in ogg or mp3 (AAC/Vorbis).
278 |                     </li>
279 |                     <li>
280 |                         WAV can be merged in mp4.
281 |                     </li>
282 |                 </ol>
283 |                 <p style="margin-top: 0;">
284 |                     If WAV or WebM is 5MB in size; ogg, mp3 or mp4 will be 700kb!
285 |                 </p>
286 |             </section>
287 | 
288 |             <section class="experiment">
289 |                 <p style="margin-top: 0;">
290 |                     Ffmpeg.js is MIT licensed on Github! <a href="https://github.com/muaz-khan/Ffmpeg.js" target="_blank">Documentation</a>
291 |                 </p>
292 |             </section>
293 | 
294 |             <section class="experiment own-widgets latest-commits">
295 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
296 |                 <div id="github-commits"></div>
297 |             </section>
298 |         </article>
299 | 
300 |         <a href="https://github.com/muaz-khan/Ffmpeg.js" class="fork-right"></a>
301 |         <a href="https://github.com/muaz-khan/RecordRTC" class="fork-left"></a>
302 | 
303 |         <footer>
304 |             <p>
305 |                 <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
306 |                 © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
307 |                 <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
308 |             </p>
309 |         </footer>
310 | 
311 |         <!-- commits.js is useless for you! -->
312 |         <script>
313 |             window.useThisGithubPath = 'muaz-khan/Ffmpeg.js';
314 |         </script>
315 |         <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
316 |     </body>
317 | </html>
318 | 


--------------------------------------------------------------------------------
/video-cropping.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | > Muaz Khan     - www.MuazKhan.com
  3 | > MIT License   - www.WebRTC-Experiment.com/licence
  4 | > Documentation - github.com/muaz-khan/Ffmpeg.js
  5 | -->
  6 | <!DOCTYPE html>
  7 | <html lang="en">
  8 |     <head>
  9 |         <title>RecordRTC Video Cropping using ffmpeg-asm.js ® Muaz Khan</title>
 10 |         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 11 |         <meta charset="utf-8">
 12 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 13 |         <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
 14 |         <meta name="author" content="Muaz Khan">
 15 |         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 16 | 
 17 |         <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
 18 | 
 19 |         <style>
 20 |             video {
 21 |                 vertical-align: bottom;
 22 |                 width: 300px;
 23 |             }
 24 | 
 25 |             input {
 26 |                 border: 1px solid #d9d9d9;
 27 |                 border-radius: 1px;
 28 |                 font-size: 2em;
 29 |                 margin: .2em;
 30 |                 width: 30%;
 31 |             }
 32 | 
 33 |             p, .inner { padding: 1em; }
 34 | 
 35 |             li {
 36 |                 border-bottom: 1px solid rgb(189, 189, 189);
 37 |                 border-left: 1px solid rgb(189, 189, 189);
 38 |                 padding: .5em;
 39 |             }
 40 | 
 41 |             label {
 42 |                 display: inline-block;
 43 |                 width: 8em;
 44 |             }
 45 |         </style>
 46 |         <script>
 47 |             document.createElement('article');
 48 |             document.createElement('footer');
 49 |         </script>
 50 | 
 51 |         <!-- script used for audio/video/gif recording -->
 52 |         <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"> </script>
 53 |         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 54 |     </head>
 55 | 
 56 |     <body>
 57 |         <article>
 58 |             <header style="text-align: center;">
 59 |                 <h1>
 60 |                     <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> Video Cropping using <a href="http://bgrins.github.io/videoconverter.js/">ffmpeg-asm.js</a>!
 61 |                 </h1>
 62 |                 <p>
 63 |                     <a href="https://www.webrtc-experiment.com/ffmpeg/">HOME</a>
 64 |                     <span> &copy; </span>
 65 |                     <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
 66 | 
 67 |                     .
 68 |                     <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
 69 | 
 70 |                     .
 71 |                     <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
 72 | 
 73 |                     .
 74 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/issues?state=open" target="_blank">Latest issues</a>
 75 | 
 76 |                     .
 77 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">What's New?</a>
 78 |                 </p>
 79 |             </header>
 80 | 
 81 |             <div class="github-stargazers"></div>
 82 | 
 83 |             <section class="experiment">
 84 |                 <h2 class="header">Logs</h2>
 85 |                 <ol id="logs-preview">
 86 |                     <li>
 87 |                         <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> experiment crops video inside the browser!
 88 |                     </li>
 89 |                 </ol>
 90 |             </section>
 91 | 
 92 |             <section class="experiment">
 93 |                 <h2 class="header">Record Video and convert into "mp4" using <a href="https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js" download="ffmpeg-asm.js">ffmpeg-asm.js</a>!</h2>
 94 | 
 95 |                 <div class="inner">
 96 |                     <button id="record-video">Record</button>
 97 |                     <button id="stop-recording-video" disabled>Stop</button>
 98 |                     <br>
 99 |                     <video id="video-preview" controls></video>
100 |                     <br>
101 |                 </div>
102 |             </section>
103 |             <script>
104 |                 var recordVideo;
105 |                 var videoPreview = document.getElementById('video-preview');
106 |                 var inner = document.querySelector('.inner');
107 | 
108 |                 document.querySelector('#record-video').onclick = function() {
109 |                     this.disabled = true;
110 |                     navigator.getUserMedia({
111 |                             video: true
112 |                         }, function(stream) {
113 |                             videoPreview.srcObject = stream;
114 |                             videoPreview.play();
115 | 
116 |                             recordVideo = RecordRTC(stream, {
117 |                                 type: 'video',
118 |                                 // recorderType: !!navigator.mozGetUserMedia ? MediaStreamRecorder : WhammyRecorder
119 |                             });
120 | 
121 |                             recordVideo.startRecording();
122 |                         }, function(error) { throw error;});
123 |                     document.querySelector('#stop-recording-video').disabled = false;
124 |                 };
125 | 
126 |                 document.querySelector('#stop-recording-video').onclick = function() {
127 |                     this.disabled = true;
128 | 
129 |                     recordVideo.stopRecording(function(url) {
130 |                         videoPreview.src = url;
131 |                         videoPreview.download = 'video.webm';
132 | 
133 |                         log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
134 |                         convertStreams(recordVideo.getBlob());
135 |                     });
136 |                 };
137 | 
138 |                 var workerPath = 'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
139 |                 if(document.domain == 'localhost') {
140 |                     workerPath = location.href.replace(location.href.split('/').pop(), '') + 'ffmpeg_asm.js';
141 |                 }
142 | 
143 |                 function processInWebWorker() {
144 |                     var blob = URL.createObjectURL(new Blob(['importScripts("' + workerPath + '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: message.TOTAL_MEMORY || false};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});'], {
145 |                         type: 'application/javascript'
146 |                     }));
147 | 
148 |                     var worker = new Worker(blob);
149 |                     URL.revokeObjectURL(blob);
150 |                     return worker;
151 |                 }
152 | 
153 |                 var worker;
154 | 
155 |                 function convertStreams(videoBlob) {
156 |                     var aab;
157 |                     var buffersReady;
158 |                     var workerReady;
159 |                     var posted;
160 | 
161 |                     var fileReader = new FileReader();
162 |                     fileReader.onload = function() {
163 |                         aab = this.result;
164 |                         postMessage();
165 |                     };
166 |                     fileReader.readAsArrayBuffer(videoBlob);
167 | 
168 |                     if (!worker) {
169 |                         worker = processInWebWorker();
170 |                     }
171 | 
172 |                     worker.onmessage = function(event) {
173 |                         var message = event.data;
174 |                         if (message.type == "ready") {
175 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file has been loaded.');
176 | 
177 |                             workerReady = true;
178 |                             if (buffersReady)
179 |                                 postMessage();
180 |                         } else if (message.type == "stdout") {
181 |                             log(message.data);
182 |                         } else if (message.type == "start") {
183 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file received ffmpeg command.');
184 |                         } else if (message.type == "done") {
185 |                             log(JSON.stringify(message));
186 | 
187 |                             var result = message.data[0];
188 |                             log(JSON.stringify(result));
189 | 
190 |                             var blob = new File([result.data], 'test.mp4', {
191 |                                 type: 'video/mp4'
192 |                             });
193 | 
194 |                             log(JSON.stringify(blob));
195 | 
196 |                             PostBlob(blob);
197 |                         }
198 |                     };
199 |                     var postMessage = function() {
200 |                         posted = true;
201 | 
202 |                         worker.postMessage({
203 |                             type: 'command',
204 |                             arguments: '-i video.webm -vf scale=3840:2160 -c:v mpeg4 -b:v 6400k -filter:v crop=in_w-60:in_h-60:30:30 -c:a copy output.mp4'.split(' '),
205 |                             files: [
206 |                                 {
207 |                                     data: new Uint8Array(aab),
208 |                                     name: 'video.webm'
209 |                                 }
210 |                             ]
211 |                         });
212 |                     };
213 |                 }
214 | 
215 |                 function PostBlob(blob) {
216 |                     var video = document.createElement('video');
217 |                     video.controls = true;
218 | 
219 |                     var source = document.createElement('source');
220 |                     source.src = URL.createObjectURL(blob);
221 |                     source.type = 'video/mp4; codecs=mpeg4';
222 |                     video.appendChild(source);
223 | 
224 |                     video.download = 'Play mp4 in VLC Player.mp4';
225 | 
226 |                     inner.appendChild(document.createElement('hr'));
227 |                     var h2 = document.createElement('h2');
228 |                     h2.innerHTML = '<a href="' + source.src + '" target="_blank" download="Play mp4 in VLC Player.mp4" style="font-size:200%;color:red;">Download Converted mp4 and play in VLC player!</a>';
229 |                     inner.appendChild(h2);
230 |                     h2.style.display = 'block';
231 |                     inner.appendChild(video);
232 | 
233 |                     video.tabIndex = 0;
234 |                     video.focus();
235 |                     video.play();
236 | 
237 |                     document.querySelector('#record-video').disabled = false;
238 |                 }
239 | 
240 |                 var logsPreview = document.getElementById('logs-preview');
241 | 
242 |                 function log(message) {
243 |                     var li = document.createElement('li');
244 |                     li.innerHTML = message;
245 |                     logsPreview.appendChild(li);
246 | 
247 |                     li.tabIndex = 0;
248 |                     li.focus();
249 |                 }
250 | 
251 |                 window.onbeforeunload = function() {
252 |                     document.querySelector('#record-video').disabled = false;
253 |                 };
254 |             </script>
255 | 
256 |             <section class="experiment own-widgets">
257 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/issues" target="_blank">Ffmpeg.js Issues</a>
258 |                 </h2>
259 |                 <div id="github-issues"></div>
260 |             </section>
261 | 
262 |             <section class="experiment">
263 |                 <h2 class="header" id="feedback">Feedback</h2>
264 |                 <div>
265 |                     <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
266 |                 </div>
267 |                 <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
268 |             </section>
269 | 
270 | 
271 |             <section class="experiment">
272 |                 <h2 class="header">Using ffmpeg-asm.js...</h2>
273 |                 <ol>
274 |                     <li>
275 |                         WebM can be converted in mp4.
276 |                     </li>
277 |                     <li>
278 |                         WAV can be converted in ogg or mp3 (AAC/Vorbis).
279 |                     </li>
280 |                     <li>
281 |                         WAV can be merged in mp4.
282 |                     </li>
283 |                 </ol>
284 |                 <p style="margin-top: 0;">
285 |                     If WAV or WebM is 5MB in size; ogg, mp3 or mp4 will be 700kb!
286 |                 </p>
287 |             </section>
288 | 
289 |             <section class="experiment">
290 |                 <p style="margin-top: 0;">
291 |                     Ffmpeg.js is MIT licensed on Github! <a href="https://github.com/muaz-khan/Ffmpeg.js" target="_blank">Documentation</a>
292 |                 </p>
293 |             </section>
294 | 
295 |             <section class="experiment own-widgets latest-commits">
296 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
297 |                 <div id="github-commits"></div>
298 |             </section>
299 |         </article>
300 | 
301 |         <a href="https://github.com/muaz-khan/Ffmpeg.js" class="fork-right"></a>
302 |         <a href="https://github.com/muaz-khan/RecordRTC" class="fork-left"></a>
303 | 
304 |         <footer>
305 |             <p>
306 |                 <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
307 |                 © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
308 |                 <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
309 |             </p>
310 |         </footer>
311 | 
312 |         <!-- commits.js is useless for you! -->
313 |         <script>
314 |             window.useThisGithubPath = 'muaz-khan/Ffmpeg.js';
315 |         </script>
316 |         <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
317 |     </body>
318 | </html>
319 | 


--------------------------------------------------------------------------------
/wav-to-ogg.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | > Muaz Khan     - www.MuazKhan.com
  3 | > MIT License   - www.WebRTC-Experiment.com/licence
  4 | > Documentation - github.com/muaz-khan/Ffmpeg.js
  5 | -->
  6 | <!DOCTYPE html>
  7 | <html lang="en">
  8 |     <head>
  9 |         <title>RecordRTC WAV to Ogg using ffmpeg-asm.js</title>
 10 |         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 11 |         <meta charset="utf-8">
 12 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 13 |         <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
 14 |         <meta name="author" content="Muaz Khan">
 15 |         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 16 | 
 17 |         <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
 18 | 
 19 |         <style>
 20 |             audio { vertical-align: middle; }
 21 | 
 22 |             input {
 23 |                 border: 1px solid #d9d9d9;
 24 |                 border-radius: 1px;
 25 |                 font-size: 2em;
 26 |                 margin: .2em;
 27 |                 width: 30%;
 28 |             }
 29 | 
 30 |             p, .inner { padding: 1em; }
 31 | 
 32 |             li {
 33 |                 border-bottom: 1px solid rgb(189, 189, 189);
 34 |                 border-left: 1px solid rgb(189, 189, 189);
 35 |                 padding: .5em;
 36 |             }
 37 | 
 38 |             label {
 39 |                 display: inline-block;
 40 |                 width: 8em;
 41 |             }
 42 |         </style>
 43 |         <script>
 44 |             document.createElement('article');
 45 |             document.createElement('footer');
 46 |         </script>
 47 | 
 48 |         <!-- script used for audio/video/gif recording -->
 49 |         <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"> </script>
 50 |         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 51 |     </head>
 52 | 
 53 |     <body>
 54 |         <article>
 55 |             <header style="text-align: center;">
 56 |                 <h1>
 57 |                     <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> WAV to Ogg using <a href="http://bgrins.github.io/videoconverter.js/">ffmpeg-asm.js</a>!
 58 |                 </h1>
 59 |                 <p>
 60 |                     <a href="https://www.webrtc-experiment.com/ffmpeg/">HOME</a>
 61 |                     <span> &copy; </span>
 62 |                     <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
 63 | 
 64 |                     .
 65 |                     <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
 66 | 
 67 |                     .
 68 |                     <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
 69 | 
 70 |                     .
 71 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/issues?state=open" target="_blank">Latest issues</a>
 72 | 
 73 |                     .
 74 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">What's New?</a>
 75 |                 </p>
 76 |             </header>
 77 | 
 78 |             <div class="github-stargazers"></div>
 79 | 
 80 |             <section class="experiment">
 81 |                 <h2 class="header">Logs</h2>
 82 |                 <ol id="logs-preview">
 83 |                     <li>
 84 |                         <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> experiment converting WAV to Ogg inside the browser!
 85 |                     </li>
 86 |                 </ol>
 87 |             </section>
 88 | 
 89 |             <section class="experiment">
 90 |                 <h2 class="header">Record Audio and convert into "Ogg" using <a href="https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js" download="ffmpeg-asm.js">ffmpeg-asm.js</a>!</h2>
 91 | 
 92 |                 <div class="inner">
 93 |                     <audio id="audio-preview" controls muted></audio>
 94 |                     <br>
 95 |                     <button id="record-audio">Record</button>
 96 |                     <button id="stop-recording-audio" disabled>Stop</button>
 97 |                     <br>
 98 |                 </div>
 99 |             </section>
100 |             <script>
101 |                 var recordAudio;
102 |                 var audioPreview = document.getElementById('audio-preview');
103 |                 var inner = document.querySelector('.inner');
104 | 
105 |                 document.querySelector('#record-audio').onclick = function() {
106 |                     this.disabled = true;
107 |                     navigator.getUserMedia({
108 |                             audio: true
109 |                         }, function(stream) {
110 |                             audioPreview.srcObject = stream;
111 |                             audioPreview.play();
112 | 
113 |                             recordAudio = RecordRTC(stream, {
114 |                                 bufferSize: 16384,
115 |                                 recorderType: StereoAudioRecorder
116 |                             });
117 | 
118 |                             recordAudio.startRecording();
119 |                         }, function(error) { throw error;});
120 |                     document.querySelector('#stop-recording-audio').disabled = false;
121 |                 };
122 | 
123 |                 document.querySelector('#stop-recording-audio').onclick = function() {
124 |                     this.disabled = true;
125 | 
126 |                     recordAudio.stopRecording(function(url) {
127 |                         if(!!navigator.mozGetUserMedia) { // remove this if-block if you still want to use ffmpeg-asm.js in Firefox.
128 |                             log('We do not need to use ffmpeg-asm.js in Firefox.');
129 |                             log('If you are still interested to use ffmpeg-asm.js in Firefox then set <a href="https://github.com/muaz-khan/RecordRTC#recordertype">this recorderType</a> parameter.');
130 |                             log('E.g. <code>recordAudio = RecordRTC(stream, { recordertype: StereoAudioRecorder });</code>');
131 | 
132 |                             var blob = new File([recordAudio.blob], 'test.ogg', {
133 |                                 type:' audio/ogg'
134 |                             });
135 |                             audioPreview.src = URL.createObjectURL(blob);
136 |                             audioPreview.download = 'Orignal.ogg';
137 | 
138 |                             PostBlob(blob);
139 |                             return;
140 |                         }
141 | 
142 |                         audioPreview.src = url;
143 |                         audioPreview.download = 'Orignal.wav';
144 | 
145 |                         log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
146 |                         convertStreams(recordAudio.getBlob());
147 |                     });
148 |                 };
149 | 
150 |                 var workerPath = 'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
151 | 				if(document.domain == 'localhost') {
152 | 					workerPath = location.href.replace(location.href.split('/').pop(), '') + 'ffmpeg_asm.js';
153 | 				}
154 | 
155 |                 function processInWebWorker() {
156 |                     var blob = URL.createObjectURL(new Blob(['importScripts("' + workerPath + '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: message.TOTAL_MEMORY || false};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});'], {
157 |                         type: 'application/javascript'
158 |                     }));
159 | 
160 |                     var worker = new Worker(blob);
161 |                     URL.revokeObjectURL(blob);
162 |                     return worker;
163 |                 }
164 | 
165 |                 var worker;
166 | 
167 |                 function convertStreams(audioBlob) {
168 |                     var aab;
169 |                     var buffersReady;
170 |                     var workerReady;
171 |                     var posted;
172 | 
173 |                     var fileReader = new FileReader();
174 |                     fileReader.onload = function() {
175 |                         aab = this.result;
176 |                         postMessage();
177 |                     };
178 |                     fileReader.readAsArrayBuffer(audioBlob);
179 | 
180 |                     if (!worker) {
181 |                         worker = processInWebWorker();
182 |                     }
183 | 
184 |                     worker.onmessage = function(event) {
185 |                         var message = event.data;
186 |                         if (message.type == "ready") {
187 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file has been loaded.');
188 | 
189 |                             workerReady = true;
190 |                             if (buffersReady)
191 |                                 postMessage();
192 |                         } else if (message.type == "stdout") {
193 |                             log(message.data);
194 |                         } else if (message.type == "start") {
195 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file received ffmpeg command.');
196 |                         } else if (message.type == "done") {
197 |                             log(JSON.stringify(message));
198 | 
199 |                             var result = message.data[0];
200 |                             log(JSON.stringify(result));
201 | 
202 |                             var blob = new File([result.data], 'test.ogg', {
203 |                                 type: 'audio/ogg'
204 |                             });
205 | 
206 |                             log(JSON.stringify(blob));
207 | 
208 |                             PostBlob(blob);
209 |                         }
210 |                     };
211 |                     var postMessage = function() {
212 |                         posted = true;
213 | 
214 |                         worker.postMessage({
215 |                             type: 'command',
216 |                             arguments: '-i audio.wav -c:a vorbis -b:a 4800k -strict experimental output.ogg'.split(' '),
217 |                             files: [
218 |                                 {
219 |                                     data: new Uint8Array(aab),
220 |                                     name: "audio.wav"
221 |                                 }
222 |                             ]
223 |                         });
224 |                     };
225 |                 }
226 | 
227 |                 function PostBlob(blob) {
228 |                     var audio = document.createElement('audio');
229 |                     audio.controls = true;
230 | 
231 |                     var source = document.createElement('source');
232 |                     source.src = URL.createObjectURL(blob);
233 |                     source.type = 'audio/ogg; codecs=vorbis';
234 |                     audio.appendChild(source);
235 | 
236 |                     audio.download = 'Converted Audio.ogg';
237 | 
238 |                     inner.appendChild(document.createElement('hr'));
239 |                     var h2 = document.createElement('h2');
240 |                     h2.innerHTML = '<a href="' + source.src + '" target="_blank" download="Converted Audio.ogg" style="font-size:200%;color:red;">Download Converted Ogg:</a>';
241 |                     inner.appendChild(h2);
242 |                     h2.style.display = 'block';
243 |                     inner.appendChild(audio);
244 | 
245 |                     audio.tabIndex = 0;
246 |                     audio.focus();
247 |                     audio.play();
248 | 
249 |                     document.querySelector('#record-audio').disabled = false;
250 |                 }
251 | 
252 |                 var logsPreview = document.getElementById('logs-preview');
253 | 
254 |                 function log(message) {
255 |                     var li = document.createElement('li');
256 |                     li.innerHTML = message;
257 |                     logsPreview.appendChild(li);
258 | 
259 |                     li.tabIndex = 0;
260 |                     li.focus();
261 |                 }
262 | 
263 |                 window.onbeforeunload = function() {
264 |                     document.querySelector('#record-audio').disabled = false;
265 |                 };
266 |             </script>
267 | 
268 |             <section class="experiment own-widgets">
269 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/issues" target="_blank">Ffmpeg.js Issues</a>
270 |                 </h2>
271 |                 <div id="github-issues"></div>
272 |             </section>
273 | 
274 |             <section class="experiment">
275 |                 <h2 class="header" id="feedback">Feedback</h2>
276 |                 <div>
277 |                     <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
278 |                 </div>
279 |                 <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
280 |             </section>
281 | 
282 | 
283 |             <section class="experiment">
284 |                 <h2 class="header">Using ffmpeg-asm.js...</h2>
285 |                 <ol>
286 |                     <li>
287 |                         WebM can be converted in mp4.
288 |                     </li>
289 |                     <li>
290 |                         WAV can be converted in ogg or mp3 (AAC/Vorbis).
291 |                     </li>
292 |                     <li>
293 |                         WAV can be merged in mp4.
294 |                     </li>
295 |                 </ol>
296 |                 <p style="margin-top: 0;">
297 |                     If WAV or WebM is 5MB in size; ogg, mp3 or mp4 will be 700kb!
298 |                 </p>
299 |             </section>
300 | 
301 |             <section class="experiment">
302 |                 <p style="margin-top: 0;">
303 |                     Ffmpeg.js is MIT licensed on Github! <a href="https://github.com/muaz-khan/Ffmpeg.js" target="_blank">Documentation</a>
304 |                 </p>
305 |             </section>
306 | 
307 |             <section class="experiment own-widgets latest-commits">
308 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">Latest Updates</a></h2>
309 |                 <div id="github-commits"></div>
310 |             </section>
311 |         </article>
312 | 
313 |         <a href="https://github.com/muaz-khan/Ffmpeg.js" class="fork-right"></a>
314 |         <a href="https://github.com/muaz-khan/RecordRTC" class="fork-left"></a>
315 | 
316 |         <footer>
317 |             <p>
318 |                 <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
319 |                 © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
320 |                 <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
321 |             </p>
322 |         </footer>
323 | 
324 |         <!-- commits.js is useless for you! -->
325 |         <script>
326 |             window.useThisGithubPath = 'muaz-khan/Ffmpeg.js';
327 |         </script>
328 |         <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
329 |     </body>
330 | </html>
331 | 


--------------------------------------------------------------------------------
/wav-to-aac.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | > Muaz Khan     - www.MuazKhan.com
  3 | > MIT License   - www.WebRTC-Experiment.com/licence
  4 | > Documentation - github.com/muaz-khan/Ffmpeg.js
  5 | -->
  6 | <!DOCTYPE html>
  7 | <html lang="en">
  8 |     <head>
  9 |         <title>RecordRTC WAV to ACC using ffmpeg-asm.js</title>
 10 |         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 11 |         <meta charset="utf-8">
 12 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 13 |         <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
 14 |         <meta name="author" content="Muaz Khan">
 15 |         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 16 | 
 17 |         <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
 18 | 
 19 |         <style>
 20 |             audio { vertical-align: middle; }
 21 | 
 22 |             input {
 23 |                 border: 1px solid #d9d9d9;
 24 |                 border-radius: 1px;
 25 |                 font-size: 2em;
 26 |                 margin: .2em;
 27 |                 width: 30%;
 28 |             }
 29 | 
 30 |             p, .inner { padding: 1em; }
 31 | 
 32 |             li {
 33 |                 border-bottom: 1px solid rgb(189, 189, 189);
 34 |                 border-left: 1px solid rgb(189, 189, 189);
 35 |                 padding: .5em;
 36 |             }
 37 | 
 38 |             label {
 39 |                 display: inline-block;
 40 |                 width: 8em;
 41 |             }
 42 |         </style>
 43 |         <script>
 44 |             document.createElement('article');
 45 |             document.createElement('footer');
 46 |         </script>
 47 | 
 48 |         <!-- script used for audio/video/gif recording -->
 49 |         <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"> </script>
 50 |         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 51 |     </head>
 52 | 
 53 |     <body>
 54 |         <article>
 55 |             <header style="text-align: center;">
 56 |                 <h1>
 57 |                     <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> WAV to ACC using <a href="http://bgrins.github.io/videoconverter.js/">ffmpeg-asm.js</a>!
 58 |                 </h1>
 59 |                 <p>
 60 |                     <a href="https://www.webrtc-experiment.com/ffmpeg/">HOME</a>
 61 |                     <span> &copy; </span>
 62 |                     <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
 63 | 
 64 |                     .
 65 |                     <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
 66 | 
 67 |                     .
 68 |                     <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
 69 | 
 70 |                     .
 71 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/issues?state=open" target="_blank">Latest issues</a>
 72 | 
 73 |                     .
 74 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">What's New?</a>
 75 |                 </p>
 76 |             </header>
 77 | 
 78 |             <div class="github-stargazers"></div>
 79 | 
 80 |             <section class="experiment">
 81 |                 <h2 class="header">Logs</h2>
 82 |                 <ol id="logs-preview">
 83 |                     <li>
 84 |                         <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> experiment converting WAV to ACC inside the browser!
 85 |                     </li>
 86 |                 </ol>
 87 |             </section>
 88 | 
 89 |             <section class="experiment">
 90 |                 <h2 class="header">Record Audio and convert into "ACC" using <a href="https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js" download="ffmpeg-asm.js">ffmpeg-asm.js</a>!</h2>
 91 | 
 92 |                 <div class="inner">
 93 |                     <audio id="audio-preview" controls muted></audio>
 94 |                     <br>
 95 |                     <button id="record-audio">Record</button>
 96 |                     <button id="stop-recording-audio" disabled>Stop</button>
 97 |                     <br>
 98 |                 </div>
 99 |             </section>
100 |             <script>
101 |                 var recordAudio;
102 |                 var audioPreview = document.getElementById('audio-preview');
103 |                 var inner = document.querySelector('.inner');
104 | 
105 |                 document.querySelector('#record-audio').onclick = function() {
106 |                     this.disabled = true;
107 |                     navigator.getUserMedia({
108 |                             audio: true
109 |                         }, function(stream) {
110 |                             audioPreview.srcObject = stream;
111 |                             audioPreview.play();
112 | 
113 |                             recordAudio = RecordRTC(stream, {
114 |                                 bufferSize: 16384,
115 |                                 recorderType: StereoAudioRecorder
116 |                             });
117 | 
118 |                             recordAudio.startRecording();
119 |                         }, function(error) { throw error;});
120 |                     document.querySelector('#stop-recording-audio').disabled = false;
121 |                 };
122 | 
123 |                 document.querySelector('#stop-recording-audio').onclick = function() {
124 |                     this.disabled = true;
125 | 
126 |                     recordAudio.stopRecording(function(url) {
127 |                         if(!!navigator.mozGetUserMedia) { // remove this if-block if you still want to use ffmpeg-asm.js in Firefox.
128 |                             log('We do not need to use ffmpeg-asm.js in Firefox.');
129 |                             log('If you are still interested to use ffmpeg-asm.js in Firefox then set <a href="https://github.com/muaz-khan/RecordRTC#recordertype">this recorderType</a> parameter.');
130 |                             log('E.g. <code>recordAudio = RecordRTC(stream, { recordertype: StereoAudioRecorder });</code>');
131 | 
132 |                             var blob = new File([recordAudio.blob], 'test.mp3', {
133 |                                 type:' audio/mp3'
134 |                             });
135 |                             audioPreview.src = URL.createObjectURL(blob);
136 |                             audioPreview.download = 'Orignal.mp3';
137 | 
138 |                             PostBlob(blob);
139 |                             return;
140 |                         }
141 | 
142 |                         audioPreview.src = url;
143 |                         audioPreview.download = 'Orignal.wav';
144 | 
145 |                         log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
146 |                         convertStreams(recordAudio.getBlob());
147 |                     });
148 |                 };
149 | 
150 |                 var workerPath = 'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
151 | 				if(document.domain == 'localhost') {
152 | 					workerPath = location.href.replace(location.href.split('/').pop(), '') + 'ffmpeg_asm.js';
153 | 				}
154 | 
155 |                 function processInWebWorker() {
156 |                     var blob = URL.createObjectURL(new Blob(['importScripts("' + workerPath + '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: message.TOTAL_MEMORY || false};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});'], {
157 |                         type: 'application/javascript'
158 |                     }));
159 | 
160 |                     var worker = new Worker(blob);
161 |                     URL.revokeObjectURL(blob);
162 |                     return worker;
163 |                 }
164 | 
165 |                 var worker;
166 | 
167 |                 function convertStreams(audioBlob) {
168 |                     var aab;
169 |                     var buffersReady;
170 |                     var workerReady;
171 |                     var posted;
172 | 
173 |                     var fileReader = new FileReader();
174 |                     fileReader.onload = function() {
175 |                         aab = this.result;
176 |                         postMessage();
177 |                     };
178 |                     fileReader.readAsArrayBuffer(audioBlob);
179 | 
180 |                     if (!worker) {
181 |                         worker = processInWebWorker();
182 |                     }
183 | 
184 |                     worker.onmessage = function(event) {
185 |                         var message = event.data;
186 |                         if (message.type == "ready") {
187 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file has been loaded.');
188 | 
189 |                             workerReady = true;
190 |                             if (buffersReady)
191 |                                 postMessage();
192 |                         } else if (message.type == "stdout") {
193 |                             log(message.data);
194 |                         } else if (message.type == "start") {
195 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file received ffmpeg command.');
196 |                         } else if (message.type == "done") {
197 |                             log(JSON.stringify(message));
198 | 
199 |                             var result = message.data[0];
200 |                             log(JSON.stringify(result));
201 | 
202 |                             var blob = new File([result.data], 'test.mp3', {
203 |                                 type: 'audio/mp3'
204 |                             });
205 | 
206 |                             log(JSON.stringify(blob));
207 | 
208 |                             PostBlob(blob);
209 |                         }
210 |                     };
211 |                     var postMessage = function() {
212 |                         posted = true;
213 | 
214 |                         worker.postMessage({
215 |                             type: 'command',
216 |                             arguments: '',
217 |                             arguments: '-i audio.wav -c:a aac -b:a 96k -strict experimental output.mp4'.split(' '),
218 |                             files: [
219 |                                 {
220 |                                     data: new Uint8Array(aab),
221 |                                     name: "audio.wav"
222 |                                 }
223 |                             ]
224 |                         });
225 |                     };
226 |                 }
227 | 
228 |                 function PostBlob(blob) {
229 |                     var audio = document.createElement('audio');
230 |                     audio.controls = true;
231 | 
232 |                     var source = document.createElement('source');
233 |                     source.src = URL.createObjectURL(blob);
234 |                     source.type = 'audio/mp3; codecs=aac';
235 |                     audio.appendChild(source);
236 | 
237 |                     audio.download = 'Converted Audio.mp3';
238 | 
239 |                     inner.appendChild(document.createElement('hr'));
240 |                     var h2 = document.createElement('h2');
241 |                     h2.innerHTML = '<a href="' + source.src + '" target="_blank" download="Converted Audio.mp3" style="font-size:200%;color:red;">Download Converted AAC:</a>';
242 |                     inner.appendChild(h2);
243 |                     h2.style.display = 'block';
244 |                     inner.appendChild(audio);
245 | 
246 |                     audio.tabIndex = 0;
247 |                     audio.focus();
248 |                     audio.play();
249 | 
250 |                     document.querySelector('#record-audio').disabled = false;
251 |                 }
252 | 
253 |                 var logsPreview = document.getElementById('logs-preview');
254 | 
255 |                 function log(message) {
256 |                     var li = document.createElement('li');
257 |                     li.innerHTML = message;
258 |                     logsPreview.appendChild(li);
259 | 
260 |                     li.tabIndex = 0;
261 |                     li.focus();
262 |                 }
263 | 
264 |                 window.onbeforeunload = function() {
265 |                     document.querySelector('#record-audio').disabled = false;
266 |                 };
267 |             </script>
268 | 
269 |             <section class="experiment own-widgets">
270 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/issues" target="_blank">Ffmpeg.js Issues</a>
271 |                 </h2>
272 |                 <div id="github-issues"></div>
273 |             </section>
274 | 
275 |             <section class="experiment">
276 |                 <h2 class="header" id="feedback">Feedback</h2>
277 |                 <div>
278 |                     <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
279 |                 </div>
280 |                 <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
281 |             </section>
282 | 
283 | 
284 |             <section class="experiment">
285 |                 <h2 class="header">Using ffmpeg-asm.js...</h2>
286 |                 <ol>
287 |                     <li>
288 |                         WebM can be converted in mp4.
289 |                     </li>
290 |                     <li>
291 |                         WAV can be converted in ogg or mp3 (AAC/Vorbis).
292 |                     </li>
293 |                     <li>
294 |                         WAV can be merged in mp4.
295 |                     </li>
296 |                 </ol>
297 |                 <p style="margin-top: 0;">
298 |                     If WAV or WebM is 5MB in size; ogg, mp3 or mp4 will be 700kb!
299 |                 </p>
300 |             </section>
301 | 
302 |             <section class="experiment">
303 |                 <p style="margin-top: 0;">
304 |                     Ffmpeg.js is MIT licensed on Github! <a href="https://github.com/muaz-khan/Ffmpeg.js" target="_blank">Documentation</a>
305 |                 </p>
306 |             </section>
307 | 
308 |             <section class="experiment own-widgets latest-commits">
309 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">Latest Updates</a></h2>
310 |                 <div id="github-commits"></div>
311 |             </section>
312 |         </article>
313 | 
314 |         <a href="https://github.com/muaz-khan/Ffmpeg.js" class="fork-right"></a>
315 |         <a href="https://github.com/muaz-khan/RecordRTC" class="fork-left"></a>
316 | 
317 |         <footer>
318 |             <p>
319 |                 <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
320 |                 © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
321 |                 <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
322 |             </p>
323 |         </footer>
324 | 
325 |         <!-- commits.js is useless for you! -->
326 |         <script>
327 |             window.useThisGithubPath = 'muaz-khan/Ffmpeg.js';
328 |         </script>
329 |         <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
330 |     </body>
331 | </html>
332 | 


--------------------------------------------------------------------------------
/merging-wav-and-webm-into-mp4.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | > Muaz Khan     - www.MuazKhan.com
  3 | > MIT License   - www.WebRTC-Experiment.com/licence
  4 | > Documentation - github.com/muaz-khan/Ffmpeg.js
  5 | -->
  6 | <!DOCTYPE html>
  7 | <html lang="en">
  8 |     <head>
  9 |         <title>RecordRTC Merging WebM/WAV into mp4 using ffmpeg-asm.js</title>
 10 |         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 11 |         <meta charset="utf-8">
 12 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 13 |         <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
 14 |         <meta name="author" content="Muaz Khan">
 15 |         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 16 | 
 17 |         <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
 18 | 
 19 |         <style>
 20 |             video {
 21 |                 vertical-align: bottom;
 22 |                 width: 300px;
 23 |             }
 24 | 
 25 |             input {
 26 |                 border: 1px solid #d9d9d9;
 27 |                 border-radius: 1px;
 28 |                 font-size: 2em;
 29 |                 margin: .2em;
 30 |                 width: 30%;
 31 |             }
 32 | 
 33 |             p, .inner { padding: 1em; }
 34 | 
 35 |             li {
 36 |                 border-bottom: 1px solid rgb(189, 189, 189);
 37 |                 border-left: 1px solid rgb(189, 189, 189);
 38 |                 padding: .5em;
 39 |             }
 40 | 
 41 |             label {
 42 |                 display: inline-block;
 43 |                 width: 8em;
 44 |             }
 45 |         </style>
 46 |         <script>
 47 |             document.createElement('article');
 48 |             document.createElement('footer');
 49 |         </script>
 50 | 
 51 |         <!-- script used for audio/video/gif recording -->
 52 |         <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"> </script>
 53 |         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 54 |     </head>
 55 | 
 56 |     <body>
 57 |         <article>
 58 |             <header style="text-align: center;">
 59 |                 <h1>
 60 |                     <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> Merging WebM/WAV into mp4 using <a href="http://bgrins.github.io/videoconverter.js/">ffmpeg-asm.js</a>!
 61 |                 </h1>
 62 |                 <p>
 63 |                     <a href="https://www.webrtc-experiment.com/ffmpeg/">HOME</a>
 64 |                     <span> &copy; </span>
 65 |                     <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
 66 |                     .
 67 |                     <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
 68 | 
 69 |                     .
 70 |                     <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
 71 | 
 72 |                     .
 73 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/issues?state=open" target="_blank">Latest issues</a>
 74 | 
 75 |                     .
 76 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">What's New?</a>
 77 |                 </p>
 78 |             </header>
 79 | 
 80 |             <div class="github-stargazers"></div>
 81 | 
 82 |             <section class="experiment">
 83 |                 <h2 class="header">Logs</h2>
 84 |                 <ol id="logs-preview">
 85 |                     <li>
 86 |                         <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> experiment converting Merging WebM/WAV into mp4 inside the browser!
 87 |                     </li>
 88 | 
 89 |                     <li>
 90 |                         <strong>ffmpeg-asm.js</strong> is integrated with <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> by <strong>Gregory McGee</strong>!
 91 |                     </li>
 92 |                 </ol>
 93 |             </section>
 94 | 
 95 |             <section class="experiment">
 96 |                 <h2 class="header">Record audio/video and convert/merge into "mp4"!</h2>
 97 | 
 98 |                 <div class="inner">
 99 |                     <button id="record-video">Record</button>
100 |                     <button id="stop-recording-video" disabled>Stop</button>
101 |                     <br>
102 |                     <video id="video-preview" controls muted></video>
103 |                     <br>
104 |                 </div>
105 |             </section>
106 |             <script>
107 |                 var recordVideo, recordAudio;
108 |                 var videoPreview = document.getElementById('video-preview');
109 |                 var inner = document.querySelector('.inner');
110 |                 var videoFile = !!navigator.mozGetUserMedia ? 'video.gif' : 'video.webm';
111 | 
112 |                 var isFirefox = !!navigator.mozGetUserMedia;
113 | 
114 |                 document.querySelector('#record-video').onclick = function() {
115 |                     this.disabled = true;
116 |                     navigator.getUserMedia({
117 |                             audio: true,
118 |                             video: true
119 |                         }, function(stream) {
120 |                             videoPreview.srcObject = stream;
121 |                             videoPreview.play();
122 | 
123 |                             recordAudio = RecordRTC(stream, {
124 |                                 type: isFirefox ? 'video' : 'audio',
125 |                                 recorderType: isFirefox ? MediaStreamRecorder : StereoAudioRecorder // force WebAudio for all browsers even for Firefox/MS-Edge
126 |                             });
127 | 
128 |                             // todo: Firefox supports MediaRecorder API
129 |                             // however it will record both audio/video tracks into single WebM
130 |                             // Need to construct a MediaStream that is having no audio tracks
131 |                             recordVideo = RecordRTC(stream, {
132 |                                 type: videoFile.indexOf('gif') == -1 ? 'video' : 'gif',
133 |                                 recorderType: isFirefox ? MediaStreamRecorder : WhammyRecorder
134 |                             });
135 | 
136 |                             if(isFirefox) {
137 |                                 recordAudio.startRecording();
138 |                                 return;
139 |                             }
140 | 
141 |                             recordVideo.initRecorder(function() {
142 |                                 recordAudio.initRecorder(function() {
143 |                                     recordVideo.startRecording();
144 |                                     recordAudio.startRecording();
145 |                                 });
146 |                             });
147 | 
148 |                         }, function(error) { throw error;});
149 |                     document.querySelector('#stop-recording-video').disabled = false;
150 |                 };
151 | 
152 |                 document.querySelector('#stop-recording-video').onclick = function() {
153 |                     this.disabled = true;
154 | 
155 |                     recordAudio.stopRecording(function() {
156 | 
157 |                         if(isFirefox) {
158 |                             convertStreams(recordAudio.blob, recordAudio.blob);
159 | 
160 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
161 |                             return;
162 |                         }
163 | 
164 |                         recordVideo.stopRecording(function() {
165 |                             convertStreams(recordVideo.blob, recordAudio.blob);
166 | 
167 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
168 |                         });
169 |                     });
170 |                 };
171 | 
172 |                 var workerPath = 'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
173 | 				if(document.domain == 'localhost') {
174 | 					workerPath = location.href.replace(location.href.split('/').pop(), '') + 'ffmpeg_asm.js';
175 | 				}
176 | 
177 |                 function processInWebWorker() {
178 |                     var blob = URL.createObjectURL(new Blob(['importScripts("' + workerPath + '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: message.TOTAL_MEMORY || false};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});'], {
179 |                         type: 'application/javascript'
180 |                     }));
181 | 
182 |                     var worker = new Worker(blob);
183 |                     URL.revokeObjectURL(blob);
184 |                     return worker;
185 |                 }
186 | 
187 |                 var worker;
188 | 
189 |                 function convertStreams(videoBlob, audioBlob) {
190 |                     var vab;
191 |                     var aab;
192 |                     var buffersReady;
193 |                     var workerReady;
194 |                     var posted = false;
195 | 
196 |                     var fileReader1 = new FileReader();
197 |                     fileReader1.onload = function() {
198 |                         vab = this.result;
199 | 
200 |                         if (aab) buffersReady = true;
201 | 
202 |                         if (buffersReady && workerReady && !posted) postMessage();
203 |                     };
204 |                     var fileReader2 = new FileReader();
205 |                     fileReader2.onload = function() {
206 |                         aab = this.result;
207 | 
208 |                         if (vab) buffersReady = true;
209 | 
210 |                         if (buffersReady && workerReady && !posted) postMessage();
211 |                     };
212 | 
213 |                     fileReader1.readAsArrayBuffer(videoBlob);
214 |                     fileReader2.readAsArrayBuffer(audioBlob);
215 | 
216 |                     if (!worker) {
217 |                         worker = processInWebWorker();
218 |                     }
219 | 
220 |                     worker.onmessage = function(event) {
221 |                         var message = event.data;
222 |                         if (message.type == "ready") {
223 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file has been loaded.');
224 |                             workerReady = true;
225 |                             if (buffersReady)
226 |                                 postMessage();
227 |                         } else if (message.type == "stdout") {
228 |                             log(message.data);
229 |                         } else if (message.type == "start") {
230 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file received ffmpeg command.');
231 |                         } else if (message.type == "done") {
232 |                             log(JSON.stringify(message));
233 | 
234 |                             var result = message.data[0];
235 |                             log(JSON.stringify(result));
236 | 
237 |                             var blob = new Blob([result.data], {
238 |                                 type: 'video/mp4'
239 |                             });
240 | 
241 |                             log(JSON.stringify(blob));
242 | 
243 |                             PostBlob(blob);
244 |                         }
245 |                     };
246 |                     var postMessage = function() {
247 |                         posted = true;
248 | 
249 |                         if(isFirefox) {
250 |                             worker.postMessage({
251 |                                 type: 'command',
252 |                                 arguments: [
253 |                                     '-i', videoFile,
254 |                                     '-c:v', 'mpeg4',
255 |                                     '-c:a', 'vorbis',
256 |                                     '-b:v', '6400k',
257 |                                     '-b:a', '4800k',
258 |                                     '-strict', 'experimental', 'output.mp4'
259 |                                 ],
260 |                                 files: [
261 |                                     {
262 |                                         data: new Uint8Array(vab),
263 |                                         name: videoFile
264 |                                     }
265 |                                 ]
266 |                             });
267 |                             return;
268 |                         }
269 | 
270 |                         worker.postMessage({
271 |                             type: 'command',
272 |                             arguments: [
273 |                                 '-i', videoFile,
274 |                                 '-i', 'audio.wav',
275 |                                 '-c:v', 'mpeg4',
276 |                                 '-c:a', 'vorbis',
277 |                                 '-b:v', '6400k',
278 |                                 '-b:a', '4800k',
279 |                                 '-strict', 'experimental', 'output.mp4'
280 |                             ],
281 |                             files: [
282 |                                 {
283 |                                     data: new Uint8Array(vab),
284 |                                     name: videoFile
285 |                                 },
286 |                                 {
287 |                                     data: new Uint8Array(aab),
288 |                                     name: "audio.wav"
289 |                                 }
290 |                             ]
291 |                         });
292 |                     };
293 |                 }
294 | 
295 |                 function PostBlob(blob) {
296 |                     var video = document.createElement('video');
297 |                     video.controls = true;
298 | 
299 |                     var source = document.createElement('source');
300 |                     source.src = URL.createObjectURL(blob);
301 |                     source.type = 'video/mp4; codecs=mpeg4';
302 |                     video.appendChild(source);
303 | 
304 |                     video.download = 'Play mp4 in VLC Player.mp4';
305 | 
306 |                     inner.appendChild(document.createElement('hr'));
307 |                     var h2 = document.createElement('h2');
308 |                     h2.innerHTML = '<a href="' + source.src + '" target="_blank" download="Play mp4 in VLC Player.mp4" style="font-size:200%;color:red;">Download Converted mp4 and play in VLC player!</a>';
309 |                     inner.appendChild(h2);
310 |                     h2.style.display = 'block';
311 |                     inner.appendChild(video);
312 | 
313 |                     video.tabIndex = 0;
314 |                     video.focus();
315 |                     video.play();
316 | 
317 |                     document.querySelector('#record-video').disabled = false;
318 |                 }
319 | 
320 |                 var logsPreview = document.getElementById('logs-preview');
321 | 
322 |                 function log(message) {
323 |                     var li = document.createElement('li');
324 |                     li.innerHTML = message;
325 |                     logsPreview.appendChild(li);
326 | 
327 |                     li.tabIndex = 0;
328 |                     li.focus();
329 |                 }
330 | 
331 |                 window.onbeforeunload = function() {
332 |                     document.querySelector('#record-video').disabled = false;
333 |                 };
334 |             </script>
335 | 
336 |             <section class="experiment own-widgets">
337 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/issues" target="_blank">Ffmpeg.js Issues</a>
338 |                 </h2>
339 |                 <div id="github-issues"></div>
340 |             </section>
341 | 
342 |             <section class="experiment">
343 |                 <h2 class="header" id="feedback">Feedback</h2>
344 |                 <div>
345 |                     <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
346 |                 </div>
347 |                 <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
348 |             </section>
349 | 
350 | 
351 |             <section class="experiment">
352 |                 <h2 class="header">Using ffmpeg-asm.js...</h2>
353 |                 <ol>
354 |                     <li>
355 |                         WebM can be converted in mp4.
356 |                     </li>
357 |                     <li>
358 |                         WAV can be converted in ogg or mp3 (AAC/Vorbis).
359 |                     </li>
360 |                     <li>
361 |                         WAV can be merged in mp4.
362 |                     </li>
363 |                 </ol>
364 |                 <p style="margin-top: 0;">
365 |                     If WAV or WebM is 5MB in size; ogg, mp3 or mp4 will be 700kb!
366 |                 </p>
367 |             </section>
368 | 
369 |             <section class="experiment">
370 |                 <p style="margin-top: 0;">
371 |                     Ffmpeg.js is MIT licensed on Github! <a href="https://github.com/muaz-khan/Ffmpeg.js" target="_blank">Documentation</a>
372 |                 </p>
373 |             </section>
374 | 
375 |             <section class="experiment own-widgets latest-commits">
376 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">Latest Updates</a></h2>
377 |                 <div id="github-commits"></div>
378 |             </section>
379 |         </article>
380 | 
381 |         <a href="https://github.com/muaz-khan/Ffmpeg.js" class="fork-right"></a>
382 |         <a href="https://github.com/muaz-khan/RecordRTC" class="fork-left"></a>
383 | 
384 |         <footer>
385 |             <p>
386 |                 <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
387 |                 © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
388 |                 <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
389 |             </p>
390 |         </footer>
391 | 
392 |         <!-- commits.js is useless for you! -->
393 |         <script>
394 |             window.useThisGithubPath = 'muaz-khan/Ffmpeg.js';
395 |         </script>
396 |         <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
397 |     </body>
398 | </html>
399 | 


--------------------------------------------------------------------------------
/audio-plus-screen-recording.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | > Muaz Khan     - www.MuazKhan.com
  3 | > MIT License   - www.WebRTC-Experiment.com/licence
  4 | > Documentation - github.com/muaz-khan/Ffmpeg.js
  5 | -->
  6 | <!DOCTYPE html>
  7 | <html lang="en">
  8 |     <head>
  9 |         <title>Record audio+screen and get mp4!</title>
 10 |         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 11 |         <meta charset="utf-8">
 12 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 13 |         <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
 14 |         <meta name="author" content="Muaz Khan">
 15 |         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 16 | 
 17 |         <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
 18 | 
 19 |         <style>
 20 |             video {
 21 |                 vertical-align: bottom;
 22 |                 width: 300px;
 23 |             }
 24 | 
 25 |             input {
 26 |                 border: 1px solid #d9d9d9;
 27 |                 border-radius: 1px;
 28 |                 font-size: 2em;
 29 |                 margin: .2em;
 30 |                 width: 30%;
 31 |             }
 32 | 
 33 |             p, .inner { padding: 1em; }
 34 | 
 35 |             li {
 36 |                 border-bottom: 1px solid rgb(189, 189, 189);
 37 |                 border-left: 1px solid rgb(189, 189, 189);
 38 |                 padding: .5em;
 39 |             }
 40 | 
 41 |             label {
 42 |                 display: inline-block;
 43 |                 width: 8em;
 44 |             }
 45 |         </style>
 46 |         <script>
 47 |             document.createElement('article');
 48 |             document.createElement('footer');
 49 |         </script>
 50 | 
 51 |         <!-- script used for audio/video/gif recording -->
 52 |         <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"> </script>
 53 |         <script src="https://cdn.webrtc-experiment.com/getScreenId.js"></script>
 54 |         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 55 |     </head>
 56 | 
 57 |     <body>
 58 |         <article>
 59 |             <header style="text-align: center;">
 60 |                 <h1>
 61 |                     Record audio+screen and get mp4!
 62 |                 </h1>
 63 |                 <p>
 64 |                     <a href="https://www.webrtc-experiment.com/ffmpeg/">HOME</a>
 65 |                     <span> &copy; </span>
 66 |                     <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
 67 |                     .
 68 |                     <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
 69 | 
 70 |                     .
 71 |                     <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
 72 | 
 73 |                     .
 74 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/issues?state=open" target="_blank">Latest issues</a>
 75 | 
 76 |                     .
 77 |                     <a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">What's New?</a>
 78 |                 </p>
 79 |             </header>
 80 | 
 81 |             <div class="github-stargazers"></div>
 82 | 
 83 |             <section class="experiment">
 84 |                 <h2 class="header">Logs</h2>
 85 |                 <ol id="logs-preview">
 86 |                     <li>
 87 |                         <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> experiment converting Merging WebM/WAV into mp4 inside the browser!
 88 |                     </li>
 89 | 
 90 |                     <li>
 91 |                         <strong>ffmpeg-asm.js</strong> is integrated with <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> by <strong>Gregory McGee</strong>!
 92 |                     </li>
 93 |                 </ol>
 94 |             </section>
 95 | 
 96 |             <section class="experiment">
 97 |                 <h2 class="header">Record audio/screen and convert/merge into "mp4"!</h2>
 98 | 
 99 |                 <div class="inner">
100 |                     <button id="record-video">Record</button>
101 |                     <button id="stop-recording-video" disabled>Stop</button>
102 |                     <br>
103 |                     <video id="video-preview" controls muted></video>
104 |                     <br>
105 |                 </div>
106 |             </section>
107 |             <script>
108 |                 var recordVideo, recordAudio;
109 |                 var videoPreview = document.getElementById('video-preview');
110 |                 var inner = document.querySelector('.inner');
111 |                 var videoFile = !!navigator.mozGetUserMedia ? 'video.gif' : 'video.webm';
112 | 
113 |                 var isFirefox = !!navigator.mozGetUserMedia;
114 | 
115 |                 function captureScreenAndAudio(callback) {
116 |                     getScreenId(function(error, sourceId, screenConstraints) {
117 |                         if (error === 'not-installed') {
118 |                             document.write('<h1><a target="_blank" href="https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk">Please install this chrome extension then reload the page.</a></h1>');
119 |                         }
120 |                         if (error === 'permission-denied') {
121 |                             alert('Screen capturing permission is denied.');
122 |                         }
123 |                         if (error === 'installed-disabled') {
124 |                             alert('Please enable chrome screen capturing extension.');
125 |                         }
126 | 
127 |                         if (error) {
128 |                             config.onMediaCapturingFailed(error);
129 |                             return;
130 |                         }
131 |                         // first getUserMedia for screen
132 |                         // note: Firefox supports both audio+screen capturing in single getUserMedia
133 |                         navigator.getUserMedia(screenConstraints, function(screenStream) {
134 |                             // second getUserMedia for audio
135 |                             navigator.getUserMedia({
136 |                                 audio: true
137 |                             }, function(audioStream) {
138 |                                 callback(screenStream, audioStream);
139 |                             }, function(error) {
140 |                                 alert(JSON.stringify(error, null, '\t'));
141 |                             });
142 |                         }, function(error) {
143 |                             alert(JSON.stringify(error, null, '\t'));
144 |                         });
145 |                     });
146 |                 }
147 | 
148 |                 document.querySelector('#record-video').onclick = function() {
149 |                     this.disabled = true;
150 | 
151 |                     captureScreenAndAudio(function(screenStream, audioStream) {
152 |                         screenStream.onended = function() {
153 |                             document.querySelector('#stop-recording-video').onclick();
154 |                         };
155 | 
156 |                         videoPreview.style.position = 'absolute';
157 |                         videoPreview.style.top = 0;
158 |                         videoPreview.style.left = 0;
159 |                         videoPreview.style['object-fill'] = 'fill';
160 |                         videoPreview.style.width = '100%';
161 |                         videoPreview.style.height = '100%';
162 |                         videoPreview.style.zIndex = 9999999999999;
163 | 
164 |                             videoPreview.srcObject = screenStream;
165 |                             videoPreview.play();
166 | 
167 |                             recordAudio = RecordRTC(audioStream, {
168 |                                 type: isFirefox ? 'video' : 'audio',
169 |                                 // bufferSize: 16384,
170 |                                 recorderType: isFirefox ? MediaStreamRecorder : StereoAudioRecorder // force WebAudio for all browsers even for Firefox/MS-Edge
171 |                             });
172 |                             recordAudio.stream = audioStream;
173 | 
174 |                             // todo: Firefox supports MediaRecorder API
175 |                             // however it will record both audio/video tracks into single WebM
176 |                             // Need to construct a MediaStream that is having no audio tracks
177 |                             recordVideo = RecordRTC(screenStream, {
178 |                                 type: 'video',
179 |                                 recorderType: isFirefox ? MediaStreamRecorder : WhammyRecorder,
180 |                                 canvas: {
181 |                                     width: 360,
182 |                                     height: 240
183 |                                 },
184 |                                 video: videoPreview,
185 |                                 frameInterval: 90 // 30 milliseconds
186 |                             });
187 |                             recordVideo.stream = screenStream;
188 | 
189 |                             recordVideo.initRecorder(function() {
190 |                                 recordAudio.initRecorder(function() {
191 |                                     recordVideo.startRecording();
192 |                                     recordAudio.startRecording();
193 |                                 });
194 |                             });
195 |                     });
196 | 
197 |                     document.querySelector('#stop-recording-video').disabled = false;
198 |                 };
199 | 
200 |                 document.querySelector('#stop-recording-video').onclick = function() {
201 |                     if(!recordVideo.stream) return;
202 | 
203 |                     this.disabled = true;
204 | 
205 |                     recordAudio.stopRecording(function() {
206 |                         recordVideo.stopRecording(function() {
207 |                             recordVideo.stream.onended = function() {};
208 |                             recordVideo.stream.stop();
209 |                             recordAudio.stream.stop();
210 | 
211 |                             recordVideo.stream = null;
212 |                             recordAudio.stream = null;
213 | 
214 |                             videoPreview.style.position = '';
215 |                             videoPreview.style.top = 'auto';
216 |                             videoPreview.style.left = 'auto';
217 |                             videoPreview.style['object-fill'] = 'initial';
218 |                             videoPreview.style.width = 360;
219 |                             videoPreview.style.height = 240;
220 |                             videoPreview.style.zIndex = 9999999999999;
221 | 
222 |                             convertStreams(recordVideo.blob, recordAudio.blob);
223 | 
224 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
225 |                         });
226 |                     });
227 |                 };
228 | 
229 |                 var workerPath = 'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
230 | 				if(document.domain == 'localhost') {
231 | 					workerPath = location.href.replace(location.href.split('/').pop(), '') + 'ffmpeg_asm.js';
232 | 				}
233 | 
234 |                 function processInWebWorker() {
235 |                     var blob = URL.createObjectURL(new Blob(['importScripts("' + workerPath + '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: message.TOTAL_MEMORY || false};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});'], {
236 |                         type: 'application/javascript'
237 |                     }));
238 | 
239 |                     var worker = new Worker(blob);
240 |                     URL.revokeObjectURL(blob);
241 |                     return worker;
242 |                 }
243 | 
244 |                 var worker;
245 | 
246 |                 function convertStreams(videoBlob, audioBlob) {
247 |                     var vab;
248 |                     var aab;
249 |                     var buffersReady;
250 |                     var workerReady;
251 |                     var posted = false;
252 | 
253 |                     var fileReader1 = new FileReader();
254 |                     fileReader1.onload = function() {
255 |                         vab = this.result;
256 | 
257 |                         if (aab) buffersReady = true;
258 | 
259 |                         if (buffersReady && workerReady && !posted) postMessage();
260 |                     };
261 |                     var fileReader2 = new FileReader();
262 |                     fileReader2.onload = function() {
263 |                         aab = this.result;
264 | 
265 |                         if (vab) buffersReady = true;
266 | 
267 |                         if (buffersReady && workerReady && !posted) postMessage();
268 |                     };
269 | 
270 |                     fileReader1.readAsArrayBuffer(videoBlob);
271 |                     fileReader2.readAsArrayBuffer(audioBlob);
272 | 
273 |                     if (!worker) {
274 |                         worker = processInWebWorker();
275 |                     }
276 | 
277 |                     worker.onmessage = function(event) {
278 |                         var message = event.data;
279 |                         if (message.type == "ready") {
280 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file has been loaded.');
281 |                             workerReady = true;
282 |                             if (buffersReady)
283 |                                 postMessage();
284 |                         } else if (message.type == "stdout") {
285 |                             log(message.data);
286 |                         } else if (message.type == "start") {
287 |                             log('<a href="'+ workerPath +'" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file received ffmpeg command.');
288 |                         } else if (message.type == "done") {
289 |                             log(JSON.stringify(message));
290 | 
291 |                             var result = message.data[0];
292 |                             log(JSON.stringify(result));
293 | 
294 |                             var blob = new Blob([result.data], {
295 |                                 type: 'video/mp4'
296 |                             });
297 | 
298 |                             log(JSON.stringify(blob));
299 | 
300 |                             PostBlob(blob);
301 |                         }
302 |                     };
303 |                     var postMessage = function() {
304 |                         posted = true;
305 | 
306 |                         worker.postMessage({
307 |                             type: 'command',
308 |                             arguments: [
309 |                                 '-i', videoFile,
310 |                                 '-i', 'audio.wav',
311 |                                 '-c:v', 'mpeg4',
312 |                                 '-c:a', 'vorbis',
313 |                                 '-b:v', '48k',
314 |                                 '-b:a', '8k',
315 |                                 '-strict', 'experimental', 'output.mp4'
316 |                             ],
317 |                             files: [
318 |                                 {
319 |                                     data: new Uint8Array(vab),
320 |                                     name: videoFile
321 |                                 },
322 |                                 {
323 |                                     data: new Uint8Array(aab),
324 |                                     name: "audio.wav"
325 |                                 }
326 |                             ]
327 |                         });
328 |                     };
329 |                 }
330 | 
331 |                 function PostBlob(blob) {
332 |                     var video = document.createElement('video');
333 |                     video.controls = true;
334 | 
335 |                     var source = document.createElement('source');
336 |                     source.src = URL.createObjectURL(blob);
337 |                     source.type = 'video/mp4; codecs=mpeg4';
338 |                     video.appendChild(source);
339 | 
340 |                     video.download = 'Play mp4 in VLC Player.mp4';
341 | 
342 |                     inner.appendChild(document.createElement('hr'));
343 |                     var h2 = document.createElement('h2');
344 |                     h2.innerHTML = '<a href="' + source.src + '" target="_blank" download="Play mp4 in VLC Player.mp4">Download Converted mp4 and play in VLC player!</a>';
345 |                     inner.appendChild(h2);
346 |                     h2.style.display = 'block';
347 |                     inner.appendChild(video);
348 | 
349 |                     video.tabIndex = 0;
350 |                     video.focus();
351 |                     video.play();
352 | 
353 |                     document.querySelector('#record-video').disabled = false;
354 |                 }
355 | 
356 |                 var logsPreview = document.getElementById('logs-preview');
357 | 
358 |                 function log(message) {
359 |                     var li = document.createElement('li');
360 |                     li.innerHTML = message;
361 |                     logsPreview.appendChild(li);
362 | 
363 |                     li.tabIndex = 0;
364 |                     li.focus();
365 |                 }
366 | 
367 |                 window.onbeforeunload = function() {
368 |                     document.querySelector('#record-video').disabled = false;
369 |                 };
370 |             </script>
371 | 
372 |             <section class="experiment own-widgets">
373 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/issues" target="_blank">Ffmpeg.js Issues</a>
374 |                 </h2>
375 |                 <div id="github-issues"></div>
376 |             </section>
377 | 
378 |             <section class="experiment">
379 |                 <h2 class="header" id="feedback">Feedback</h2>
380 |                 <div>
381 |                     <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
382 |                 </div>
383 |                 <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
384 |             </section>
385 | 
386 | 
387 |             <section class="experiment">
388 |                 <h2 class="header">Using ffmpeg-asm.js...</h2>
389 |                 <ol>
390 |                     <li>
391 |                         WebM can be converted in mp4.
392 |                     </li>
393 |                     <li>
394 |                         WAV can be converted in ogg or mp3.
395 |                     </li>
396 |                     <li>
397 |                         WAV can be merged in mp4.
398 |                     </li>
399 |                 </ol>
400 |                 <p style="margin-top: 0;">
401 |                     If WAV or WebM is 5MB in size; ogg, mp3 or mp4 will be 700kb!
402 |                 </p>
403 |             </section>
404 | 
405 |             <section class="experiment">
406 |                 <p style="margin-top: 0;">
407 |                     RecordRTC is MIT licensed on Github! <a href="https://github.com/muaz-khan/RecordRTC" target="_blank">Documentation</a>
408 |                 </p>
409 |             </section>
410 | 
411 |             <section class="experiment own-widgets latest-commits">
412 |                 <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/Ffmpeg.js/commits/master" target="_blank">Latest Updates</a></h2>
413 |                 <div id="github-commits"></div>
414 |             </section>
415 |         </article>
416 | 
417 |         <a href="https://github.com/muaz-khan/Ffmpeg.js" class="fork-right"></a>
418 |         <a href="https://github.com/muaz-khan/RecordRTC" class="fork-left"></a>
419 | 
420 |         <footer>
421 |             <p>
422 |                 <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
423 |                 © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
424 |                 <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
425 |             </p>
426 |         </footer>
427 | 
428 |         <!-- commits.js is useless for you! -->
429 |         <script>
430 |             window.useThisGithubPath = 'muaz-khan/Ffmpeg.js';
431 |         </script>
432 |         <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
433 |     </body>
434 | </html>
435 | 


--------------------------------------------------------------------------------