Add image2video example

2019-11-21 21:31:25 +08:00
parent e06c9bd19a
commit 761d4414b8
65 changed files with 80 additions and 2 deletions
--- a/examples/browser/image2video.html
+++ b/examples/browser/image2video.html
@@ -0,0 +1,51 @@
+<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>Click start to transcode images to mp4 (x264) and play!</h3>
+    <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>
+    <script>
+      const { createWorker } = FFmpeg;
+      const worker = createWorker({
+        corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
+        progress: (p) => console.log(p),
+      });
+
+      const image2video = async () => {
+        const message = document.getElementById('message');
+        message.innerHTML = 'Loading ffmpeg-core.js';
+        await worker.load();
+        message.innerHTML = 'Loading data';
+        await worker.write('audio.ogg', '../../tests/assets/triangle/audio.ogg');
+        for (let i = 0; i < 60; i += 1) {
+          const num = `00${i}`.slice(-3);
+          await worker.write(`tmp.${num}.png`, `../../tests/assets/triangle/tmp.${num}.png`);
+        }
+        message.innerHTML = 'Start transcoding';
+        await worker.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 } = await worker.read('out.mp4');
+
+        const video = document.getElementById('output-video');
+        video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
+      }
+      const elm = document.getElementById('start-btn');
+      elm.addEventListener('click', image2video);
+    </script>
+  </body>
+</html>
--- a/examples/node/image2video.js
+++ b/examples/node/image2video.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+const { createWorker } = require('../../src');
+
+const worker = createWorker({
+  progress: (p) => console.log(p),
+});
+
+(async () => {
+  console.log('Loading ffmpeg-core.js');
+  await worker.load();
+  console.log('Loading data');
+  await worker.write('audio.ogg', '../../tests/assets/triangle/audio.ogg');
+  for (let i = 0; i < 60; i += 1) {
+    const num = `00${i}`.slice(-3);
+    await worker.write(`tmp.${num}.png`, `../../tests/assets/triangle/tmp.${num}.png`);
+  }
+  console.log('Start transcoding');
+  await worker.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 } = await worker.read('out.mp4');
+  console.log('Complete transcoding');
+  fs.writeFileSync('out.mp4', Buffer.from(data));
+  process.exit(0);
+})();