change api a bit, update site

gijs · Nov 15, 2013 · 050a396 · 050a396
1 parent fe4a3f6
commit 050a396
Show file tree

Hide file tree

Showing 9 changed files with 275 additions and 217 deletions.
diff --git a/build/build_lgpl.sh b/build/build_lgpl.sh
@@ -2,7 +2,7 @@ echo "Beginning Build:"
 
 cd ffmpeg
 
-emconfigure ./configure --cc="emcc" --target-os=none --cpu=generic --disable-ffplay --disable-ffprobe --disable-ffserver --disable-asm --enable-pic --disable-doc --disable-devices --disable-pthreads --disable-w32threads --disable-network --enable-small --disable-hwaccels --disable-parsers --disable-bsfs --disable-debug --disable-zlib
+emconfigure ./configure --cc="emcc" --target-os=none --cpu=generic --arch=x86_64 --disable-ffplay --disable-ffprobe --disable-ffserver --disable-asm --enable-pic --disable-doc --disable-devices --disable-pthreads --disable-w32threads --disable-network --enable-small --disable-hwaccels --disable-parsers --disable-bsfs --disable-debug --disable-zlib
 make clean;
 emmake make;
 emcc -O2 -s VERBOSE=1 -s ASM_JS=0 -s ALLOW_MEMORY_GROWTH=1 -v libavutil/*.o libavcodec/*.o libavformat/*.o libavdevice/*.o libswresample/*.o libavfilter/*.o libswscale/*.o *.o -o ../ffmpeg.js --pre-js ../ffmpeg_pre.js --post-js ../ffmpeg_post.js

diff --git a/build/ffmpeg.js b/build/ffmpeg.js
diff --git a/build/ffmpeg_pre.js b/build/ffmpeg_pre.js
@@ -15,8 +15,14 @@ function ffmpeg_run(opts) {
   for (var i in opts) {
     Module[i] = opts[i];
   }
+  var outputFilePath = Module['arguments'][Module['arguments'].length - 1];
+  if (Module['arguments'].length > 2 && outputFilePath && outputFilePath.indexOf(".") > -1) {
+    Module['arguments'][Module['arguments'].length - 1] = "output/" + outputFilePath;
+  }
   Module['preRun'] = function() {
     FS.createFolder('/', Module['outputDirectory'], true, true);
+
+    /* fileData / fileName is deprecated - please use file.name and file.data instead */
     if (Module['fileData']) {
       FS.createDataFile('/', Module['fileName'], Module['fileData'], true, true);
     }
@@ -28,5 +34,19 @@ function ffmpeg_run(opts) {
   };
   Module['postRun'] = function() {
     var handle = FS.analyzePath(Module['outputDirectory']);
-    Module['return'] = handle;
+    Module['return'] = getAllBuffers(handle);
   };
+  function getAllBuffers(result) {
+    var buffers = [];
+    if (result && result.object && result.object.contents) {
+      for (var i in result.object.contents) {
+        if (result.object.contents.hasOwnProperty(i)) {
+          buffers.push({
+            name: i,
+            data: new Uint8Array(result.object.contents[i].contents).buffer
+          });
+        }
+      }
+    }
+    return buffers;
+  }
diff --git a/demo/basic.html b/demo/basic.html
@@ -46,9 +46,9 @@ <h1>FFMPEG TEST</h1>
       if (arrayBuffer) {
         var byteArray = new Uint8Array(arrayBuffer);
         var files = run("bigbuckbunny.jpg", byteArray,
-          ['-i', 'bigbuckbunny.jpg', 'output/output.jpeg']);
+          ['-i', 'bigbuckbunny.jpg', 'output.jpeg']);
         files.forEach(function(file) {
-          document.body.appendChild(getImage(file))
+          document.body.appendChild(getImage(file.data))
         })
       }
     };
@@ -66,9 +66,9 @@ <h1>FFMPEG TEST</h1>
       if (arrayBuffer) {
         var byteArray = new Uint8Array(arrayBuffer);
         var buffers = run("bigbuckbunny.webm", byteArray,
-          ['-t', '10', '-i', 'bigbuckbunny.webm', '-strict', '-2', 'output/output.mov']);
+          ['-t', '10', '-i', 'bigbuckbunny.webm', '-strict', '-2', 'output.mov']);
         buffers.forEach(function(file) {
-          document.body.appendChild(getDownloadLink(file, "output.mov"));
+          document.body.appendChild(getDownloadLink(file.data, file.name));
         });
       }
     };
@@ -85,22 +85,17 @@ <h1>FFMPEG TEST</h1>
       printErr: function (text) {
         document.querySelector("pre").textContent += "\n" + text;
       },
-      'arguments': args,
-      'fileData': data,
-      'fileName': filename
+      arguments: args,
+      files: [
+        {
+          data: data,
+          name: filename
+        }
+      ]
     };
 
     var result = ffmpeg_run(mod);
-
-    var buffers = [];
-    if (result && result.object && result.object.contents) {
-      for (var i in result.object.contents) {
-        if (result.object.contents.hasOwnProperty(i)) {
-          buffers.push(new Uint8Array(result.object.contents[i].contents).buffer);
-        }
-      }
-    }
-    console.log(buffers);
-    return buffers;
+    console.log(result);
+    return result;
   }
 </script>
diff --git a/demo/worker.js b/demo/worker.js
@@ -2,19 +2,11 @@ importScripts('../build/ffmpeg.js');
 
 var now = Date.now;
 
-function getAllBuffers(result) {
-  var buffers = [];
-  if (result && result.object && result.object.contents) {
-    for (var i in result.object.contents) {
-      if (result.object.contents.hasOwnProperty(i)) {
-        buffers.push({
-          name: i,
-          data: new Uint8Array(result.object.contents[i].contents).buffer
-        });
-      }
-    }
-  }
-  return buffers;
+function print(text) {
+  postMessage({
+    'type' : 'stdout',
+    'data' : text
+  });
 }
 
 onmessage = function(event) {
@@ -28,33 +20,18 @@ onmessage = function(event) {
       'type' : 'start',
     });
 
+    var Module = {
+      print: print,
+      printErr: print,
+      files: message.files || [],
+      arguments: message.arguments || []
+    };
+
     postMessage({
       'type' : 'stdout',
-      'data' : 'Received command: ' + args.join(" ")
+      'data' : 'Received command: ' + Module.args.join(" ")
     });
 
-    var outputFilePath = args[args.length - 1];
-    if (args.length > 2 && outputFilePath && outputFilePath.indexOf(".") > -1) {
-      args[args.length - 1] = "output/" + outputFilePath;
-    }
-
-    var Module = {
-      print: function (text) {
-        postMessage({
-          'type' : 'stdout',
-          'data' : text
-        });
-      },
-      printErr: function (text) {
-        postMessage({
-          'type' : 'stdout',
-          'data' : text
-        });
-      }
-    };
-    Module.files = message.files;
-    Module['arguments'] = args;
-
     var time = now();
     var result = ffmpeg_run(Module);
 
@@ -66,7 +43,7 @@ onmessage = function(event) {
 
     postMessage({
       'type' : 'done',
-      'data' : getAllBuffers(result)
+      'data' : result
     });
   }
 };

diff --git a/index.html b/index.html
@@ -91,7 +91,50 @@ <h2 id="docs">Usage Documentation <a href="#docs">[#]</a></h2>
               <strong>Want to try it out?</strong>
             </p>
             <p>
-              The usage instructions are still in development.  See the <a href="https://github.com/bgrins/videoconverter.js/blob/master/demo/">demo/</a> directory for a couple usage examples.
+              The usage instructions are still in development.  See the <a href="https://github.com/bgrins/videoconverter.js/blob/master/demo/">demo directory on github</a> for a couple usage examples.
+            </p>
+            <p class="warning">
+              Note: while ffmpeg.js could be loaded directly from a &lt;script&gt; tag, it should be loaded from a <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a> to prevent blocking the main thread.
+            </p>
+
+            <p>
+              To load <code>ffmpeg.js</code> inside of a web worker, we just need to call <code>importScripts('ffmpeg.js');</code> from inside the worker.  Following is a sample worker. Or, click to view a slightly bigger sample <a href="https://github.com/bgrins/videoconverter.js/blob/master/demo/worker.js">worker implementation</a> used in the <a href="demo/">demo</a>
+            </p>
+
+<pre>
+importScripts('ffmpeg.js');
+
+function print(text) {
+  postMessage({
+    'type' : 'stdout',
+    'data' : text
+  });
+}
+
+onmessage = function(event) {
+  var module = {
+    files: event.data.files || [],
+    arguments: event.data.arguments || [],
+    print: print,
+    printErr: print
+  };
+  postMessage({
+    'type' : 'starting',
+    'data' : module.arguments
+  });
+  var result = ffmpeg_run(module);
+  postMessage({
+    'type' : 'done',
+    'data' : result
+  });
+};
+
+postMessage({
+  'type' : 'ready'
+});
+</pre>
+            <p>
+Then, from your script start up the worker:
             </p>
 
             <h2 id="build">Build It <a href="#build">[#]</a></h2>

diff --git a/perf-tests/jsperf.md b/perf-tests/jsperf.md
@@ -34,8 +34,10 @@ Test
             print: function () { },
             printErr: function () { },
                 'arguments': ['-i', 'input.png', 'output/output.jpeg'],
-                'fileData': data,
-                'fileName': 'input.png'
+                'files': [{
+                    data: data,
+                    name: 'input.png'
+                }]
         };
         ffmpeg_run(mod);
     }
@@ -55,10 +57,11 @@ Test 2
                 document.querySelector("pre").textContent += "\n" + text;
             },
             'arguments': ['-i', 'input.png', 'output/output.jpeg'],
-            'fileData': data,
-            'fileName': 'input.png'
+            'files': [{
+                data: data,
+                name: 'input.png'
+            }]
         };
-
         ffmpeg_run(mod);
     }
 

diff --git a/perf-tests/worker.js b/perf-tests/worker.js
@@ -28,18 +28,12 @@ function run(filename, data, args) {
         });
       },
       'arguments': args,
-      'fileData': data,
-      'fileName': filename
+      'files': [{
+        data: data,
+        name: filename
+      }]
     };
 
     var result = ffmpeg_run(mod);
-    var buffers = [];
-    if (result && result.object && result.object.contents) {
-      for (var i in result.object.contents) {
-        if (result.object.contents.hasOwnProperty(i)) {
-          buffers.push(new Uint8Array(result.object.contents[i].contents).buffer);
-        }
-      }
-    }
-    return buffers;
+    return result;
 }
diff --git a/site/site.css b/site/site.css
@@ -115,12 +115,22 @@ h1 span {
   margin-left: 5px;
 }
 
+.warning {
+  background-color: #FEE8E8;
+  border: 1px solid #DDD;
+  font-size: 13px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+  border-radius: 3px;
+}
 
 code, pre {
   font-family: Consolas,"Liberation Mono",Courier,monospace;
-  font-size: 12px;
 }
+
 pre {
+  font-size: 12px;
   background-color: #F8F8F8;
   border: 1px solid #DDD;
   font-size: 13px;
@@ -132,8 +142,9 @@ pre {
 pre code {
   color: #333;
 }
+
 code {
-  color: #33e;
+  color: #696;
   font-family: inherit;
 }