输入类型文件捕获相机限制视口

Question

试图限制相机捕捉，当我点击输入按钮时，我看到的是camera without frame我希望看到的是camera with frame and custom text

Answer 1

从规格中删除 （actually it's coming back from the deads）<input> capture使用操作系统的相机输入。

由于它就像一个普通的文件选择器，在用户发送给你之​​前你无法访问它。

要做你想做的事，你必须使用getUserMedia API，这在Safari中仍然不受支持......

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => {
    vid.srcObject = stream;
    vid.play();
    });
vid.onloadedmetadata = e => {
  overlay.style.left = (vid.videoWidth / 2 - 150) + 'px';
  overlay.style.top = (vid.videoHeight / 2 - 75) + 'px';
  };

#overlay{
  border: 1px solid white;
  background: rgba(255,255,255,.5);
  position: absolute;
  width: 300px;
  height: 150px;
  }

<video id="vid" autoplay></video>
<div id="overlay"></div>

作为Chrome的Fiddle。