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

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

这位国外小哥是从事网页开发的工程师，海外网友都叫他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>

<style>

* {

font-size: 1.5rem;

}

</style>

</head>

<body>

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

<br>

<input

type="file"

id="environment"

capture="environment"

accept="video/*"

<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上，使用百度等浏览器，真的可以直接打开前置和后置摄像头！

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

自网络

这是大家在做信息类网站的时候经常要用到的一个功能：

理想情况下我们应该先判断你的设备上是否有摄像头或相机，但简单起见，我们在这里直接写出了HTML标记，而不是用JavaScript先判断然后动态生成这些标记

</body>

</html>

$( function() {

try { document.createElement("canvas").getContext("2d"); } catch (e) { alert("not support canvas!") }

var video = document.getElementById("video"),

canvas = document.getElementById("canvas"),

context = canvas.getContext("2d");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (navigator.getUserMedia)

navigator.getUserMedia(

{ "video": true },

function (stream) {

if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;

else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;

video.play();

function (error) {

alert("Video capture error: " + error.code);

}

);

else alert("Native device media streaming (getUserMedia) not supported in this browser");

document.getElementById("snap").addEventListener("click", function() {

/*context.drawImage(video, 0, 0, 640, 480);//照片大小*/

context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight)

}, false);

着web功能越来越强大，我们很多时候需要在web页面来获取摄像头进行操作，原生html5提供了对摄像头的支持，需要用户的同意授权，下面是一个基于 HTML5 的调用摄像头拍照并上传后台的示例代码：

html复制代码<!DOCTYPE html>
<html>
<head>
    <title>拍照上传</title>
</head>
<body>
    <video id="video" style="width:300px;height:200px;"></video>
    <br>
    <button id="btn-start">启动摄像头</button>
    <button id="btn-stop">停止摄像头</button>
    <button id="btn-capture">拍照上传</button>
    <br>
    <canvas id="canvas"></canvas>
    <form id="form-upload" method="post" enctype="multipart/form-data">
        <input type="file" id="input-file" name="file"/>
    </form>

    <script type="text/javascript">
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        
        // 启动摄像头
        document.getElementById('btn-start').addEventListener('click', function() {
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            }).then(function(stream) {
                video.srcObject = stream;
            }).catch(function(err) {
                console.log("启动摄像头失败：" + err);
            });
        });

        // 停止摄像头
        document.getElementById('btn-stop').addEventListener('click', function() {
            video.pause();
            video.srcObject.getTracks()[0].stop();
            video.srcObject = null;
        });

        // 拍照，并上传到后台
        document.getElementById('btn-capture').addEventListener('click', function() {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            ctx.drawImage(video, 0, 0);
            canvas.toBlob(function(blob) {
                var formData = new FormData();
                formData.append('file', blob, 'photo.jpg');
                postRequest('/upload', formData, function(res) {
                    alert(res.message);
                });
            }, 'image/jpeg');
        });

        // 发送 POST 请求
        function postRequest(url, data, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = JSON.parse(xhr.responseText);
                    callback(res);
                }
            };
            xhr.send(data);
        }
    </script>
</body>
</html>

上述代码主要分为以下几个部分：

html5 的 <video> 元素用于显示摄像头数据流，我们可以通过 JavaScript API 控制调用摄像头、暂停和关闭。同时使用了 <canvas> 元素来缓存视频帧的图像数据。
页面中 btn-start 按钮通过 getUserMedia() 方法请求浏览器授权，并将摄像头数据流传给 <video> 元素进行播放。
点击 btn-capture 按钮时，通过 toBlob() 将缓存的图像数据转化为 Blob 对象，并封装到 FormData 中，以便发送给后台服务。
postRequest() 函数用于发送包含文件数据的 POST 请求，其中 FormData 对象中的 key 是上传后台服务器处理时需要读取的参数名称，通常对应具体的后台业务逻辑。

最后，需要注意的是，在本地调试和开发时，特别是在 Windows 操作系统下使用 Chrome 浏览器访问时，可能会遇到摄像头不能正常运行的情况。这时可以打开地址栏，在目标请求前加上 --unsafely-treat-insecure-origin-as-secure="http://localhost:8080" 参数（其中端口号需替换成实际的本地服务端口），即可获得权限，进行摄像头使用。

在线咨询

上一篇：重学前端基础：浏览器的兼容，CDN资源网站，html5shiv插件
下一篇：白露节气海报设计图片、文案大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

您的项目需求