Is it possible to detect when the camera is on/ready with getUserMedia?

问题

I am successfully using webcam.js with an angular app to allow users to capture a picture of themselves. However I'm having a problem where some users are uploading blank - all white or all black photos. I suspect that some cameras start up more slowly than others which is allowing users to take pictures of themselves that are blank before the camera is really working.

I would like to be able to detect when the camera is actually on and streaming so I could wait until then to make the Take Photo button available. Normally after you go through the security step of allowing the camera, the video element is blank for half a second while the camera is turning on or the source is being loaded or whatever is happening. On my computer if I move fast I can just barely click the take picture button before the video steam is loaded and it will take a picture that shows as all black. I'm guessing on some computers that the half a second could be longer, possibly enough so that people are trying to take pictures before they see themselves on the screen.

We're also trying to solve this with some better UX, but it would be great if there was a way to prevent people from taking pictures before the camera is ready. I haven't been able to find anything so far about detecting when the camera is on, but have thought about the possibility of detecting the dominant color of a picture that's been taken and if it's all black or white tell the user to take it again, using something like this: Get average color of image via Javascript. Obviously not ideal to have the user go through that loop though if we could wait to show the take picture button.

Thank you in advance!

回答1:

Using video.onplaying worked for me (https fiddle for 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>

来源：https://stackoverflow.com/questions/36091400/is-it-possible-to-detect-when-the-camera-is-on-ready-with-getusermedia

标签

ng-file-upload