Question

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

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

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

我想在笔记本电脑上完成这项工作，就像在任何其他移动设备上一样。浏览器供应商仍然打开一个选择文件对话框，我希望在移动设备上有一个＆＃34;选择源＆＃34; -Dialog。

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

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

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

1 个答案: