はじめに

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に渡した場合、うまく動作しなかったため、それぞれで処理を分けています。

以上

【Android】 getUserMediaでカメラ映像が表示されない

はじめに

Androidでカメラとオーディオデバイスを使う

Crosswalkの導入

カメラとオーディオデバイスへのアクセス権の取得

getUserMediaによるカメラとオーディオデバイスへのアクセス

コメントを残すコメントをキャンセル

はじめに

Androidでカメラとオーディオデバイスを使う

Crosswalkの導入

カメラとオーディオデバイスへのアクセス権の取得

getUserMediaによるカメラとオーディオデバイスへのアクセス

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル