はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

What is ffmpeg.wasms ・ ffmpeg.wasmとは

ffmpeg.wasm is a library that allows you to use FFmpeg directly in your browser without any backend services.
ffmpeg.wasmは、FFmpegをバックエンドサービスなしでブラウザーで直接使用できるライブラリです。

Objective　・　目的

Learning how to use ffmpeg.wasm via a simple example.
簡単な例でffmpeg.wasmの使用方法を学びます。

Implementation ・ 実装

You can use this example to convert .mov files to .mp4 files (x264).
この例を使用して、.movファイルを.mp4ファイル（x264）に変換できます。

<html>
<head>
  <script src="//cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.8.3/dist/ffmpeg.min.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 muted autoplay></video><br />
  <br>
  <input type="file" id="uploader">
  <p id="message"></p>
  <br>

  <div>
    <textarea id='log' rows=30 cols=100 autofocus></textarea>
  </div>

  <br>
  <script>
    var txt = document.getElementById('log');
    const {
      createFFmpeg
    } = FFmpeg;
    const ffmpeg = createFFmpeg({
      log: true,
      logger: ({
        message
      }) => {
        txt.value += "\n" + message;
      }
    });

    const transcode = async ({
      target: {
        files
      }
    }) => {
      const message = document.getElementById('message');
      const {
        name
      } = files[0];
      message.innerHTML = 'Loading ffmpeg-core.js';
      await ffmpeg.load();
      await ffmpeg.write(name, files[0]);
      message.innerHTML = 'Start transcoding';
      await ffmpeg.transcode(name, 'output.mp4');
      message.innerHTML = 'Transcoding completed';
      const data = ffmpeg.read('output.mp4');
      ffmpeg.remove('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', transcode);
  </script>
</body>

</html>

DEMO　・　デモ

https://codepen.io/mr1985/pen/jOWVeGN

Information sources ・ 情報元

https://github.com/ffmpegwasm/ffmpeg.wasm
https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/docs/api.md

元記事はこちら

「ブラウザでFFMPEGを使えます」