getUserMedia не работает в Chrome

Question

Я пытаюсь настроить видеопоток. Я обнаружил, что вы можете использовать веб-камеру из браузера с помощью getUserMedia. Вот мой Javascript код, который я написал:

function stream() { 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||  navigator.msGetUserMedia || navigator.oGetUserMedia; 
    if (navigator.getUserMedia) { 
     navigator.getUserMedia({video: true, audio: true}, load, error); 
    } 
} 

function load(source) { 
    document.getElementById("video").src = window.URL.createObjectURL(source); 
    alert("Connected"); 
} 

function error(e) { 
    alert("Error:") + e; 
} 

Здесь у меня есть HTML-тег:

<video id="video" autoplay></video> 

Моя проблема в том, что когда я открываю сайт и позволит браузеру использовать веб-камеру и микрофон , Я слышу себя, но видео не загружается. Видеокадр изменяет размер до 2 пикселей x 2 пикселя черного квадрата. Где я совершаю ошибки?

Answer 1

Хотя я не могу воспроизвести вашу проблему ни в Chrome, ни в Firefox, я считаю, что ваша проблема связана с попыткой использовать autoplay. Рекомендуемым способом отображения потока веб-камеры является добавление слушателя для loadedmetadata и прямое вызов play. Мое подозрение в том, что ваш браузер пытается воспроизвести поток, прежде чем он узнает ширину и высоту, что приведет к недопустимому состоянию.

MDN фрагмент кода: (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia)

navigator.getUserMedia = navigator.getUserMedia || 
         navigator.webkitGetUserMedia || 
         navigator.mozGetUserMedia; 

if (navigator.getUserMedia) { 
    navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } }, 
     function(stream) { 
     var video = document.querySelector('video'); 
     video.src = window.URL.createObjectURL(stream); 
     video.onloadedmetadata = function(e) { 
      video.play(); 
     }; 
     }, 
     function(err) { 
     console.log("The following error occured: " + err.name); 
     } 
    ); 
} else { 
    console.log("getUserMedia not supported"); 
} 

Ключевая часть для вас:

video.onloadedmetadata = function(e) { 
    video.play(); 
}; 

Кроме того, я не верю, что msGetUserMedia или oGetUserMedia существуют. Вы должны избегать добавления префиксов браузера, не проверяя, что они существуют (поскольку они могут существовать где-то с другим API).

---

И, конечно, всегда стоит проверить, что у вас есть веб-камера, и она подключена! (например, можете ли вы использовать его из другого приложения? как насчет с другого веб-сайта?)

Answer 2

Проблема в том, что вы пытаетесь напрямую получить доступ к вашему .../..html-файлу. Chrome не подходит для некоторых функций из-за политики одинакового происхождения. Существует два решения.

Настройте простой HTTP-сервер. Вы можете сделать это, включив apache для обслуживания ваших локальных файлов.

Отключить такую ​​же политику происхождения для хрома.

В быстром Google для обоих появятся несколько подробных подробных примеров того, как это сделать. Я бы предложил вариант 1, потому что это будет подражать тому, как ваша веб-страница будет вести себя, когда она будет жить.