MediaRecorder APIでCanvasを録画してみる

February 05, 2020

ブラウザで動画をトリミングして軽く編集できるツールを作りたくて色々調査していくとMediaRecorderというAPIでCanvasをまるまる録画して動画データに変換できることを知りました。

MediaRecorder - Web API | MDN

Canvasにマウスで線を引く様子を録画する

Canvas上にマウスで線を引く様子を動画ファイルに変換するサンプルを作りました。

Canvasを録画するサンプル

MediaRecorderの使い方

Canvasのstreamをコンストラクタに入れます。オプションとしてmimetypeを設定することができます。

const stream = canvas.captureStream();
recorder = new MediaRecorder(stream, { mimeType: "video/webm;codecs=vp9" });

ブラウザがサポートしているmimetypeはMediaRecorder.isTypeSupportedで調べることができます。

MediaRecorder.isTypeSupported - Web API | MDN

recorder.startで録画開始します。

recorder.start();

recorder.stopで録画終了します。

recorder.stop();

データが使用可能になるときのイベントがMediaRecorder.ondataavailableです。これによりBlobデータが使用可能になります。

MediaRecorder.ondataavailable - Web API | MDN

recorder.ondataavailable = e => {
  const blob = new Blob([e.data], { type: e.data.type });
}

Canvasにマウスで線を引く

マウスでドラッグして点を描画していくだけです。これと言って特別なことはしていません。 Canvas要素から2d contextを取得します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
let drawing = false;

mousedownのタイミングでdrawingフラグをtrueにします。

canvas.addEventListener('mousedown', function(e) {
  drawing = true;
});

drawingtrueの間、mausemoveでCanvas上に四角形を描画していきます。

canvas.addEventListener('mousemove', (e) => {
  if (drawing) {
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    ctx.fillStyle = "black";
    ctx.fillRect(x, y, 2, 2);
  }
});

mouseupのタイミングで描画を終了します。

canvas.addEventListener('mouseup', function() {
  drawing = false;
});

MediaRecorderを応用したい

videoタグやaudioタグのstreamも記録できるのでビデオを変換することもできます。ただ、対応しているmimetypeが少ないんじゃないかなと思っています。

次はMediaRecorderを応用して複数の動画を結合させるサンプルを作ってみたいです。