HTML5 中选择文件时，有没有可能只允许用摄像头拍照上传，而不允许本地选择文件上传？

[fimd]

客户有个需求：手机浏览器（包括微信中打开微站），在上传文件时，有没有办法只允许用摄像头拍照上传，而不允许选择本地文件？

找了一大圈文档，都没有找说关于在 HTML5 的上传时只可摄像头的方法。

有懂的朋友，指点下，是不是 HTML5 根本没有这个方法？如果非得实现，有什么思路？

[sanmaozhao]

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file#capture

capture
capture (en-US) 属性是一个字符串，如果 accept (en-US) 属性指出了 input 是图片或者视频类型，则它指定了使用哪个摄像头去获取这些数据。值 user 表示应该使用前置摄像头和（或）麦克风。值 environment 表示应该使用后置摄像头和（或）麦克风。如果缺少此属性，则用户代理可以自由决定做什么。如果请求的前置模式不可用，则用户代理可能退回到其首选的默认模式。

试试这个属性，我之前用过，但是太久了已经忘记各个浏览器的兼容性如何了

[leefor2020]

这个需求真是恶心用户的，之前有网站需要上传身份证，我就拍照打了水印，结果只能用摄像头不允许本地选文件....
后来我把打了水印的照片传到 iPad 上，然后比例 /亮度调整了好几次才让它认为我是直接拍照的

[fimd]

@sanmaozhao
网页中能限制中住？我试过，没有区别，限制不住。

[a1274598858]

微信里面可以用 chooseImage ，html5 试试 navigator.mediaDevices.getUserMedia

[fimd]

@leefor2020
我的是用在工作人员到现场必须记录现场的情况、给现场拍照。不允许他不去现场用本地的图片做假。

[sanmaozhao]

不知道你怎样测试的，我 iOS 16.4 ，safari 浏览器亲测可用

https://addpipe.com/html-media-capture-demo/

[sanmaozhao]

Example 8 & Example 9

[fimd]

@a1274598858
我是纯原生的后台系统（有几个工作界面适配了移动端的尺坟），没有用 VUE 之类的框架。navigator.mediaDevices.getUserMedia 是 VUE 中的吧。

[chnwillliu]

@fimd navigator 是浏览器的 API

[fimd]

@sanmaozhao
这个例子，我试了，可以。

谢谢啦~~~