Help us understand the problem. What is going on with this article?

ブラウザでFFMPEGを使えます

はじめに

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

Screen Shot 2020-06-18 at 12.41.20.png

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

mehdi
cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした