Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@xx2xyyy

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

More than 1 year has passed since last update.

ブラウザで音声や映像を記録するための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というものもあったものの、こちらは逆にクロスブラウザ対応していない)

まとめ

  • 便利だけどカバーされていない部分も多いので注意
1
Help us understand the problem. What is going on with this article?
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
xx2xyyy
技術チーム新設に伴い、新人CTOになりました。 日々修行中です。
english-bootcamp
2日20時間の超短期集中英会話スクールを運営。Webやアプリへの展開も計画中です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?