首页 » 排名链接 » 只需要几行代码就行?前端小哥厉害了(小哥相机就行代码调用)

只需要几行代码就行?前端小哥厉害了(小哥相机就行代码调用)

乖囧猫 2024-11-04 14:40:56 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上,使用百度等浏览器,真的可以直接打开前置和后置摄像头!

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

标签:

相关文章

你在哪个阶段?(测试阶段团队软件管理)

虽然是情理之中的事情,毕竟入行就能有明确职业规划的毕竟只是少数,因为不可控的内因和外因实在是太多了。而自己也只是运气好,走上了管理...

排名链接 2025-02-09 阅读948 评论0