web-dev-qa-db-ja.com

NotReadableError：ソースを開始できませんでした

プロジェクトにこのコードを追加しました

if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}

if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function (constraints) {

    var getUserMedia = (
      navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia
    );

    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    return new Promise(function (resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });

  };
}

次に、getUserMediaを使用してビデオストリームにアクセスしようとしています

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
}).then(stream => {
    // do stuff
}).catch(error => {
    console.log(error.name + " " + error.message);
});

エミュレータでこれをテストすると、Androidバージョン5以降で動作しますが、実際のデバイスで実行するとこのエラーが発生します

NotReadableErrorソースを開始できませんでした

アプリが適切な権限を要求するようにcordova-plugin-media-captureプラグインを追加しましたが、getUserMedia AP​​Iを使用したいプラグインを使用したくありません。

これまでの私の調査では、このエラーの理由は他のアプリがすでにカメラを使用していることですが、そうではないため、さらに一歩進んでデバイスを再起動し、他のアプリが開いていないことを確認していますアプリと私はまだエラーが発生しました。

誰にもこの問題がありましたか？

javascriptcordovagetusermedia
11
php_nub_qq

更新-14/09/2019

IOS 13およびSafari 13のSafariには変更があります。 https://developer.Apple.com/documentation/safari_release_notes/safari_13_release_notes

SFSafariViewControllerがgetUserMedia機能を獲得しました（!!!、しかしこれを確認する必要があります。動作のレポートについては下記をご覧ください）

https://bugs.webkit.org/show_bug.cgi?id=183201

ただし、WKWebViewはgetUserMedia機能を獲得していないようです。

https://bugs.chromium.org/p/chromium/issues/detail?id=752458https://bugs.webkit.org/show_bug.cgi?id=185448

iOS 13およびSafari 13リリースノート：

https://developer.Apple.com/documentation/ios_ipados_release_notes/ios_13_release_noteshttps://developer.Apple.com/documentation/safari_release_notes/safari_13_release_notes

更新-2018年4月11日-動作するIonic、Cordova、およびNativeへのリンクAndroid使用例付きの例

動作するCordovaの例へのGitHubリンク

GitHubの作業へのリンクAndroid例

作業中のGitHubリンクIonic例

Cordovaフレームワークを介してAndroidでgetUserMediaアクセスを実現する手順は次のとおりです。

  • Cordova Androidインストール手順に従ってください（ link ）
  • AndroidManifiest.xmlへのアクセス許可の追加（ link ）
  • WebRTC Adapter.js ファイルを./www/js/adapter.jsに保存し、./www/index.htmlに含める
  • cordova plugin add cordova-plugin-Android-permissionsを追加
  • プラグイン許可コードと、必要なgetUserMediaコードを./www/js/index.jsファイル内に追加します。必ずgetUserMediaアダプターを使用してください。例としてこのファイルを参照してください（ link ）。

GitHubプロジェクト内の成功とエラーの画像を含む行ごとの説明をご覧ください。

これがどれほどCordovaに関連するのかわかりません...しかし、自分でAndroid getUserMediaテストアプリ（ link ）を作成したときにこのエラーが発生しました。主にネイティブアプリのユーザー権限、次に親アプリがWebビューを作成する方法、アプリ内にパッケージ化されているwebrtcのバージョン、およびgetUserMediaを呼び出す方法に依存します。

アプリケーションのJavaScript側：自分でブラウザーシムコードを実行するのではなく、WebRTCアダプター（ link ）を使用するようにしてください。これにより、多くの一般的な問題が解消されます。ここに例を見ることができます（ link ）。また、ここでWebRTCサンプルを見ることをお勧めします（ link ）。

アプリケーションのネイティブ側：ビデオとオーディオのマイクとカメラのユーザー権限が必要です。これが主な原因です。 WebViewを作成する前に、それらが受け入れられていることを確認する必要があります。したがって、すべての許可チェック、ポップアップなどは、WebViewの作成前に実行する必要があります。おそらくアプリの再起動などが必要になった後に許可が与えられた場合.

アプリケーションをビルドおよびデプロイするときに、[アプリの設定]に移動し、まだプロンプトが表示されていない場合は手動でアクセス許可をオンにします。その後、動作するはずです。

実際のデバイスでのみエミュレーターでビデオ/オーディオエミュレーションを動作させることができませんでした。また、Android許可が受け入れられる前にWebChromeViewを利用する場合にのみNotReadableErrorが発生しました。最後にAndroidはこの機能の21親アプリケーションは、WebView onPermissionRequest（ link ）を介して実行時許可を許可する必要があるため。

多くのアプリ内ブラウザ（Facebook、Pinterestなど）は、Android WebRTCを介したWebRTCは通常動作しません。iOSでは、2018年4月現在では動作しません。 AppleはSafariを介したWebRTCアクセスのみを許可しているため、CordovaはAndroid API 21 ifを処理します許可を正しく。

11
Marcus

この特定のエラーと戦うという私の物語に解決策を追加したかったのです。 Ionic=を使用してWebRTCチャットアプリをビルドしていますが、ネイティブのAndroidビルドでこのエラーが発生しました。すべての違いをもたらしたものを次に示します。

IonicのAndroidPermissionsプラグインをインストール...

$ ionic cordova plugin add cordova-plugin-Android-permissions
$ npm install --save @ionic-native/Android-permissions

プロバイダーとしてapp.module.tsに追加することを忘れないでください

コンポーネントの。ts file ...

import { AndroidPermissions } from '@ionic-native/Android-permissions';

...

iosCordova = false; // I use these for easy if-else logic later
androidCordova = false; // but I want you to see how I handle the logic

constructor(private platform:Platform, private androidPermissions: AndroidPermissions, etc...) {
        navigator.getUserMedia = ((<any>navigator).getUserMedia || (<any>navigator).webkitGetUserMedia || (<any>navigator).mozGetUserMedia || (<any>navigator).msGetUserMedia);
        this.iosCordova = this.platform.is('ios') && typeof cordova !== 'undefined';
        this.androidCordova = this.platform.is('Android') && typeof cordova !== 'undefined';
        platform.ready().then(() => {
            if( this.androidCordova ){ // is Android Native App
                // alert("Android Native")
                androidPermissions.requestPermissions(
                [
                    androidPermissions.PERMISSION.CAMERA, 
                    androidPermissions.PERMISSION.MODIFY_AUDIO_SETTINGS,
                    androidPermissions.PERMISSION.RECORD_AUDIO
                ]
                ).then(()=>{
//getDevices uses Enumerate Devices and initWebRTC starts the chat connections, etc...
                    this.getDevices().then(() => this.initWebRTC())
                })
            }
       }) 
    }


ngOnInit() {
        if( !this.androidCordova ){ // is NOT Android Native App
            // alert("NOT Android Native")
            try {
                this.getDevices().then(() => this.initWebRTC())     
            } catch(e) {
                alert(e);
            }
        }
    }
...

config.xml at myAppName/config.xmlを調べて、xmlns：Android = "http://schemas.Android.comを追加します/ apk/res/Android "をウィジェットタグに追加し、許可リクエストを追加します。以前の既存のタグにそれらを含めようとして問題があり、これらの許可要求を終了タグのすぐ下に追加します（独自の2番目のセットを作成します）

<widget id="your.app" version="1.2.3" xmlns="http://www.w3.org/ns/widgets" xmlns:Android="http://schemas.Android.com/apk/res/Android" xmlns:cdv="http://cordova.Apache.org/ns/1.0">
...
</platform> // previously existing platform name="Android" closing tag
<platform name="Android">
    <custom-config-file parent="/manifest" target="AndroidManifest.xml">
        <uses-permission Android:name="Android.permission.CAMERA" />
        <uses-permission Android:name="Android.permission.MODIFY_AUDIO_SETTINGS" />
        <uses-permission Android:name="Android.permission.RECORD_AUDIO" />
    </custom-config-file>
</platform>
<platform name="ios"> // previously existing platform name="ios" opening tag

次に、AndroidManifest.xmlのmyAppName/platforms/Android/app/src/main/AndroidManifest.xmlにあるファイルを調べて、これらの権限を探す必要があります。存在しない場合は追加します

<uses-permission Android:name="Android.permission.CAMERA" />
<uses-permission Android:name="Android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission Android:name="Android.permission.RECORD_AUDIO" />

マニフェストでこれらの権限を宣言することは、無視されないために重要です。どうやらAndroid 26は許可を厳しくしているので、あなたは単にそれらをwilly-nillyに尋ねることはできません。実際に読んでいる文書によると、呼び出し元のコード内では、リクエストはOSによって破棄され、ユーザーには表示されません。

とにかく、私はこのすべてのIonicおよびネイティブデバイスの開発に非常に後輩なので、誰かが追加する啓発的なものを持っているなら、そうしてください！みんなありがとう！

5
Shane McCurdy