Javascript NotReadableError：无法分配视频源

NotReadableError: Failed to allocate videosource

提问by Tomá? Zato - Reinstate Monica

I get this error in Firefox 51 when I try to execute the following code and when I select my laptop's camera:

当我尝试执行以下代码并选择笔记本电脑的相机时，在 Firefox 51 中出现此错误：

navigator.getMedia = (navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mediaDevices.getUserMedia ||
  navigator.msGetUserMedia);

navigator.getMedia({
    video: true,
    audio: false
  },
  function(stream) {
    if (navigator.mozGetUserMedia) {
      video.mozSrcObject = stream;
    } else {
      var vendorURL = window.URL || window.webkitURL;
      video.src = vendorURL.createObjectURL(stream);
    }
    video.play();
  },
  function(err) {
    console.log("An error occured! " + err);
  }
);

Error:

错误：

NotReadableError: Failed to allocate videosource

Can someone elaborate what this means? Is my webcam broken? I used it from the script just yesterday without problems. It's not allocated to other application.

有人可以详细说明这是什么意思吗？我的网络摄像头坏了吗？我昨天从脚本中使用它没有问题。它没有分配给其他应用程序。

回答by Octavian Naicu

NotReadableErroris the spec compliant error thrown by Firefox when webcam access is allowed but not possible.

NotReadableError是允许网络摄像头访问但不可能访问时由 Firefox 抛出的符合规范的错误。

Most commonly this happens on Windows because the webcam is already in use by another app.Firefox will throw this error on both Windows and Mac even though only on Windows processes get exclusive access to the webcam.

最常见的是在 Windows 上发生这种情况，因为网络摄像头已被另一个应用程序使用。Firefox 会在 Windows 和 Mac 上抛出此错误，即使只有 Windows 进程才能独占访问网络摄像头。

The error can happen for other reasons:

该错误可能由于其他原因而发生：

Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device.

尽管用户授予了使用匹配设备的权限，但在操作系统、浏览器或网页级别发生了硬件错误，导致无法访问该设备。

Chrome throws TrackStartErrorinstead. It also throws it for otherreasons. Chrome tabs can share the same device.

Chrome 会抛出TrackStartError。它也会因为其他原因抛出它。Chrome 标签页可以共享同一台设备。

Source: common getUserMedia() errors.

来源： 常见的 getUserMedia() 错误。

回答by Shashank

Please make sure your camera is not been used by some other application (chrome, ie or any other browser). I wasted have of my day searching for a solution, and in the end, found out my camera was used by other application.

请确保您的相机未被其他应用程序（chrome，ie 或任何其他浏览器）使用。我浪费了一天的时间寻找解决方案，最后发现我的相机被其他应用程序使用。

回答by MartinM

I've encountered same issue on Windows 10, no other apps using my video device. The problem was that in Windows 10 in Settings->App permissions (in left column) there is a setting for microphone and camera (Allow apps to access your mic/camera) which needs to be turned on. It does not matter that you don't find your browser in app list below this setting, just enable it here and voila.

我在 Windows 10 上遇到了同样的问题，没有其他应用使用我的视频设备。问题是在 Windows 10 中的设置-> 应用程序权限（在左栏中）有一个麦克风和摄像头设置（允许应用程序访问您的麦克风/摄像头）需要打开。在此设置下方的应用程序列表中找不到浏览器并不重要，只需在此处启用它即可。

回答by baptx

The message getUserMedia() error: NotReadableErrorwas displayed for Chromium but not Firefox web browser. I also noticed that WebRTC examples using getUserMediafunction without microphone access worked correctly in Chromium.

该消息getUserMedia() error: NotReadableError是针对 Chromium 而不是 Firefox Web 浏览器显示的。我还注意到 WebRTC 示例使用getUserMedia没有麦克风访问权限的函数在 Chromium 中正常工作。

In fact, I had to make sure my microphone is enabled and select the correct microphone in Chromium / Chrome settings. Then WebRTC with audio and video access worked correctly.

事实上，我必须确保我的麦克风已启用并在 Chromium/Chrome 设置中选择正确的麦克风。然后具有音频和视频访问权限的 WebRTC 正常工作。

If it is not a microphone problem, it may also be a webcam problem so you have to make sure your webcam is enabled and selected correctly in Chromium / Chrome settings.

如果不是麦克风问题，也可能是网络摄像头问题，因此您必须确保在 Chromium / Chrome 设置中正确启用并选择了网络摄像头。

Note that only one app at a time can use the webcam / microphone.

请注意，一次只有一个应用程序可以使用网络摄像头/麦克风。

回答by blacksheep

If you are here after or in December 2019 i would like to tell you few things

如果您在 2019 年 12 月之后或之后来到这里，我想告诉您几件事

1. This feature navigator.getUserMedia()is deprecated.
2. Successor of this feature in the browsers will be window.navigator.mediaDevices.getUserMedia.
3. The new feature may not support in many browsers, since its still in the experiment mode few days ago chrome released its chrome 79 and its still not supporting in chrome 79 for me, and other than chrome and IE its working in all the browsers for me
4. Here is a quick code

1. 此功能navigator.getUserMedia()已弃用。
2. 浏览器中此功能的后继者将是window.navigator.mediaDevices.getUserMedia.
3. 许多浏览器可能不支持该新功能，因为它几天前仍处于实验模式 chrome 发布了它的 chrome 79 并且它仍然不支持 chrome 79 对我来说，除了 chrome 和 IE 之外，它在我的所有浏览器中都可以使用
4. 这是一个快速代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jello</title>
    <style>
        video{
            width: 30%;
            height: auto;
        }
    </style>
</head>
<body>
    <video autoplay controls></video>
    <button>Open Cam</button>
    <script>
    function getCam(){
        window.navigator.mediaDevices.getUserMedia({video:true}).then((stream)=>{
            // let videoTrack = stream.getVideoTracks()[0];
            // console.log(videoTrack);
            document.querySelector("video").srcObject = stream;
        }).catch(err=> console.log(err.name))
    }
    // getCam();
    document.querySelector("button").addEventListener("click", getCam);
    </script>
</body>
</html>

Edit => if you are using in windows 10 make sure give chrome access your microphone and camera, otherwise it won't work

编辑 =>如果您在 Windows 10 中使用，请确保让 chrome 访问您的麦克风和摄像头，否则将无法使用

回答by Pierre

Can someone elaborate what this means? Is my webcam broken? I used it from the script just yesterday without problems. It's not allocated to other application.

有人可以详细说明这是什么意思吗？我的网络摄像头坏了吗？我昨天从脚本中使用它没有问题。它没有分配给其他应用程序。

I've encountered exactly the same issue!

我遇到了完全相同的问题！

Shame on me! Because, in the meantime I'd added a beforeunloadevent, including the event.preventDefaultas reported in the example.

耻辱我！因为，与此同时，我添加了一个beforeunload事件，包括示例中event.preventDefault报告的事件。

After removing this event.preventDefault, everything worked fine - as expected.

删除它后event.preventDefault，一切正常 - 正如预期的那样。