🧊

ReactNativeでgetUserMedia()する

端末カメラとマイクにアクセスできるWebRTCの`getUserMedia()`ですが、iOS Safariにはまだ未実装です。

なので、現時点ではReactNative的ななんらかの環境の上で動かすしかないです。
そしてReactNativeでも公式サポートされてるわけではなく、外部のライブラリに頼る必要があります。

GitHub - oney/react-native-webrtc: A WebRTC module for React Native.

そんな外部ライブラリの中でもWebRTCやるならコレ！っていうイチオシが、`react-native-webrtc`というわけで、これを使って`getUserMedia()`に至るまでのメモです。

インストール

react-native-webrtc/iOSInstallation.md at master · oney/react-native-webrtc · GitHub

iOSもAndroidもそれぞれ丁寧なドキュメントがあるけど、それでもつらい。
Xcode力が低いとつらい。

とりあえずコードは一切書かずに、Build Succeededするまでがんばるしかない。

なんかよくわからなくなったら、いったん全消ししてやり直すが吉です。

パーミッション

`getUserMedia()`では端末のカメラとマイクにアクセスするんですが、権限がなかったり拒否してたりすると即クラッシュします。
メソッドを叩く前に、ちゃんと許可をとっておく必要があります。

GitHub - yonahforst/react-native-permissions: Check and request user permissions in ReactNative (iOS and Android)

こういう便利なライブラリを使って、`camera`と`microphone`のパーミッションを。

import Permissions from 'react-native-permissions';

Promise.all([
  Permissions.requestPermission('camera'),
  Permissions.requestPermission('microphone'),
])
.then(([cam, mic]) => {
  // do something...
});

ちなみにこういうコードに加えて、

Xcodeの設定の`Info` -> `Custom iOS Target Properties`ってとこに、

  • `Privacy - Camera Usage Description`
  • `Privacy - Microphone Usage Description`

っのを追加しないとダメ。`Value`は空っぽでOK。

Xcodeまじ難しい。

その他

  • `RTCView`に幅高さを適切に指定してないと、`streamURL`があっても表示が出ない
  • `getUserMedia()`は最新のAPIだと`Promise`ベースですが、このライブラリは未対応っぽい
    • PRはあったのでそのうち対応されそう
  • `MediaStreamConstraints`で`video: true`ってするとクラッシュする
    • とりあえずONにしたい場合の最低限は、`video: { mandatory: {} }`らしい。謎。

そんなこんなのGistも置いておきます。

getUserMedia() w/ React Native WebRTC · GitHub

`RTCPeerConnection`を使ったどうのこうのはまた今度。

ReactNativeやるくらいならSwiftやるわーってずっと思ってたけど、ここまで用意されてるならSwiftで0から頑張るよりもいいかな・・って気持ちになりますね。
トータルで見るとまだまだSwiftやるわーって感じやけど。