首页 > 文章 > web前端 > 通过HTML5的getUserMedia实现拍照功能示例

通过HTML5的getUserMedia实现拍照功能示例

黄舟原创: 2017-03-31 13:40:512154浏览

1. 通过getUserMedia调用设备的摄像头（电脑、手机都可以，取决于浏览器对这个API的支持情况），并将资源放入video标签。
2. 将video内的视频资源通过canvas的drawImage API放入canvas里，这个canvas是不显示的。
3. 将canvas的内容转换成base64编码的webp格式的图像（如果浏览器不支持这个格式，会fallback到png格式）放入img里，于是你就能看到你拍的照片了。

不废话了，上代码：

HTML

<!doctype html>
<html>
<head>
    <title>html5 capture test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <video autoplay></video>
    <img src="">
    <canvas style="display: none;"></canvas>
    <button id="capture">snapshot</button>


    <script src="index.js"></script>
</body>
</html>

var video = document.querySelector(&#39;video&#39;);
var canvas = document.querySelector(&#39;canvas&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);
var localMediaStream = null;

var snapshot = function () {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
        document.querySelector(&#39;img&#39;).src = canvas.toDataURL(&#39;image/webp&#39;);
    }
};

var sizeCanvas = function () {
    setTimeout(function () {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        img.width = video.videoWidth;
        img.height = video.videoHeight;
    }, 100);
};

var btnCapture = document.getElementById(&#39;capture&#39;);
btnCapture.addEventListener(&#39;click&#39;, snapshot, false);

navigator.webkitGetUserMedia(
    {video: true},
    function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
        sizeCanvas();
    },
    function () {
        alert(&#39;your browser does not support getUserMedia&#39;);
    }
);

几个注意事项：

不同浏览器对getUserMedia的支持情况不同，需要加上前缀，比如webkitGetUserMedia、mozGetUserMedia、msGetUserMedia，如果你想屏蔽这一问题的话，可以这样做：

// cross platforms
var myGetUserMedia = navigator.getUserMedia || 
                 navigator.webkitGetUserMedia ||
                 navigator.mozGetUserMedia || 
                 navigator.msGetUserMedia;

Chrome对file:///做了很多的限制，跨域就不说了，geolocation也不能在本地下使用，这个getUserMedia也是。

这个sizeCanvas函数做的事情就是保证你拍到的照片的大小和摄像头拍到的大小是一样的，否则会出现拍到的照片只有摄像头录到的一部分画面的情况。

以上是通过HTML5的getUserMedia实现拍照功能示例的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：利用html5 Api实现分页的示例代码分享下一篇：详解HTML5应用中accordion三种效果的探索

查看更多