公告:九九网站目录为广大站长提供免费收录网站服务,会员可在线完成投稿无需添加友情链接。只收录内容正规合法的网站;快审网站软文10元

点击这里在线咨询客服
新站提交
  • 网站:8452
  • 待审:22
  • 小程序:9
  • 文章:3601
  • 会员:2184

 

HTML 不是编程语言,但这并不妨碍前端工程师把它玩出花儿来。

比如,有人就拿 HTML 来访问用户的相机——

在网页上,点击按钮即可直接打开手机前置镜头来拍照。

(没错,就是前置镜头!小哥可能有镜子之类的)

也可以调用手机的后置镜头,开启摄像模式。
值得注意的是,在这里,小哥只用了 HTML 语言就实现了上述功能。

他利用HTML 的 capture 属性,只需设置几个 input 参数,再加上几行代码搞定了。

比起别的实现方式,这样可以更便捷地获取用户相机权限;而且没什么安全问题。

不出所料,一大波程序员纷纷前来围观。有人表示:

用 HTML capture 属性直接访问相机,确实比用 JavaScript 更方便

这位小哥的网名叫 Austin Gil,他是一位从事网页开发的工程师。
下面就跟随小哥分享的内容,一起来看看具体实现步骤吧。

首先当然是写代环节。

小哥创建了一个 index.html 文档,配合 HTML 的 accpet 属性,来指定不同标签所要 capture 的文件的具体属性。

在这里,他设置了"environment""user"两个标签。

当用户点击 environment 时,可以调用设备的后置镜头,并拥有录像功能;而当用户点击 user 时,就能打开设备前置镜头来拍照了。

具体代码如下:

* {

font-size: 1.5rem;

}

type="file"

id="environment"

capture="environment"

accept="video/*"

>

type="file"

id="user"

capture="user"

accept="image/*"

>

到这里,眼尖的人可能已经发现:没有提示用户是否打开访问相机的权限,网页就直接调用了相机。

那这样操作,有没有安全风险啊?

对此,小哥给出答案:无额外风险

因为浏览器其实并不能真正控制用户相机(虽然看起来好像可以直接访问),而不过是能轻松上传相机生成的新文件罢了。

说人话——对用户而言,浏览器通过 HTML 只能打开摄像头;如果需要把照片或者视屏展示到网站,或者保存下来,仍然需要用到 JavaScript 的 MediaDevices API。

有网友补充道,这种操作方式比纯用 JavaScript 更安全。

因为运用 JS 的话,在用户允许访问相机后,浏览器就能直接控制摄像头。

而在 Web 3.0 标准之后(现在主要用的是 Web 5 标准),规定网页不能直接访问用户的镜头。

不过,小哥也指出:这种直接通过 HTML 指令打开用户用户摄像头的方式还存在目前不足,比如兼容性不太好
图源 caniuse.com:红色框表示不支持;绿色框表示支持;棕色框表示部分支持;灰色框表示未知

量子位亲测了一下小哥的这段代码,结果显示:

点击 environment 和 user 按钮,在 MacBook 上分别可以打开视频格式和图片格式的文件;

而在 iPhone 上,使用百度等浏览器,真的可以直接打开前置和后置摄像头。

分享到:

  admin

注册时间:

网站:0 个   小程序:3 个  文章:0 篇

  • 452

    网站

  • 9

    小程序

  • 3601

    文章

  • 84

    会员

赶快注册账号,推广您的网站吧!
热门网站
最新入驻小程序

跳一跳2022-08-22

跳一跳是微信开发的一款小游戏,有

数独大挑战2018-06-03

数独一种数学游戏,玩家需要根据9

答题星2018-06-03

您可以通过答题星轻松地创建试卷

全阶人生考试2018-06-03

各种考试题,题库,初中,高中,大学四六

运动步数有氧达人2018-06-03

记录运动步数,积累氧气值。还可偷

每日养生app2018-06-03

每日养生,天天健康