是否可以使用 getUserMedia 检测相机何时处于 on/ready？

Question

我成功地将 webcam.js 与 angular 应用程序结合使用，允许用户拍摄自己的照片。但是我遇到了一些用户上传空白照片的问题 - 全白或全黑照片。我怀疑某些相机的启动速度比其他相机慢，这允许用户在相机真正工作之前拍摄自己的空白照片。

我希望能够检测到相机实际开启和流式传输的时间，因此我可以等到那时让“拍照”按钮可用。通常在您通过允许摄像头的安全步骤后，当摄像头打开或正在加载源或发生任何事情时，视频元素会空白半秒钟。在我的电脑上，如果我移动得很快，我几乎可以在视频流加载之前点击拍照按钮，它会拍一张显示为全黑的照片。我猜在某些计算机上半秒可能会更长，可能足以让人们在屏幕上看到自己之前尝试拍照。

我们也在尝试通过一些更好的用户体验来解决这个问题，但如果有一种方法可以防止人们在相机准备好之前拍照就更好了。到目前为止，我还没有找到任何关于检测相机何时开启的信息，但我考虑过检测已拍摄照片的主色的可能性，如果它是全黑或全白，则告诉用户再次拍摄，使用类似这样的东西：Get average color of image via Javascript。显然，如果我们可以等待显示拍照按钮，让用户经历该循环并不理想。

提前致谢！

Answer 1

使用 video.onplaying 对我有用（https fiddle 对 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>

是否可以使用 getUserMedia 检测相机何时处于 on/ready？

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

ng-file-upload