Блог

Главная - Вопросы по программированию - Как я могу заставить веб-камеру надежно работать в Firefox с помощью getusermedia?

Как я могу заставить веб-камеру надежно работать в Firefox с помощью getusermedia?

#html #firefox #webcam #getusermedia #mediadevices

#HTML #firefox #Вебкам #getusermedia #mediadevices

Вопрос:

Я разрабатываю веб-сайт для обучения языку жестов инуитов, и он использует камеру пользователя на нескольких страницах, чтобы учащийся мог практиковать жестикуляцию. Он не передает и не сохраняет сигнал нигде: он предназначен только для показа пользователю его или ее собственного изображения с веб-камеры. В 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">amp;#8592;</span> Previous</button> <button type="button" class="button_next" onclick="Change_Page_to_Next()">Next page <span class="arrow_button">amp;#8594;</span></button></P>

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

Комментарии:

1. Я только что загрузил Google Chrome, чтобы протестировать его, и все отлично работает и в Google Chrome. Проблема, похоже, специфична для Mozilla Firefox. Это совершенно новый компьютер, так что у меня последняя версия браузера.

2. Это довольно распространенная проблема с быстрым выключением и включением веб-камеры. Я бы рекомендовал отправить отчет об ошибке Firefox.

Ответ №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)
   })
Метки: