NotReadableError:无法启动源 [英] NotReadableError: Could not start source

问题描述

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

I have added this piece of code in my project

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 及更高版本，但是当我在实际设备上运行它时，我收到此错误

When I test this in my emulators it works on android versions 5 and up, however when I run it on an actual device I get this error

NotReadableError 无法启动源

NotReadableError Could not start source

我添加了 cordova-plugin-media-capture 插件以确保我的应用程序将请求适当的权限，但是我不想使用该插件我宁愿使用 <代码>getUserMedia API.

I have added the cordova-plugin-media-capture plugin to make sure my app will request the appropriate permissions, however I don't want to use the plugin I'd rather use the getUserMedia API.

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

So far my researches show that the reason for this error is that some other app is already using the camera but that's not the case, I even went a step further and restarted the device, then opened my app, making sure there are no other running apps and I still got the error.

有人遇到过这个问题吗?

Has anyone had this issue?

推荐答案

更新 - 19/11/2020

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

WKWebView can use getUserMedia in iOS 14.3 beta 1.

• https://bugs.webkit.org/show_bug.cgi?id=208667
• https://bugs.chromium.org/p/chromium/问题/详细信息?id=752458

更新 - 04/06/2020

已专门为 WKWebView 提交了另一个错误票证.没有支持.https://bugs.webkit.org/show_bug.cgi?id=208667

Another bug ticket has been filed specifically for WKWebView. No support. https://bugs.webkit.org/show_bug.cgi?id=208667

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

Updates to standalone mode gaining getUserMedia access in iOS 13.4 https://bugs.webkit.org/show_bug.cgi?id=185448#c6

更新 - 14/09/2019

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

There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

SFSafariViewController 已获得 getUserMedia 功能(！！！，但是我需要确认这一点，请参阅下面的报告以了解它的工作情况)

SFSafariViewController has gained getUserMedia functionality (!!!, however I need to confirm this, please see below for reports of it working)

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

但是 WKWebView 似乎没有获得 getUserMedia 功能:

However WKWebView does not seem to gain getUserMedia functionality:

https://bugs.chromium.org/p/chromium/问题/细节?id=752458https://bugs.webkit.org/show_bug.cgi?id=185448

iOS 13 和 Safari 13 发行说明:

iOS 13 and Safari 13 release notes:

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 链接

工作 Android 示例的 GitHub 链接

指向工作 Ionic 示例的 GitHub 链接

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

Steps to achieve getUserMedia access on Android via the Cordova framework are:

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

• Follow Cordova Android install instructions (link)
• Add Permissions to AndroidManifiest.xml (link)
• Save WebRTC Adapter.js file to ./www/js/adapter.js and include in ./www/index.html
• Add cordova plugin add cordova-plugin-android-permissions
• Add plugin permission code, and the necessary getUserMedia code inside of the ./www/js/index.js file. Make sure you use getUserMedia adapter. Please see this file as an example (link).

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

Please see the full line by line instructions with a success and error image inside the GitHub project.

我不确定这有多少与 Cordova 相关...但是，当我制作自己的 Android getUserMedia 测试应用程序时遇到了这个错误(链接).它主要取决于原生应用的用户权限，然后是父应用如何创建webviews，你的应用中打包了哪个版本的webrtc，以及你如何调用getUserMedia.

I am not sure how much of this relates to Cordova... However I had this error when I made my own Android getUserMedia test app (link). It is dependant mainly on the native app user permissions, then how the parent app creates the webviews, which version of webrtc is packaged within your app, and how you call getUserMedia.

应用程序的 JavaScript 端:与其自己编写浏览器填充代码，不如确保使用 WebRTC 适配器(link).这消除了许多常见问题.您可以在此处查看示例(link).我还建议您在此处查看 WebRTC 示例(link).

JavaScript side of the application: Rather than doing browser shim code yourself make sure you use the WebRTC adapter (link). This removes a lot of common problems. You can see an example here (link). I also recommend looking at the WebRTC Samples here (link).

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

Native side of the application: You will need Mic and Camera user permissions for Video and Audio. This is the main culprit. You need to make sure they have been accepted before the creation of the WebView. Thus all permission checking, popups, etc, need to happen before the creation of the WebView. If permissions are granted after you most likely need to reboot the App, etc.

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

When you build and deploy your application go to App Settings and manually turn on the permissions if you haven't been prompted already. Then it should work.

我无法仅在实际设备上的模拟器中进行视频/音频模拟.在接受权限之前，我也只在 Android 上使用 WebChromeView 遇到了 NotReadableError.最后，Android 的最小 API 版本是 21 (Lollipop)，因为父应用程序需要通过 WebView onPermissionRequest (link).

I wasn't able to get Video/Audio emulation working in the emulator only on the actual device. I also only encountered the NotReadableError on Android utilising a WebChromeView before permissions have been accepted. Lastly The min API version for Android is 21 (Lollipop) for this functionality as the parent application needs to allow run-time permissions via WebView onPermissionRequest (link).

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

As numerous in-app browsers (Facebook, Pinterest, etc) do not handle onPermissionRequest on Android WebRTC via a website typically doesn't work. On iOS it is guaranteed (as of April 2018) not to work as Apple have only allowed WebRTC access through the Safari only. Thus Cordova is limited to Android API 21 if it handles the permissions correctly.

这篇关于NotReadableError:无法启动源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！