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

Question

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

我知道如何使用文件上传输入类型=文件与接受=图像来允许从移动设备上传图像的文件。

<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); }); 

您可以捕获一个框架，然后将其附加到画布上进行预览，然后从那里将其导出到 .png/.jpg