Можно ли определить, когда камера включена/готова, с помощью getUserMedia?

Я успешно использую webcam.js с угловым приложением, чтобы пользователи могли делать снимки самих себя. Однако у меня возникла проблема, когда некоторые пользователи загружают пустые фотографии — все белые или все черные. Я подозреваю, что некоторые камеры запускаются медленнее, чем другие, что позволяет пользователям делать пустые снимки до того, как камера действительно заработает.

Я хотел бы иметь возможность определять, когда камера на самом деле включена и транслируется, чтобы я мог подождать до тех пор, чтобы сделать кнопку «Сделать фото» доступной. Обычно после того, как вы прошли этап безопасности, разрешив камеру, элемент видео остается пустым в течение полсекунды, пока камера включается, загружается источник или что-то еще. На моем компьютере, если я двигаюсь быстро, я могу просто нажать кнопку «Сделать снимок», прежде чем загрузится видеопоток, и он сделает снимок, который будет полностью черным. Я предполагаю, что на некоторых компьютерах полсекунды могут быть длиннее, возможно, достаточно, чтобы люди пытались сделать снимки до того, как увидят себя на экране.

Мы также пытаемся решить эту проблему с помощью лучшего UX, но было бы здорово, если бы был способ запретить людям делать снимки до того, как камера будет готова. Пока мне не удалось найти ничего об обнаружении включения камеры, но я подумал о возможности обнаружения доминирующего цвета на сделанном снимке, и если он полностью черный или белый, сообщите пользователю, чтобы он сделал это снова. , используя что-то вроде этого: Получить средний цвет изображения с помощью Javascript. Очевидно, что это не идеально, чтобы пользователь проходил через этот цикл, если бы мы могли подождать, чтобы показать кнопку «Сделать снимок».

Заранее спасибо!


ng-file-upload
person Tracy B.    schedule 18.03.2016    source источник
comment
Разве вы не можете определить доминирующий цвет, прежде чем нажимать кнопку «сделать снимок»?   -  person jib    schedule 19.03.2016
comment
Я не думаю, что хотел бы сделать это с помощью метода, упомянутого выше (stackoverflow.com/questions/2541481/), потому что мне нужно было бы программно захватить изображение, создать элемент холста и проверить цвет на интервале, чтобы определить, когда изображение больше не было одноцветным - это кажется очень тяжелым для браузера. Хотя я полагаю, что это может быть решением, если нет другого способа проверить, включена ли камера.   -  person Tracy B.    schedule 21.03.2016
comment
Если вы используете небольшую ширину и высоту и не слишком частый интервал, это не должно иметь большого значения. Вам нужно создать холст только один раз.   -  person jib    schedule 21.03.2016

Ответы (1)


arrow_upward
3
arrow_downward

Мне помогло использование video.onplaying (https://jsfiddle.net/zrvyd28q/ для Chrome):

var snap = () => navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
    return new Promise(resolve => video.onplaying = resolve);
  })
  .then(() => canvas.getContext('2d').drawImage(video, 0, 0, 160, 120))
  .catch(log);

var log = msg => div.innerHTML += "<br>" + msg;
<button onclick="snap()">Snap!</button><div id="div"></div>
<video id="video" width="160" height="120" autoplay></video>
<canvas id="canvas" width="160" height="120"></canvas>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

person jib    schedule 21.03.2016
comment
Это идеально, я думаю, что onplaying был именно тем, что я искал, но я реализовал более надежную версию ожидания onplaying для отображения кнопки, и как только пользователь сделает снимок, проверьте, чтобы убедиться, что это не преимущественно черный или белый. Спасибо! - person Tracy B.; 23.03.2016