Как получить доступ к рамкам изображения в веб-камере, используя javascript - PullRequest
Новая
       161

Как получить доступ к рамкам изображения в веб-камере, используя javascript

0 голосов
/ 29 февраля 2020

Я хочу сделать живую систему распознавания лиц. Мой код до сих пор обнаруживает человеческое лицо. Я хочу иметь возможность обрабатывать или сканировать кадры в веб-камере, чтобы распознать лица. Я использую getUserMedia для загрузки веб-камеры. Я хочу сделать процесс распознавания живым вместо того, чтобы хранить изображение для распознавания. Ниже приведен код, который я использую для запуска веб-камеры. Я начинающий, так что извините за любые замешательства, любая помощь приветствуется. Спасибо! 

    function startVideo() {
  document.body.append('Loaded')
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Вы не указали, в каком формате вы хотите получать изображения, снятые с веб-камеры. Их довольно легко доставить в элемент <canvas />.

  • Вы используете gUM для открытия видеопотока, затем
  • просматриваете его в элементе <video />, затем
  • используете drawImage, чтобы скопировать снимок этого элемент к вашему холсту.

Вот пример кода, основанный на «официальном» примере webrt c.

Initialize 

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
canvas.width = 480;
canvas.height = 360;
const button = document.querySelector('button');

Обработчик нажатия кнопки снимка

См. Вызов метода drawImage() ... вот что захватывает моментальный снимок элемента предварительного просмотра видео. 

button.onclick = function() {
  /* set the canvas to the dimensions of the video feed */
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  /* make the snapshot */
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
};

Запуск и предварительный просмотр потока видео 

navigator.mediaDevices.getUserMedia( {audio: false, video: true })
.then(stream => video.srcObject = stream)
.catch(error => console.error(error);

Очевидно, это очень просто. Параметр, который вы передаете в gUM, является MediaStreamConstraints объектом. Это дает вам большой контроль над видео (и аудио), который вы хотите захватить.

0 голосов
/ 29 февраля 2020

HTML

<center><video id="video" width="640" height="480" autoplay></video></center>

JavaScript

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
 video.src = window.URL.createObjectURL(stream);
 video.play();
 });
}
...