html - 使用带有接受图像的文件输入访问笔记本电脑上的网络摄像头

Question

这很可能是重复的，请指出正确的方向:

我知道如何使用文件上传输入 type=file 和 accept=image 来允许从移动设备上传图像。

<input type="file" name="myImage" accept="image/*" />

我想像在任何其他移动设备上一样在笔记本电脑上进行这项工作。浏览器供应商仍然打开一个选择文件对话框，我希望在移动设备上有一个“选择源”对话框。

我知道这是浏览器供应商必须解决的问题，但同时问题是:是否有任何框架可以模拟这种行为？

Answer 1

更新的答案
<input type="file" accept="image/*" capture>
http://anssiko.github.io/html-media-capture/对于其他媒体捕获示例。

如果您不需要 IE 支持，那么您可以尝试 MediaDevices.getUserMedia()

// A lot of other options are available - check out the constraints. 
const constraints = { audio: true, video: { width: 1280, height: 720 } }; 

const video_stream = document.createElement('video');

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {

  video_stream.srcObject = mediaStream;
  video_stream.onloadedmetadata = function(e) {
    document.body.appendChild(video_stream);
    video_stream.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); 

您可以捕获一帧，然后将其附加到 Canvas 进行预览，然后将其导出为 .png/.jpg