如何使用 getusermedia 让网络摄像头在 Firefox 上可靠地工作？答案

【问题标题】：How can I get the webcam to work reliably on Firefox using getusermedia?如何使用 getusermedia 让网络摄像头在 Firefox 上可靠地工作？
【发布时间】：2022-01-13 04:20:04
【问题描述】：

我正在设计一个网站来教授因纽特手语，它在多个页面上使用用户的相机让学习者练习手语。它不会在任何地方流式传输或保存信号：它仅用于向用户显示他或她自己的网络摄像头图像。在 Mozilla Firefox 中，加载网络摄像头的第一个页面工作正常，但在之后使用它的每个网页中，网络摄像头都无法工作。重新加载页面没有任何作用（即使使用 CTRL-F5），但是完全关闭 Firefox 并在同一页面上重新启动它会使相机工作......但再一次，仅适用于使用它的第一页。

该错误有些不一致，它总是发生在本地，但并不总是发生在我的主机服务器上，Microsoft Edge 可以很好地处理它。我不知道该怎么做才能解决这个问题。就好像我离开第一个网页或其他东西时 Firefox 没有释放相机一样。

可以在此处找到示例网页：https://animamundilarp.com/isl_training_tests/practice_inuit_people.html

单击“下一页”两次以重现该问题。

感谢任何能告诉我我做错了什么的人。

这是我的页面完整代码：


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mystyle.css">
</head>


 <div class="row">
  <div class="col-12"><H1>Inuit People</H1></div> <!-- 100% -->
</div> 

 <div class="row">
  <div class="col-12"><P>Please allow the website to use your webcam for this learning activity. your webcam video is not recorded or sent anywhere on the Internet, and it will only display on your own screen.</P></div> <!-- 100% -->
</div> 

<div class="row">       <!-- This row includes both the video and the webcam video -->
<div class="col-6">     <!-- This contains the video of the inuit sign -->
<video controls  autoplay loop muted playsinline>
  <source src="videos/Inuit_people.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>
</div>

<div class="col-6">
<video id="media" controls></video>
</div>
</div>

<script>
navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
//            audio: true,      // I keep this part of the code, but since we do not need audio, I kept it only as a comment, to reduce permissions asked by the website.
            video: true
        })
        .then(function (stream) {
            var video = document.getElementById("media");
            video.srcObject = stream;
            video.play();
 
        })
        .catch(function (e) {
            logError(e.name + ": " + e.message);
        });
} else {
    navigator.getWebcam({
//            audio: true,      // I keep this part of the code, but since we do not need audio, I kept it only as a comment, to reduce permissions asked by the website.
            video: true
        },
        function (stream) {
            //Display the video stream in the video object
        },
        function () {
            logError("your web cam is not accessible. If you do not have a webcam, you can use a mirror instead to see yourself signing.");
        });
}

</script>


<P><button type="button" class="button_previous" onclick="Change_Page_to_Previous()"><span class="arrow_button">&#8592;</span> Previous</button> <button type="button" class="button_next" onclick="Change_Page_to_Next()">Next page <span class="arrow_button">&#8594;</span></button></P>

<script src="previous_and_next_functions.js">
</script>

【问题讨论】：

我刚刚下载了谷歌浏览器进行测试，在谷歌浏览器中一切正常。该问题似乎特定于 Mozilla Firefox。这是一台全新的电脑，所以我有最新版本的浏览器。
这是一个在快速关闭和打开网络摄像头时非常常见的问题。我建议提交一份 Firefox 错误报告。

标签： html firefox webcam getusermedia mediadevices

【解决方案1】：

您需要在网页关闭时释放 getUserMedia 流。你如何做到这一点有点麻烦：你停止了流中的所有轨道。

（另外，所有可以找到 getUserMedia 函数的替代位置都在它们所属的历史垃圾箱中，因此代码可以更简洁。）

像这样的一些未经调试的 Javascript 代码应该适合您。注意卸载事件处理程序

const video = document.getElementById("media")
navigator.mediaDevices
  .getUserMedia({ audio:false, video: true })
  .then(function (stream) {
      video.srcObject = stream
      video.play()

      window.addEventListener("unload", function(event) {
        /* upon unloading do this */
        const tracks = stream.getTracks()
        tracks.forEach(function(track) {
          track.stop()
        })
        video.srcObject = null
        stream = null
      })
    })
  .catch(function (e) {
     logError(e.name + ": " + e.message)
   })

【讨论】：