只用 HTML,如何打开手机相机?前端小哥现场教学
消息来源:baojiabao.com 作者: 发布时间:2024-05-20
HTML 不是编程语言,但这并不妨碍前端工程师把它玩出花儿来。
比如,有人就拿 HTML 来访问用户的相机 --
在网页上,点击按钮即可直接打开手机前置镜头来拍照。
(没错,就是前置镜头!小哥可能有镜子之类的)
也可以调用手机的后置镜头,开启摄像模式。
值得注意的是,在这里,小哥只用了 HTML 语言就实现了上述功能。
他利用 HTML 的 capture 属性,只需设置几个 input 参数,再加上几行代码搞定了。
比起别的实现方式,这样可以更便捷地获取用户相机权限;而且没什么安全问题。
不出所料,一大波程序员纷纷前来围观。有人表示:
用 HTML capture 属性直接访问相机,确实比用 JavaScript 更方便。
这位小哥的网名叫 Austin Gil,他是一位从事网页开发的工程师。
下面就跟随小哥分享的内容,一起来看看具体实现步骤吧。
如何用 HTML 打开相机?
首先当然是写代码环节。
小哥创建了一个 index.html 文档,配合 HTML 的 accpet 属性,来指定不同标签所要 capture 的文件的具体属性。
在这里,他设置了"environment"和"user"两个标签。
当用户点击 environment 时,可以调用设备的后置镜头,并拥有录像功能;而当用户点击 user 时,就能打开设备前置镜头来拍照了。
具体代码如下:
到这里,眼尖的人可能已经发现:没有提示用户是否打开访问相机的权限,网页就直接调用了相机。
那这样操作,有没有安全风险啊?
对此,小哥给出答案:无额外风险。
因为浏览器其实并不能真正控制用户相机(虽然看起来好像可以直接访问),而不过是能轻松上传相机生成的新文件罢了。
说人话 -- 对用户而言,浏览器通过 HTML 只能打开摄像头;如果需要把照片或者视屏展示到网站,或者保存下来,仍然需要用到 JavaScript 的 MediaDevices API。
有网友补充道,这种操作方式比纯用 JavaScript 更安全。
因为运用 JS 的话,在用户允许访问相机后,浏览器就能直接控制摄像头。
而在 Web 3.0 标准之后(现在主要用的是 Web 5 标准),规定网页不能直接访问用户的镜头。
不过,小哥也指出:这种直接通过 HTML 指令打开用户用户摄像头的方式目前还存在不足,比如兼容性不太好。
量子位亲测了一下小哥的这段代码,结果显示:
点击 environment 和 user 按钮,在 MacBook 上分别可以打开视频格式和图片格式的文件;
而在 iPhone 上,使用百度等浏览器,真的可以直接打开前置和后置摄像头。
感兴趣的伙伴们可以用下面链接中的代码试试~
传送门:
https://austingil.com/html-capture-attribute/
参考链接
[1]https://www.youtube.com/watch?v=DSTXUEHZRiU&t=1s
[2]https://news.ycombinator.com/item?id=32738501
本文来自微信公众号:量子位 (ID:QbitAI),作者:Alex
2022-12-21 17:25:55相关文章
- 美国法院裁定阿里须为Squishmallows玩具侵权案答辩
2023-12-28 19:59:34
- 小米汽车传员工3700人 雷军称小米汽车不可能卖9万9
2023-12-28 19:41:57
- 国家新闻出版署:认真研究《网络游戏管理办法(草桉徵求意见稿)》关切 实行前进一步完善
2023-12-28 19:14:56
- 天猫新规可以无条件申请“仅退款”了?淘宝天猫又离狗多多零元购近了一步
2023-12-28 18:57:55
- 印度以打击金融犯罪为由逮捕了两名 vivo 高管
2023-12-26 16:49:01
- 在国外微信收不到国内信息?微信和WeChat将被拆分
2023-12-15 10:40:15
- 苹果iPhone15 系列手机发布最新消息 预计上市发布时间9月
2023-08-06 23:21:02
- 华为将发布鸿蒙HarmonyOS4操作系统 功能五大升级支持设备清单
2023-08-06 23:17:37
- 整治自媒体网红账号 400万粉丝网红发布擦边视频被无限期封禁
2023-07-12 09:56:09
- 网传微信文件传输助手是真人是真的吗?微信官方回应
2023-06-27 15:53:32
- 电信移动送手机成了“信用购”?你上了运营商的贷款套路了吗?
2023-06-12 17:18:55
- 中国电信广东地区崩了无信号 客服回应已在核实处理
2023-06-08 15:39:04
- 消息称小米新能源汽车价格表正讨论定价区间:双版本不同配置,高配或超 35 万元
2023-03-06 12:56:03
- 华为因制裁被传或分拆剥离手机业务? 内部人士回应:可能性不大.
2023-03-05 23:26:41
- OPPO正式发布安第斯智能云,让终端更智能
2023-02-24 16:02:27
- 华为与OPPO签订全球专利交叉许可协议 包括5G蜂窝通信专利
2023-02-24 16:02:26
- 老蛙将推MINI镜头新品:目前未知具体规格 官宣将于12月20日发布
2023-02-24 16:02:26
- 首发全新35mm定制光学系统 努比亚Z50性能同样强悍
2023-02-24 16:02:25
- Redmi K60屏幕细节曝光:全系标配2K护眼柔性直屏+5000mAh大容量电池
2023-02-24 16:02:25
- OPPO Find N2今天发 合金金属折叠屏更轻了
2023-02-24 16:02:24