NotReadableError:无法启动源代码

Question

我在我的项目中添加了这段代码

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插件以确保我的应用程序将请求相应的权限,但是我不想使用插件我宁愿使用getUserMediaAPI.

到目前为止,我的研究表明,这个错误的原因是其他一些应用程序已经在使用相机但事实并非如此,我甚至更进一步重新启动设备,然后打开我的应用程序,确保没有其他运行应用程序,我仍然有错误.

有人有这个问题吗？

Answer 1

更新 - 04/11/2018 - 链接到工作Ionic,Cordova和Native android示例和说明

GitHub链接到工作的Cordova示例

GitHub链接到正在运行的Android示例

GitHub链接到一个工作的Ionic示例

通过Cordova框架在Android上实现getUserMedia访问的步骤如下:

• 关注Cordova Android安装说明(链接)
• 向AndroidManifiest.xml添加权限(链接)
• 将WebRTC Adapter.js文件保存到./www/js/adapter.js并包含在中./www/index.html
• 加 cordova plugin add cordova-plugin-android-permissions
• 在./www/js/index.js文件中添加插件权限代码和必要的getUserMedia代码.确保使用getUserMedia适配器.请以此文件为例(链接).

请在GitHub项目中查看完整的逐行说明以及成功和错误图像.

我不确定这与Cordova有多大关系......但是当我制作自己的Android getUserMedia测试应用程序(链接)时,我遇到了这个错误.它主要依赖于本机应用程序用户权限,然后父应用程序如何创建Web视图,哪个版本的webrtc打包在您的应用程序中,以及您如何调用getUserMedia.

应用程序的JavaScript方面: 不要自己做浏览器填充代码,而是确保使用WebRTC适配器(链接).这消除了许多常见问题.你可以在这里看到一个例子(链接).我还建议在这里查看WebRTC示例(链接).

应用程序的原生端: 您将需要视频和音频的麦克风和相机用户权限.这是罪魁祸首.您需要确保在创建WebView之前已接受它们.因此,所有权限检查,弹出窗口等都需要在创建WebView之前进行.如果在您很可能需要重新启动应用程序之后授予权限,等等.

构建和部署应用程序时,如果尚未提示您,请转到"应用程序设置"并手动打开权限.然后它应该工作.

我无法仅在实际设备上使用模拟器中的视频/音频仿真工作.在接受权限之前,我也只在使用WebChromeView的Android上遇到了NotReadableError.最后,Android的min API版本为21(Lollipop),因为父应用程序需要通过WebView onPermissionRequest(链接)允许运行时权限.

由于许多应用程序内浏览器(Facebook,Pinterest等)不通过网站处理Android WebRTC上的onPermissionRequest通常不起作用.在iOS上,保证(截至2018年4月)不起作用,因为Apple仅允许通过Safari访问WebRTC.因此,如果Cordova 正确处理权限,则它仅限于Android API 21 .

Answer 2

我想将解决方案添加到解决这个特定错误的传奇中。我正在使用Ionic来构建WebRTC聊天应用程序，而我的本机Android版本却出现此错误。这是使一切都不同的事情。

安装Ionic的AndroidPermissions插件...

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

不要忘记将它作为提供者添加到app.module.ts

在组件的.ts文件中...

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);
            }
        }
    }
...

在myAppName / config.xml上检查config.xml并将xmlns：android =“ http://schemas.android.com/apk/res/android”添加到窗口小部件标签中，然后添加权限请求。我在尝试将它们包含在以前存在的问题中遇到了问题 标签，然后直接在结束标签下添加这些权限请求（创建我自己的第二组）

<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

现在，您需要检查位于myAppName / platforms / android / app / src / main / AndroidManifest.xml的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对权限的要求越来越严格，您不能随便问他们。根据我正在阅读的文档，如果您实际上没有在调用代码的地方使用许可，那么操作系统将丢弃您的请求，而用户将永远看不到它。

无论如何，我对Ionic和本机设备的所有开发工作都还很初级，所以如果有人有启发性的补充，请这样做！感谢大家！