通過HTML5的getUserMedia實現(xiàn)拍照功能

1. 通過getUserMedia調(diào)用設備的攝像頭（電腦、手機都可以，取決于瀏覽器對這個API的支持情況），并將資源放入video標簽。
2. 將video內(nèi)的視頻資源通過canvas的drawImage API放入canvas里，這個canvas是不顯示的。
3. 將canvas的內(nèi)容轉(zhuǎn)換成base64編碼的webp格式的圖像（如果瀏覽器不支持這個格式，會fallback到png格式）放入img里，于是你就能看到你拍的照片了。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供紅花崗企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站設計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設公司、H5開發(fā)、小程序制作等業(yè)務。10年已為紅花崗眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

不廢話了，上代碼：

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函數(shù)做的事情就是保證你拍到的照片的大小和攝像頭拍到的大小是一樣的，否則會出現(xiàn)拍到的照片只有攝像頭錄到的一部分畫面的情況。

http://blog.csdn.net/journey191/article/details/40744015

文章題目：通過HTML5的getUserMedia實現(xiàn)拍照功能
網(wǎng)頁地址：http://bm7419.com/article34/jjcdpe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站內(nèi)鏈、網(wǎng)站改版、App開發(fā)、營銷型網(wǎng)站建設、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設計