专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

手机浏览器调用相机功能，只需要几行代码就行?前端小哥厉害了

ins518 2025-01-07 13:21:42 技术文章 57 ℃ 0 评论

国外小哥利用了几行代码直接访问了手机的相机功能，这听起来是一件很新鲜的事情。究竟是怎么实现的呢？感兴趣的话，可以继续了解下去哦。

这位国外小哥是从事网页开发的工程师，海外网友都叫他Austin Gil。

既然是从事网页开发设计的，对HTML、java、CSS等相关网页语言都很熟悉了。


Austin Gil采用了最简单的网页语言，仅用HTML，实现了在网页上点击按钮就能够直接打开手机前置镜头来拍照。也可以调用手机后置镜头，开启录像模式。

整个编译过程，利用了HTML的capture属性，设置几个input参数和加上几行代码就搞定了，不费吹灰之力。


虽然用JavaScript或其它的方法也可以实现，但比起别的方法，这样能够便捷地获取用户相机权限，而且不用担心安全问题。


很多人都想知道相关代码，接下来会提到的，一起来看看吧。

教你使用HTML打开相机：


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


Austin Gil设置了“environment”和“user”两个标签。


点击“environment”，可以调用相机的后置镜头，且可以录像；

点击“user”，可以打开相机前置镜头拍照。

具体代码如下：

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width,initial-scale=1" />

<style>

* {

font-size: 1.5rem;

}

</style>

</head>


<body>

<label for="environment">Capture environment:</label>

<br>

<input

type="file"

id="environment"

capture="environment"

accept="video/*"

>

<br><br>

<label for="user">Capture user:</label>

<br>

<input

type="file"

id="user"

capture="user"

accept="image/*"

>

</body>


</html>

从这些代码中，我们可以捕获到一个信息，就是没有提示用户是否打开访问相机的权限，网页就直接调用了相机。


问题是，这样操作，没有安全风险吗？

当很多人提出疑惑的时候，Austin Gil做出了解释：无额外风险。


浏览器其实并不能真正控制手机相机APP，即便是这样操作可以直接访问，但也只不过是能轻松上传相机生成的新文件而已。


简单来说，就是对于用户而言，浏览器通过HTML只能打开手机摄像头。如果要把照片、视频展示到网站上，或是想要保存下来，还得用到JavaScript的MediaDevices API。

这样操作是比纯用JavaScript更安全的。


因为运用JavaScript，在用户允许访问相机后，浏览器就能直接控制摄像头了。


而在Web 3.0标准之后，规定网页不能直接访问用户的手机镜头。

PS：现在主要用的是Web 5的标准。

最后是兼容性，据悉在这方面并不是很好。


Austin Gil指出，这种直接通过HTML指令打开用户摄像头的方式目前还存在不足，比如兼容性不太好。


如下图所示：

红色模块：不支持

绿色模块：支持

棕色模块：部分支持

灰色：未知

很多网友在好奇心的驱使下，测试了调用手机相机的代码。也有前端小哥进行了测试，结果如下：

点击environment和user按钮，在MacBook上分别可以打开视频格式和图片格式的文件；而在iPhone上，使用百度等浏览器，真的可以直接打开前置和后置摄像头！

好咯，本期内容就分享到这里了~

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表