あなたのサービスを最強にするためのMediaDevices

WebRTCを用いてWeb会議サービスなどを開発する際に、MediaDevicesを活用してより良いサービスを作るためのtipsを紹介します。

WebRTC Meetup Tokyo #26の発表資料です。
https://webrtcmeetup.connpass.com/event/301967/

• enumerateDevices()を使って、利用するデバイスを指定可能にしましょう
• MediaRecorderを使って、音声のチェック機能を実装しましょう
• [宣伝] もし良ければreact-select-media-devices-modal使ってみてください!! ◦ Star、使ってみた報告、Issue、Pull Request大歓迎です!!

Transcript

1. あなたのサービスを最強にするた めのMediaDevices WebRTC Meetup Tokyo #26 2023/12/15
2. 自己紹介 • @sublimer • NTT CommunicationsでSkyWayを作るお仕事をしています • 自宅サーバー運用をしたりアプリケーション開発をするのが趣味 • WebRTCを使ったアプリケーション開発時に使えるReactコンポーネントライブラリ を作ったので、その時に得られた知見をお話します(⭐付けていただけると喜びま す)
3. 本日お話すること・しないこと • お話すること ◦ MediaDevicesの概要 ◦ MediaDevicesの実用的な使い方の紹介 • お話しないこと ◦ Reactコンポーネントライブラリの作り方 ◦ WebRTCを使ったサービスの作り方 • 今日のゴール ◦ WebRTCを使ったサービスを作るときに、 UXを向上させるためのポイントを抑える
4. MediaDevicesとは • WebRTCで、JavaScriptからカメラやマイクにアクセスする際に使うAPI • (たぶん)一番有名なのはgetUserMedia() • 他にも、getDisplayMedia()[1] やenumerateDevices()[2] といったメソッドがある • devicechange[3] イベントを拾えば、デバイスの接続・切断を検知できる ”MediaDevices インターフェイスは、カメラやマイク、さらに画面共有などの接続されたメディア入力機器へのアクセスを提供します。 要するに、メディアデータのソースであるハードウェアにアクセスすることができるようになります。” https://developer.mozilla.org/ja/docs/Web/API/MediaDevices [1]. https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getDisplayMedia [2]. https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/enumerateDevices [3]. https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/devicechange_event
5. • これを使うと何が嬉しいのかというと、デバイスの選択機能を実装できる • 複数のカメラ・マイクが接続されていたり、音声を特定のスピーカーから出力したい 場合は、enumerateDevices()を介して取得したdeviceIdを使う必要がある • getUserMedia()の引数(MediaTrackConstraints[1] )でdeviceIdを指定すると、その デバイスからメディアを取得する • HTMLMediaElementのsetSinkId()[2] にdeviceIdを渡すと、そのデバイスからメディ アが再生される • deviceIdを指定しないと、ブラウザのデフォルトのデバイスが使われるため、意図し ていないメディアが流れたりしてしまう • 利用するデバイスを設定可能にして、サービスのUXを高めましょう!! enumerateDevices()を使う [1]. https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints [2]. https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/setSinkId
6. • enumerateDevices()を呼び出すだけだと、deviceIdやlabelが取得できない • 予めgetUserMedia()を呼び出して、MediaStreamを取得してから enumerateDevices()を呼び出すと良い • HTMLMediaElementのsetSinkId()は、モバイルのブラウザとSafariは非対応[1] enumerateDevices()の注意点 [1]. https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/setSinkId#ブラウザーの互換性
7. • MediaRecorder[1] は、MediaStreamの記録を行うためのAPI • これと音声のMediaStreamを組み合わせて、自分の声を録音できる • Web会議を行う際に、自分の声が相手にどう聞こえているかは分からない • 予め自分の声を録音し、手元で再生することで、音質などに問題がないかをチェッ クできる • 映像のプレビュー表示に加えて、音声のチェック機能も実装してサービスのUXを高 めましょう!! MediaRecorderを使う [1]. https://developer.mozilla.org/ja/docs/Web/API/MediaRecorder
8. • enumerateDevices()を使って、利用するデバイスを指定可能にしましょう • MediaRecorderを使って、音声のチェック機能を実装しましょう • [宣伝] もし良ければreact-select-media-devices-modal使ってみてください!! ◦ Star、使ってみた報告、Issue、Pull Request大歓迎です!! まとめ
9. 補足情報 • https://sublimer.hatenablog.com/entry/2023/05/10/084225