MediaRecorder APIでCanvasを録画してみる

2020.2.5

ブラウザで動画をトリミングして軽く編集できるツールを作りたくて色々調査していくとMediaRecorderというAPIで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;
});

drawingがtrueの間、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を応用して複数の動画を結合させるサンプルを作ってみたいです。