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

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というものもあったものの、こちらは逆にクロスブラウザ対応していない)

まとめ

  • 便利だけどカバーされていない部分も多いので注意
xx2xyyy
技術チーム新設に伴い、新人CTOになりました。 日々修行中です。
english-bootcamp
2日20時間の超短期集中英会話スクールを運営。Webやアプリへの展開も計画中です。
https://english-bootcamp.com/
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
ユーザーは見つかりませんでした