透過HTML5的getUserMedia實作拍照功能範例-H5教程-PHP中文網

透過HTML5的getUserMedia實作拍照功能範例

黄舟

發布： 2017-03-31 13:40:51

原創

2168 人瀏覽過

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中文網其他相關文章！