经由过程HTML5的getUserMedia完成照相功用

2019年8月26日 193次阅读 来源: PortWatcher

参考HTML5Rocks的这篇文章完成的一个简朴的例子。

思绪以下：
1. 把冰箱门翻开
2. 把大象放进冰箱里
3. 把冰箱门关上

好了不开玩笑了，实在思绪是：
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>

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('image/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函数做的事变就是保证你拍到的照片的大小和摄像头拍到的大小是一样的，不然会涌现拍到的照片只要摄像头录到的一部分画面的状况。
    原文作者：PortWatcher
    原文地址: https://segmentfault.com/a/1190000000354671
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞