From 9f7e9eee761c9512f463db7dce3727689c92f420 Mon Sep 17 00:00:00 2001
From: Jerome Wu <jeromewus@gmail.com>
Date: Tue, 3 Nov 2020 15:39:01 +0800
Subject: [PATCH] Update examples

---
 examples/browser/concatDemuxer.html | 11 ++++----
 examples/browser/image2video.html   | 16 +++++------
 examples/browser/run.html           | 44 -----------------------------
 examples/browser/transcode.html     |  9 +++---
 examples/browser/trim.html          | 10 +++----
 examples/browser/webcam.html        |  8 +++---
 examples/node/concatDemuxer.js      |  9 +++---
 examples/node/hstack.js             |  8 +++---
 examples/node/image2video.js        | 15 +++++-----
 examples/node/multiple-output.js    | 10 +++----
 examples/node/run.js                | 12 --------
 examples/node/transcode.js          |  8 +++---
 examples/node/trim.js               |  8 +++---
 13 files changed, 57 insertions(+), 111 deletions(-)
 delete mode 100644 examples/browser/run.html
 delete mode 100755 examples/node/run.js

diff --git a/examples/browser/concatDemuxer.html b/examples/browser/concatDemuxer.html
index 8afba6e..dc6fb00 100644
--- a/examples/browser/concatDemuxer.html
+++ b/examples/browser/concatDemuxer.html
@@ -23,7 +23,7 @@
     <input type="file" id="uploader" multiple />
     <p id="message"></p>
     <script>
-      const { createFFmpeg } = FFmpeg;
+      const { createFFmpeg, fetchFile } = FFmpeg;
       const ffmpeg = createFFmpeg({ log: true });
 
       const transcode = async ({ target: { files } }) => {
@@ -34,12 +34,13 @@
         const inputPaths = [];
         for (const file of files) {
           const { name } = file;
-          await ffmpeg.write(name, file);
-          inputPaths.push(name);
+          ffmpeg.FS('writeFile', name, await fetchFile(file));
+          inputPaths.push(`file ${name}`);
         }
-        await ffmpeg.concatDemuxer(inputPaths, "output.mp4");
+        ffmpeg.FS('writeFile', 'concat_list.txt', inputPaths.join('\n'));
+        await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'concat_list.txt', 'output.mp4');
         message.innerHTML = "Complete Concating";
-        const data = await ffmpeg.read("output.mp4");
+        const data = ffmpeg.FS('readFile', 'output.mp4');
         const video = document.getElementById("output-video");
         video.src = URL.createObjectURL(
           new Blob([data.buffer], {
diff --git a/examples/browser/image2video.html b/examples/browser/image2video.html
index 472611a..2ca7810 100644
--- a/examples/browser/image2video.html
+++ b/examples/browser/image2video.html
@@ -19,9 +19,9 @@
     <video id="output-video" controls></video><br/>
     <button id="start-btn">Start</button>
     <p id="message"></p>
-    <a href="https://github.com/ffmpegjs/ffmpeg.js/tree/master/tests/assets/triangle">Data Set</a>
+    <a href="https://github.com/ffmpegjs/ffmpeg.js/tree/master/examples/assets/triangle">Data Set</a>
     <script>
-      const { createFFmpeg } = FFmpeg;
+      const { createFFmpeg, fetchFile } = FFmpeg;
       const ffmpeg = createFFmpeg({ log: true });
 
       const image2video = async () => {
@@ -29,18 +29,18 @@
         message.innerHTML = 'Loading ffmpeg-core.js';
         await ffmpeg.load();
         message.innerHTML = 'Loading data';
-        await ffmpeg.write('audio.ogg', '../../tests/assets/triangle/audio.ogg');
+        ffmpeg.FS('writeFile', 'audio.ogg', await fetchFile('../assets/triangle/audio.ogg'));
         for (let i = 0; i < 60; i += 1) {
           const num = `00${i}`.slice(-3);
-          await ffmpeg.write(`tmp.${num}.png`, `../../tests/assets/triangle/tmp.${num}.png`);
+          ffmpeg.FS('writeFile', `tmp.${num}.png`, await fetchFile(`../assets/triangle/tmp.${num}.png`));
         }
         message.innerHTML = 'Start transcoding';
-        await ffmpeg.run('-framerate 30 -pattern_type glob -i *.png -i audio.ogg -c:a copy -shortest -c:v libx264 -pix_fmt yuv420p out.mp4', { output: 'out.mp4' });
-        const data = await ffmpeg.read('out.mp4');
-        await ffmpeg.remove('audio.ogg');
+        await ffmpeg.run('-framerate', '30', '-pattern_type', 'glob', '-i', '*.png', '-i', 'audio.ogg', '-c:a', 'copy', '-shortest', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', 'out.mp4');
+        const data = ffmpeg.FS('readFile', 'out.mp4');
+        ffmpeg.FS('unlink', 'audio.ogg')
         for (let i = 0; i < 60; i += 1) {
           const num = `00${i}`.slice(-3);
-          await ffmpeg.remove(`tmp.${num}.png`);
+          ffmpeg.FS('unlink', `tmp.${num}.png`);
         }
 
         const video = document.getElementById('output-video');
diff --git a/examples/browser/run.html b/examples/browser/run.html
deleted file mode 100644
index 6944a1f..0000000
--- a/examples/browser/run.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<html>
-  <head>
-    <script src="/dist/ffmpeg.dev.js"></script>
-    <style>
-      html, body {
-        margin: 0;
-        width: 100%;
-        height: 100%
-      }
-      body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-    </style>
-  </head>
-  <body>
-    <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
-    <video id="output-video" controls></video><br/>
-    <input type="file" id="uploader">
-    <p id="message"></p>
-    <script>
-      const { createFFmpeg } = FFmpeg;
-      const ffmpeg = createFFmpeg({ log: true });
-
-      const doRun = async ({ target: { files } }) => {
-        const message = document.getElementById('message');
-        const { name } = files[0];
-        message.innerHTML = 'Loading ffmpeg-core.js';
-        await ffmpeg.load();
-        message.innerHTML = 'Start transcoding';
-        await ffmpeg.write(name, files[0]);
-        await ffmpeg.run(`-i ${name} output.mp4`);
-        message.innerHTML = 'Complete transcoding';
-        const data = ffmpeg.read('output.mp4');
-
-        const video = document.getElementById('output-video');
-        video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
-      }
-      const elm = document.getElementById('uploader');
-      elm.addEventListener('change', doRun);
-    </script>
-  </body>
-</html>
diff --git a/examples/browser/transcode.html b/examples/browser/transcode.html
index d946159..25d1292 100644
--- a/examples/browser/transcode.html
+++ b/examples/browser/transcode.html
@@ -20,7 +20,7 @@
     <input type="file" id="uploader">
     <p id="message"></p>
     <script>
-      const { createFFmpeg } = FFmpeg;
+      const { createFFmpeg, fetchFile } = FFmpeg;
       const ffmpeg = createFFmpeg({ log: true });
 
       const transcode = async ({ target: { files } }) => {
@@ -28,12 +28,11 @@
         const { name } = files[0];
         message.innerHTML = 'Loading ffmpeg-core.js';
         await ffmpeg.load();
-        await ffmpeg.write(name, files[0]);
+        ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
         message.innerHTML = 'Start transcoding';
-        await ffmpeg.transcode(name,  'output.mp4');
+        await ffmpeg.run('-i', name,  'output.mp4');
         message.innerHTML = 'Complete transcoding';
-        const data = ffmpeg.read('output.mp4');
-        ffmpeg.remove('output.mp4');
+        const data = ffmpeg.FS('readFile', 'output.mp4');
 
         const video = document.getElementById('output-video');
         video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
diff --git a/examples/browser/trim.html b/examples/browser/trim.html
index 8874cda..003b915 100644
--- a/examples/browser/trim.html
+++ b/examples/browser/trim.html
@@ -15,12 +15,12 @@
     </style>
   </head>
   <body>
-    <h3>Upload a mp4 (x264) video and trim its first 10 seconds and play!</h3>
+    <h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
     <video id="output-video" controls></video><br/>
     <input type="file" id="uploader">
     <p id="message"></p>
     <script>
-      const { createFFmpeg } = FFmpeg;
+      const { createFFmpeg, fetchFile } = FFmpeg;
       const ffmpeg = createFFmpeg({ log: true });
 
       const trim = async ({ target: { files } }) => {
@@ -29,10 +29,10 @@
         message.innerHTML = 'Loading ffmpeg-core.js';
         await ffmpeg.load();
         message.innerHTML = 'Start trimming';
-        await ffmpeg.write(name, files[0]);
-        await ffmpeg.trim(name,  'output.mp4', 0, 10);
+        ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
+        await ffmpeg.run('-i', name, '-ss', '0', '-to', '1', 'output.mp4');
         message.innerHTML = 'Complete trimming';
-        const data = ffmpeg.read('output.mp4');
+        const data = ffmpeg.FS('readFile', 'output.mp4');
 
         const video = document.getElementById('output-video');
         video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
diff --git a/examples/browser/webcam.html b/examples/browser/webcam.html
index 2c8368b..eb9c5e8 100644
--- a/examples/browser/webcam.html
+++ b/examples/browser/webcam.html
@@ -23,7 +23,7 @@
     <button id="record" disabled>Start Recording</button>
     <p id="message"></p>
     <script>
-      const { createFFmpeg } = FFmpeg;
+      const { createFFmpeg, fetchFile } = FFmpeg;
       const ffmpeg = createFFmpeg({ log: true });
 
       const webcam = document.getElementById('webcam');
@@ -59,10 +59,10 @@
         message.innerHTML = 'Loading ffmpeg-core.js';
         await ffmpeg.load();
         message.innerHTML = 'Start transcoding';
-        await ffmpeg.write(name, webcamData);
-        await ffmpeg.transcode(name,  'output.mp4');
+        ffmpeg.FS('writeFile', name, await fetchFile(webcamData));
+        await ffmpeg.run('-i', name,  'output.mp4');
         message.innerHTML = 'Complete transcoding';
-        const data = ffmpeg.read('output.mp4');
+        const data = ffmpeg.FS('readFile', 'output.mp4');
 
         const video = document.getElementById('output-video');
         video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
diff --git a/examples/node/concatDemuxer.js b/examples/node/concatDemuxer.js
index 7e967a7..b2e9efe 100755
--- a/examples/node/concatDemuxer.js
+++ b/examples/node/concatDemuxer.js
@@ -1,12 +1,13 @@
 const fs = require('fs');
-const { createFFmpeg } = require('../../src');
+const { createFFmpeg, fetchFile } = require('../../src');
 
 const ffmpeg = createFFmpeg({ log: true });
 
 (async () => {
   await ffmpeg.load();
-  await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
-  await ffmpeg.concatDemuxer(['flame.avi', 'flame.avi'], 'flame.mp4');
-  fs.writeFileSync('flame.mp4', ffmpeg.read('flame.mp4'));
+  ffmpeg.FS('writeFile', 'flame.avi', await fetchFile('../assets/flame.avi'));
+  ffmpeg.FS('writeFile', 'concat_list.txt', 'file flame.avi\nfile flame.avi');
+  await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'concat_list.txt', 'flame.mp4');
+  fs.writeFileSync('flame.mp4', ffmpeg.FS('readFile', 'flame.mp4'));
   process.exit(0);
 })();
diff --git a/examples/node/hstack.js b/examples/node/hstack.js
index 87d05c0..ffa8b6a 100755
--- a/examples/node/hstack.js
+++ b/examples/node/hstack.js
@@ -1,12 +1,12 @@
 const fs = require('fs');
-const { createFFmpeg } = require('../../src');
+const { createFFmpeg, fetchFile } = require('../../src');
 
 const ffmpeg = createFFmpeg({ log: true });
 
 (async () => {
   await ffmpeg.load();
-  await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
-  await ffmpeg.run('-i flame.avi -i flame.avi -filter_complex hstack flame.mp4');
-  fs.writeFileSync('flame.mp4', ffmpeg.read('flame.mp4'));
+  ffmpeg.FS('writeFile', 'flame.avi', await fetchFile('../assets/flame.avi'));
+  await ffmpeg.run('-i', 'flame.avi', '-i', 'flame.avi', '-filter_complex', 'hstack', 'flame.mp4');
+  fs.writeFileSync('flame.mp4', ffmpeg.FS('readFile', 'flame.mp4'));
   process.exit(0);
 })();
diff --git a/examples/node/image2video.js b/examples/node/image2video.js
index eb8303f..c27a7cc 100755
--- a/examples/node/image2video.js
+++ b/examples/node/image2video.js
@@ -1,21 +1,22 @@
 const fs = require('fs');
-const { createFFmpeg } = require('../../src');
+const { createFFmpeg, fetchFile } = require('../../src');
 
 const ffmpeg = createFFmpeg({ log: true });
 
 (async () => {
   await ffmpeg.load();
-  await ffmpeg.write('audio.ogg', '../../tests/assets/triangle/audio.ogg');
+  ffmpeg.FS('writeFile', 'audio.ogg', await fetchFile('../assets/triangle/audio.ogg'));
   for (let i = 0; i < 60; i += 1) {
     const num = `00${i}`.slice(-3);
-    await ffmpeg.write(`tmp.${num}.png`, `../../tests/assets/triangle/tmp.${num}.png`);
+    ffmpeg.FS('writeFile', `tmp.${num}.png`, await fetchFile(`../assets/triangle/tmp.${num}.png`));
   }
-  await ffmpeg.run('-framerate 30 -pattern_type glob -i *.png -i audio.ogg -c:a copy -shortest -c:v libx264 -pix_fmt yuv420p out.mp4');
-  await ffmpeg.remove('audio.ogg');
+  console.log(ffmpeg.FS('readdir', '/'));
+  await ffmpeg.run('-framerate', '30', '-pattern_type', 'glob', '-i', '*.png', '-i', 'audio.ogg', '-c:a', 'copy', '-shortest', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', 'out.mp4');
+  await ffmpeg.FS('unlink', 'audio.ogg');
   for (let i = 0; i < 60; i += 1) {
     const num = `00${i}`.slice(-3);
-    await ffmpeg.remove(`tmp.${num}.png`);
+    await ffmpeg.FS('unlink', `tmp.${num}.png`);
   }
-  fs.writeFileSync('out.mp4', ffmpeg.read('out.mp4'));
+  fs.writeFileSync('out.mp4', ffmpeg.FS('readFile', 'out.mp4'));
   process.exit(0);
 })();
diff --git a/examples/node/multiple-output.js b/examples/node/multiple-output.js
index f8e3e30..93e5b0c 100755
--- a/examples/node/multiple-output.js
+++ b/examples/node/multiple-output.js
@@ -1,14 +1,14 @@
 const fs = require('fs');
-const { createFFmpeg } = require('../../src');
+const { createFFmpeg, fetchFile } = require('../../src');
 
 const ffmpeg = createFFmpeg({ log: true });
 
 (async () => {
   await ffmpeg.load();
-  await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
-  await ffmpeg.run('-i flame.avi -map 0:v -r 25 out_%06d.bmp');
-  ffmpeg.ls('/').filter((p) => p.endsWith('.bmp')).forEach((p) => {
-    fs.writeFileSync(p, ffmpeg.read(p));
+  ffmpeg.FS('writeFile', 'flame.avi', await fetchFile('../assets/flame.avi'));
+  await ffmpeg.run('-i', 'flame.avi', '-map', '0:v', '-r', '25', 'out_%06d.bmp');
+  ffmpeg.FS('readdir', '/').filter((p) => p.endsWith('.bmp')).forEach((p) => {
+    fs.writeFileSync(p, ffmpeg.FS('readFile', p));
   });
 
   process.exit(0);
diff --git a/examples/node/run.js b/examples/node/run.js
deleted file mode 100755
index a96dfcf..0000000
--- a/examples/node/run.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const fs = require('fs');
-const { createFFmpeg } = require('../../src');
-
-const ffmpeg = createFFmpeg({ log: true });
-
-(async () => {
-  await ffmpeg.load();
-  await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
-  await ffmpeg.run('-i flame.avi flame.mp4');
-  fs.writeFileSync('flame.mp4', ffmpeg.read('flame.mp4'));
-  process.exit(0);
-})();
diff --git a/examples/node/transcode.js b/examples/node/transcode.js
index a4b9558..884b3dd 100755
--- a/examples/node/transcode.js
+++ b/examples/node/transcode.js
@@ -1,5 +1,5 @@
 const fs = require('fs');
-const { createFFmpeg } = require('../../src');
+const { createFFmpeg, fetchFile } = require('../../src');
 
 const ffmpeg = createFFmpeg({
   log: true,
@@ -7,9 +7,9 @@ const ffmpeg = createFFmpeg({
 
 (async () => {
   await ffmpeg.load();
-  await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
-  await ffmpeg.transcode('flame.avi', 'flame.mp4', '-threads 2');
-  const data = ffmpeg.read('flame.mp4');
+  ffmpeg.FS('writeFile', 'flame.avi', await fetchFile('../assets/flame.avi'));
+  await ffmpeg.run('-i', 'flame.avi', 'flame.mp4');
+  const data = ffmpeg.FS('readFile', 'flame.mp4');
   fs.writeFileSync('flame.mp4', Buffer.from(data));
   process.exit(0);
 })();
diff --git a/examples/node/trim.js b/examples/node/trim.js
index b0705f3..61b8892 100755
--- a/examples/node/trim.js
+++ b/examples/node/trim.js
@@ -1,12 +1,12 @@
 const fs = require('fs');
-const { createFFmpeg } = require('../../src');
+const { createFFmpeg, fetchFile } = require('../../src');
 
 const ffmpeg = createFFmpeg({ log: true });
 
 (async () => {
   await ffmpeg.load();
-  await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
-  await ffmpeg.trim('flame.avi', 'flame_trim.avi', 0, 10);
-  fs.writeFileSync('flame_trim.avi', ffmpeg.read('flame_trim.avi'));
+  ffmpeg.FS('writeFile', 'flame.avi', await fetchFile('../assets/flame.avi'));
+  await ffmpeg.run('-i', 'flame.avi', '-ss', '0', '-to', '1', 'flame_trim.avi');
+  fs.writeFileSync('flame_trim.avi', ffmpeg.FS('readFile', 'flame_trim.avi'));
   process.exit(0);
 })();