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

Question

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

我知道如何将文件上传输入类型=文件与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); }); 

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