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 API.

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

有人遇到过这个问题吗？

更新 - 19/11/2020

WKWebView 在 iOS 14.3 beta 1 中可以使用 getUserMedia。

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

更新 - 04/06/2020

另一张错误单已专门针对 WKWebView 提交。没有支持。https://bugs.webkit.org/show_bug.cgi?id=208667 https://bugs.webkit.org/show_bug.cgi?id=208667

更新独立模式，在 iOS 13.4 中获得 getUserMedia 访问权限https://bugs.webkit.org/show_bug.cgi?id=185448#c6 https://bugs.webkit.org/show_bug.cgi?id=185448#c6

更新 - 14/09/2019

iOS 13 和 Safari 13 上的 Safari 发生了变化：https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

SFSafariViewController 已获得 getUserMedia 功能（！！！，但是我需要确认这一点，请参阅下面的工作报告）

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

然而 WKWebView 似乎没有获得 getUserMedia 功能：

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

iOS 13 和 Safari 13 发行说明：

https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

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

指向 Cordova 工作示例的 GitHub 链接 https://github.com/marcusbelcher/cordova-getUserMedia-test

Android 工作示例的 GitHub 链接 https://github.com/marcusbelcher/android-getUserMedia-test

指向工作 Ionic 示例的 GitHub 链接 https://github.com/marcusbelcher/ionic-getUserMedia-test

通过 Cordova 框架在 Android 上实现 getUserMedia 访问的步骤是：

• 按照 Cordova Android 安装说明进行操作 (link https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html)
• 将权限添加到AndroidManifyst.xml（link https://github.com/marcusbelcher/cordova-getUserMedia-test/blob/master/platforms/android/app/src/main/AndroidManifest.xml)
• Save WebRTC 适配器.js https://github.com/webrtc/adapter文件至./www/js/adapter.js并包含在./www/index.html
• Add cordova plugin add cordova-plugin-android-permissions
• 添加插件权限代码，以及必要的 getUserMedia 代码./www/js/index.js文件。确保您使用 getUserMedia 适配器。请参阅此文件作为示例（link https://github.com/marcusbelcher/cordova-getUserMedia-test/blob/master/www/js/index.js).

请参阅 GitHub 项目内完整的逐行说明以及成功和错误图像。

我不确定这与 Cordova 有多少关系...但是，当我制作自己的 Android getUserMedia 测试应用程序时，我遇到了这个错误（link https://github.com/marcusbelcher/android-getUserMedia-test）。它主要取决于本机应用程序的用户权限，然后是父应用程序如何创建 webview，您的应用程序中打包了哪个版本的 webrtc，以及您如何调用 getUserMedia。

应用程序的 JavaScript 端：不要自己编写浏览器填充代码，而是确保使用 WebRTC 适配器（link https://github.com/webrtc/adapter）。这消除了许多常见问题。您可以在此处查看示例（link https://github.com/marcusbelcher/wasm-asm-camera-webgl-test）。我还建议查看此处的 WebRTC 示例（link https://github.com/webrtc/samples).

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

当您构建和部署应用程序时，请转到应用程序设置并手动打开权限（如果尚未收到提示）。那么它应该可以工作。

我无法仅在实际设备上的模拟器中进行视频/音频模拟。在接受权限之前，我也只是在使用 WebChromeView 的 Android 上遇到了 NotReadableError 。最后，此功能的 Android 最低 API 版本是 21（Lollipop），因为父应用程序需要通过 WebView onPermissionRequest 允许运行时权限（link https://developer.android.com/reference/android/webkit/WebChromeClient.html).

由于许多应用内浏览器（Facebook、Pinterest 等）不处理 Android 上的 onPermissionRequest，WebRTC 通过网站通常不起作用。在 iOS 上，它保证（截至 2018 年 4 月）不起作用，因为 Apple 只允许通过 Safari 访问 WebRTC。因此 Cordova 仅限于 Android API 21if它正确处理权限。