V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fimd
V2EX  ›  程序员

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

  •  
  •   fimd · 2023-04-11 17:45:20 +08:00 · 1161 次点击
    这是一个创建于 592 天前的主题,其中的信息可能已经有所发展或是发生改变。
    客户有个需求:手机浏览器(包括微信中打开微站),在上传文件时,有没有办法只允许用摄像头拍照上传,而不允许选择本地文件?

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

    有懂的朋友,指点下,是不是 HTML5 根本没有这个方法?如果非得实现,有什么思路?
    10 条回复    2023-04-11 18:02:34 +08:00
    sanmaozhao
        1
    sanmaozhao  
       2023-04-11 17:48:44 +08:00
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file#capture

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

    试试这个属性,我之前用过,但是太久了已经忘记各个浏览器的兼容性如何了
    leefor2020
        2
    leefor2020  
       2023-04-11 17:49:18 +08:00
    这个需求真是恶心用户的,之前有网站需要上传身份证,我就拍照打了水印,结果只能用摄像头不允许本地选文件....
    后来我把打了水印的照片传到 iPad 上,然后比例 /亮度调整了好几次才让它认为我是直接拍照的
    fimd
        3
    fimd  
    OP
       2023-04-11 17:52:19 +08:00
    @sanmaozhao
    网页中能限制中住?我试过,没有区别,限制不住。
    a1274598858
        4
    a1274598858  
       2023-04-11 17:53:55 +08:00
    微信里面可以用 chooseImage ,html5 试试 navigator.mediaDevices.getUserMedia
    fimd
        5
    fimd  
    OP
       2023-04-11 17:55:18 +08:00
    @leefor2020
    我的是用在工作人员到现场必须记录现场的情况、给现场拍照。不允许他不去现场用本地的图片做假。
    sanmaozhao
        6
    sanmaozhao  
       2023-04-11 17:55:50 +08:00   ❤️ 1
    不知道你怎样测试的,我 iOS 16.4 ,safari 浏览器亲测可用

    https://addpipe.com/html-media-capture-demo/
    sanmaozhao
        7
    sanmaozhao  
       2023-04-11 17:56:40 +08:00
    Example 8 & Example 9
    fimd
        8
    fimd  
    OP
       2023-04-11 17:56:56 +08:00
    @a1274598858
    我是纯原生的后台系统(有几个工作界面适配了移动端的尺坟),没有用 VUE 之类的框架。navigator.mediaDevices.getUserMedia 是 VUE 中的吧。
    chnwillliu
        9
    chnwillliu  
       2023-04-11 18:01:23 +08:00 via Android
    @fimd navigator 是浏览器的 API
    fimd
        10
    fimd  
    OP
       2023-04-11 18:02:34 +08:00
    @sanmaozhao
    这个例子,我试了,可以。

    谢谢啦~~~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1716 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:43 · PVG 00:43 · LAX 08:43 · JFK 11:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.