只用HTML，如何打开手机相机？前端小哥现场教学

HTML不是编程语言，但这并不妨碍前端工程师发挥出来。

例如，有人使用HTML访问用户的摄像头-

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

也可以调用手机后置镜头开启拍照模式。

值得注意的是，在这里，小哥哥只用HTML语言实现了上述功能。

利用HTML的capture属性，他只需要设置几个输入参数和几行代码。

与其他实现相比，获取用户的相机权限更加方便。而且不存在安全问题。

不出所料，一大波程序员前来围观。有人说:

用HTML capture属性直接访问摄像头确实比JavaScript方便。

这位小哥的网名是奥斯汀·吉尔。他是一名从事网页开发的工程师。

下面就跟着小哥哥分享的内容来看看具体的实施步骤吧。

如何在HTML中打开摄像头？

首先，当然是那一代人。

兄弟创建了一个index.html文档，它与HTML的accpet属性相匹配，以指定不同标签要捕获的文件的具体属性。

在这里，他设置了两个标签“环境”和“用户”。

当用户点击环境时，可以调用设备的后置镜头，具有录像功能；当用户点击用户时，可以打开设备的前置镜头进行拍照。

具体代码如下:

lt；！DOCTYPEhtmlgtlt；htmllang="en"gt。lt；headgt。lt；元字符集="UTF-8"/gt。lt；meta name = " viewport " content = " width = device-width，initial-scale = 1 "/gt；lt；stylegt。*字体大小:1.5雷姆；lt；/stylegt。lt；/headgt。lt；bodygt。lt；labelfor="environment"gt。捕获环境:lt；/label gt；lt；brgtlt；input type = " file " id = " environment " capture = " environment " accept = " video/* " gt；lt；brgtlt；brgtlt；labelfor="user"gt。captureuser:lt；/label gt；lt；brgtlt；input type = " file " id = " user " capture = " user " accept = " image/* " gt；lt；/bodygt。lt；/htmlgt。

此时，眼尖的人可能已经发现，网页没有提示用户是否打开访问摄像头的权限，直接调用摄像头。

这种操作是否存在安全风险？

对此，小哥给出的答案是:无附加险。

因为浏览器并不能真正控制用户的摄像头，但却可以轻松上传摄像头生成的新文件。

说话——对于用户来说，浏览器只能通过HTML打开摄像头；如果需要向网站展示照片或视频或者保存，还是需要使用JavaScript的MediaDevices API。

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

通过JS，允许用户访问后，浏览器可以直接控制摄像头。

但是Web 3.0标准之后，规定网页不能直接访问用户的镜头。

不过小哥也指出，这种直接通过HTML命令打开用户摄像头的方式还是有一些不足，比如兼容性差。

量子比特pro测试了我小哥哥的这段代码，结果显示:

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

有兴趣的小伙伴可以用下面链接里的代码试试~

门户网站:

参考链接