通过HTML5的getUserMedia实施拍照功能

发布时间：2023-10-28 10:30:37 所属栏目：教程来源：互联网

导读： 　　通过getUserMedia调用设备的摄像头（电脑、手机都可以，取决于浏览器对这个API的支持情况），并将资源放入video标签。

　　将video内的视频资源通过canvas的drawImage API放入ca

　　通过getUserMedia调用设备的摄像头（电脑、手机都可以，取决于浏览器对这个API的支持情况），并将资源放入video标签。

　　将video内的视频资源通过canvas的drawImage API放入canvas里，这个canvas是不显示的。

　　将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 ></canvas>

　　    <button id="capture">snapshot</button>

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

　　</body>

　　</html>

　　复制代码

　　JS

　　var video = document.querySelector('video');

　　var canvas = document.querySelector('canvas');

　　var ctx = canvas.getContext('2d');

　　var localMediaStream = null;

　　var snapshot = function () {

　　    if (localMediaStream) {

　　        ctx.drawImage(video, 0, 0);

　　        document.querySelector('img').src = canvas.toDataURL('p_w_picpath/webp');

　　    }

　　};

　　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('capture');

　　btnCapture.addEventListener('click', snapshot, false);

　　navigator.webkitGetUserMedia(

　　    {video: true},

　　    function (stream) {

　　        video.src = window.URL.createObjectURL(stream);

　　        localMediaStream = stream;

　　        sizeCanvas();

　　    },

　　    function () {

　　        alert('your browser does not support getUserMedia');

　　    }

　　);

　　复制代码

　　几个注意事项：

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

　　// cross platforms

　　var myGetUserMedia = navigator.getUserMedia ||

　　                 navigator.webkitGetUserMedia ||

　　                 navigator.mozGetUserMedia ||

　　                 navigator.msGetUserMedia;

　　复制代码

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

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

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!