Question

我成功地将webcam.js与角应用程序一起使用，以允许用户捕捉自己的照片。但是我有一个问题，一些用户上传空白 - 所有白色或全黑照片。我怀疑有些相机启动速度比其他相机慢，这让用户可以在相机真正工作之前拍摄自己的照片。

我希望能够检测到相机实际打开和流式传输的时间，以便我可以等到那时使“拍照”按钮可用。通常在您完成允许摄像机的安全步骤后，视频元素在摄像机开启或正在加载信号源或发生的任何事情时都会空白半秒钟。在我的计算机上，如果我快速移动，我可以在加载视频流之前几乎没有点击拍照按钮，它将拍摄显示全黑的照片。我猜测有些计算机半秒可能会更长，可能足以让人们在屏幕上看到自己之前拍照。

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

提前谢谢！

Answer 1

使用video.onplaying为我工作（Chrome https fiddle）：

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检测相机何时开启/准备好？

1 个答案: