MediaRecorderでブラウザ上で音声と映像を取得してWebm形式で保存する

javascript
MediaRecorderでブラウザ上で音声と映像を取得してWebm形式で保存する
目次

GCPやAzure等のSaaSにて音声認識や画像認識を使う際、予め録音しておいた音声データを学習用の元データとして使うことができます。 ここでは、Webブラウザを使って簡単に録画・録音する方法を紹介したいと思います。

ゴール

  • 16kbpsのwebm形式のデータが保存できること

動作環境

今回は以下の環境で実装

  • Google Chrome (v81.0)

MediaRecorderを使って録画、録音する

MediaRecorder を使うことで、簡単にPCのカメラやマイクから簡単にブラウザ上で録画、録音できます。録画・録音する対象は navigator.mediaDevices.getUserMedia で取得できる MediaStream になります。

1  navigator.mediaDevices.getUserMedia({
2    audio: true,
3    video: true
4  }).then((stream) => {
5    // ここに処理を追加する
6  })

取得した MediaStreamを MediaRecorder に渡してインスタンス化します。第二引数にはMIMETYPEやビットレートのオプションを指定できます。

1  var recorder = new MediaRecorder(stream, {
2    mimeType: 'video/webm;codecs=vp8',
3    audioBitsPerSecond: 16 * 1000
4  });

dataavailable イベント発火時にデータが定期的に入ってくるのでデータチャンクに入れるようにリスナーに登録しておきます。

1  var chunks = [];
2  recorder.addEventListener('dataavailable', function(ele) {
3    if (ele.data.size > 0) {
4      chunks.push(ele.data);
5    }
6  });

最後に、MediaRecorder が停止された時にチャンクのデータをダウンロードできるようにオブジェクトを生成します。

1  recorder.addEventListener('stop', function() {
2    var obj = new Blob(chunks);
3    var dl = document.querySelector("#dl");
4    dl.href = URL.createObjectURL(new Blob(chunks));
5    dl.download = 'webm_test.webm';
6  });

MediaRecorder の開始と停止はそれぞれ start stop 関数です。

1  recorder.start();
1  recorder.stop();