はじめに
WebRTCでは、getUserMediaのメソッドを使って、カメラとオーディオデバイスにアクセスしますが、Andorid端末でカメラ映像が表示されず手間取ったため、備忘録に記載しておきます。結論からいうとカメラへのアクセス権がうまく設定出来ていませんでした。
Androidでカメラとオーディオデバイスを使う
Crosswalkの導入
AndroidでWebRTCを使ってカメラとオーディオデバイスにアクセスする場合、getUserMediaメソッドを利用しますが、Androidバージョン違いの挙動差異の吸収やパフォーマンス向上のため、Crosswalkを導入するのがおすすめです。Crosswalkとは、ChromiumベースのWebViewエンジンで、アプリそのものにWebViewエンジンを組み込むことができます。そのため、Android OSのWebViewエンジンに依存せずにアプリを動作させることができます。
一方で、Crosswalkを利用するデメリットとしては、アプリのファイルサイズが大きくなってしまうことが挙げられます。またCrosswalkがサポートしているのは、Android 4.1以降になります。
IonicでCrosswalkを利用するためには、Crosswalkのプラグインをインストールします。
$ ionic cordova plugin add cordova-plugin-crosswalk-webview
カメラとオーディオデバイスへのアクセス権の取得
次に、カメラとオーディオデバイスにアクセスするためのアクセス権の取得設定を行います。
なお、アクセス権の設定は、Android 6.0から方式が変更になっており、従来の設定に加えて、アプリ実行時にアクセス権の取得が必要になります。
まずは、Androidのバージョンに関わらず、Config.xmlにカメラとオーディオのアクセス権の取得設定を行います。
- <widget>タグの中に、以下を追加
xmlns:android="http://schemas.android.com/apk/res/android"
- <platform name=”android”>タグの範囲に以下を追加
<config-file parent="/*" target="AndroidManifest.xml"> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> </config-file>
- Android 6.0以降に対応するために、実行時のアクセス権をチェック・取得するためのプラグインをインストール
$ ionic cordova plugin add cordova-plugin-android-permissions
- JavaScriptのソースに、アクセス権の取得コードを追加。なお、Android 6.0未満の場合に本コードを実行するとエラーになるため、Androidのバージョンをチェックしてから実行。
//Permission Check for android 6.0+ if (ionic.Platform.is('android') === true){ if (ionic.Platform.version() >= 6.0){ var permissions = cordova.plugins.permissions; //Camera Permission Check permissions.hasPermission(permissions.CAMERA, function(status){ if (!status.hasPermission){ var errorCallback = function() { alert('Camera permission is not turned on'); } permissions.requestPermission( permissions.CAMERA, function(status) { if(!status.hasPermission) errorCallback(); }, errorCallback ); } }); //Microphone Permission Check permissions.hasPermission(permissions.RECORD_AUDIO, function(status){ if (!status.hasPermission){ var errorCallback = function() { alert('Microphone permission is not turned on'); } permissions.requestPermission( permissions.RECORD_AUDIO, function(status) { if(!status.hasPermission) errorCallback(); }, errorCallback ); } }); } }
getUserMediaによるカメラとオーディオデバイスへのアクセス
デバイスへのアクセス権の取得後、getUserMediaを実行
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function (stream) { // success
localStream = stream;
localVideo.src = window.URL.createObjectURL(localStream);
})
.catch(function (error) { // error
alert("mediaDevice.getUserMedia() error:"+error);
return;
});
- getUserMediaでエラーが発生したり、映像が表示されない場合は、前記のPermissionの設定が正常に反映されていない可能性があります。Anroidの設定のアプリから、対象のアプリのPermissionを確認して、CameraとMicrophoneが許可されているか確認してください。
- getUserMediaを使う場合、セキュリティー上の理由から、接続先のサーバがHTTPSに対応している必要があります。そのため、IonicのLiveReloadを利用した場合、Android端末が開発用PCにHTTPで接続するため、getUserMediaが利用できません。
- CAMERAとRECORD_AUDIOのPermissionチェックに当たって、それらを配列にしてhasPermissionに渡した場合、うまく動作しなかったため、それぞれで処理を分けています。
以上