MediaRecorderは便利だけどまだちょっと辛い

ブラウザで音声や映像を記録するためのAPIとして
MediaRecorderがあります。
これを使うと、音声や映像をデバイスからサクっと取ってBlobに出来ます。

const media = await navigator.mediaDevices.getUserMedia({ audio: true });
      const recorder = new MediaRecorder(media);
      recorder.addEventListener('dataavailable',(event:BlobEvent) => {
        const data:Blob = event.data;
        //Blobを使った処理
      })
      recorder.start();

こんな感じにサクっとカメラやマイクのデータが取れます。

が、色々厳しいところがまだあります。

typescriptの型定義が追い付いていない

実は上記のtypescriptコード、そのままだとコンパイルが通りません。
MediaRecorderやBlobEventが標準ではまだ存在していないので自分で足してやる必要があります。

非対応ブラウザがあるのでpolyfillが必須

上記のMDNを見ても、IEどころかEdgeが真っ赤ですし、？になっているiOSのsafariも普通にダメでした。
ついでに、この辺りのpolyfillに標準でtypescriptの型定義が付いているのがなかったので、
結局そこは自分で頑張るかanyでごまかすしかありません。
(型が付いているextendable-media-recorderというものもあったものの、こちらは逆にクロスブラウザ対応していない)

まとめ

• 便利だけどカバーされていない部分も多いので注意