Add image2video example

2019-11-21 21:31:25 +08:00 · 2019-11-21 21:31:25 +08:00 · 761d4414b8
commit 761d4414b8
parent e06c9bd19a
65 changed files with 80 additions and 2 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -3,7 +3,8 @@
  "rules": {
    "no-underscore-dangle": 0,
    "linebreak-style": 0,
-    "global-require": 0
+    "global-require": 0,
    "no-await-in-loop": 0,
  },
  "env": {
    "browser": true,
--- 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);
 })();
--- a/src/utils/extractProgress.js
+++ b/src/utils/extractProgress.js
@ -8,7 +8,10 @@ const ts2sec = (ts) => {
 module.exports = ({ message }, progress) => {
  if (message.startsWith('  Duration')) {
    const ts = message.split(', ')[0].split(': ')[1];
-    duration = ts2sec(ts);
+    const d = ts2sec(ts);
    if (duration === 0 || duration > d) {
      duration = d;
    }
  } else if (message.startsWith('frame')) {
    const ts = message.split('time=')[1].split(' ')[0];
    const t = ts2sec(ts);
--- a/tests/assets/triangle/audio.ogg
+++ b/tests/assets/triangle/audio.ogg
--- a/tests/assets/triangle/tmp.000.png
+++ b/tests/assets/triangle/tmp.000.png
--- a/tests/assets/triangle/tmp.001.png
+++ b/tests/assets/triangle/tmp.001.png
--- a/tests/assets/triangle/tmp.002.png
+++ b/tests/assets/triangle/tmp.002.png
--- a/tests/assets/triangle/tmp.003.png
+++ b/tests/assets/triangle/tmp.003.png
--- a/tests/assets/triangle/tmp.004.png
+++ b/tests/assets/triangle/tmp.004.png
--- a/tests/assets/triangle/tmp.005.png
+++ b/tests/assets/triangle/tmp.005.png
--- a/tests/assets/triangle/tmp.006.png
+++ b/tests/assets/triangle/tmp.006.png
--- a/tests/assets/triangle/tmp.007.png
+++ b/tests/assets/triangle/tmp.007.png
--- a/tests/assets/triangle/tmp.008.png
+++ b/tests/assets/triangle/tmp.008.png
--- a/tests/assets/triangle/tmp.009.png
+++ b/tests/assets/triangle/tmp.009.png
--- a/tests/assets/triangle/tmp.010.png
+++ b/tests/assets/triangle/tmp.010.png
--- a/tests/assets/triangle/tmp.011.png
+++ b/tests/assets/triangle/tmp.011.png
--- a/tests/assets/triangle/tmp.012.png
+++ b/tests/assets/triangle/tmp.012.png
--- a/tests/assets/triangle/tmp.013.png
+++ b/tests/assets/triangle/tmp.013.png
--- a/tests/assets/triangle/tmp.014.png
+++ b/tests/assets/triangle/tmp.014.png
--- a/tests/assets/triangle/tmp.015.png
+++ b/tests/assets/triangle/tmp.015.png
--- a/tests/assets/triangle/tmp.016.png
+++ b/tests/assets/triangle/tmp.016.png
--- a/tests/assets/triangle/tmp.017.png
+++ b/tests/assets/triangle/tmp.017.png
--- a/tests/assets/triangle/tmp.018.png
+++ b/tests/assets/triangle/tmp.018.png
--- a/tests/assets/triangle/tmp.019.png
+++ b/tests/assets/triangle/tmp.019.png
--- a/tests/assets/triangle/tmp.020.png
+++ b/tests/assets/triangle/tmp.020.png
--- a/tests/assets/triangle/tmp.021.png
+++ b/tests/assets/triangle/tmp.021.png
--- a/tests/assets/triangle/tmp.022.png
+++ b/tests/assets/triangle/tmp.022.png
--- a/tests/assets/triangle/tmp.023.png
+++ b/tests/assets/triangle/tmp.023.png
--- a/tests/assets/triangle/tmp.024.png
+++ b/tests/assets/triangle/tmp.024.png
--- a/tests/assets/triangle/tmp.025.png
+++ b/tests/assets/triangle/tmp.025.png
--- a/tests/assets/triangle/tmp.026.png
+++ b/tests/assets/triangle/tmp.026.png
--- a/tests/assets/triangle/tmp.027.png
+++ b/tests/assets/triangle/tmp.027.png
--- a/tests/assets/triangle/tmp.028.png
+++ b/tests/assets/triangle/tmp.028.png
--- a/tests/assets/triangle/tmp.029.png
+++ b/tests/assets/triangle/tmp.029.png
--- a/tests/assets/triangle/tmp.030.png
+++ b/tests/assets/triangle/tmp.030.png
--- a/tests/assets/triangle/tmp.031.png
+++ b/tests/assets/triangle/tmp.031.png
--- a/tests/assets/triangle/tmp.032.png
+++ b/tests/assets/triangle/tmp.032.png
--- a/tests/assets/triangle/tmp.033.png
+++ b/tests/assets/triangle/tmp.033.png
--- a/tests/assets/triangle/tmp.034.png
+++ b/tests/assets/triangle/tmp.034.png
--- a/tests/assets/triangle/tmp.035.png
+++ b/tests/assets/triangle/tmp.035.png
--- a/tests/assets/triangle/tmp.036.png
+++ b/tests/assets/triangle/tmp.036.png
--- a/tests/assets/triangle/tmp.037.png
+++ b/tests/assets/triangle/tmp.037.png
--- a/tests/assets/triangle/tmp.038.png
+++ b/tests/assets/triangle/tmp.038.png
--- a/tests/assets/triangle/tmp.039.png
+++ b/tests/assets/triangle/tmp.039.png
--- a/tests/assets/triangle/tmp.040.png
+++ b/tests/assets/triangle/tmp.040.png
--- a/tests/assets/triangle/tmp.041.png
+++ b/tests/assets/triangle/tmp.041.png
--- a/tests/assets/triangle/tmp.042.png
+++ b/tests/assets/triangle/tmp.042.png
--- a/tests/assets/triangle/tmp.043.png
+++ b/tests/assets/triangle/tmp.043.png
--- a/tests/assets/triangle/tmp.044.png
+++ b/tests/assets/triangle/tmp.044.png
--- a/tests/assets/triangle/tmp.045.png
+++ b/tests/assets/triangle/tmp.045.png
--- a/tests/assets/triangle/tmp.046.png
+++ b/tests/assets/triangle/tmp.046.png
--- a/tests/assets/triangle/tmp.047.png
+++ b/tests/assets/triangle/tmp.047.png
--- a/tests/assets/triangle/tmp.048.png
+++ b/tests/assets/triangle/tmp.048.png
--- a/tests/assets/triangle/tmp.049.png
+++ b/tests/assets/triangle/tmp.049.png
--- a/tests/assets/triangle/tmp.050.png
+++ b/tests/assets/triangle/tmp.050.png
--- a/tests/assets/triangle/tmp.051.png
+++ b/tests/assets/triangle/tmp.051.png
--- a/tests/assets/triangle/tmp.052.png
+++ b/tests/assets/triangle/tmp.052.png
--- a/tests/assets/triangle/tmp.053.png
+++ b/tests/assets/triangle/tmp.053.png
--- a/tests/assets/triangle/tmp.054.png
+++ b/tests/assets/triangle/tmp.054.png
--- a/tests/assets/triangle/tmp.055.png
+++ b/tests/assets/triangle/tmp.055.png
--- a/tests/assets/triangle/tmp.056.png
+++ b/tests/assets/triangle/tmp.056.png
--- a/tests/assets/triangle/tmp.057.png
+++ b/tests/assets/triangle/tmp.057.png
--- a/tests/assets/triangle/tmp.058.png
+++ b/tests/assets/triangle/tmp.058.png
--- a/tests/assets/triangle/tmp.059.png
+++ b/tests/assets/triangle/tmp.059.png