使用HTML5拍照示例代碼

字號(hào)：小 中 大

首先，我們看看HTML代碼結(jié)構(gòu)，當(dāng)然，這部分的DOM內(nèi)容應(yīng)該是在用戶允許使用其攝像頭事件出發(fā)后，動(dòng)態(tài)加載生成的。
    注意：我們采用的是 640X480的分辨率，如果采用JS動(dòng)態(tài)生成，那么您是可以靈活控制分辨率的。
    代碼如下:
    
    
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    JavaScript
    只要上面的HTML元素創(chuàng)建完成，那么JavaScript部分將簡(jiǎn)單的超乎你想象的簡(jiǎn)單：
    代碼如下:
    // 設(shè)置事件監(jiān)聽，DOM內(nèi)容加載完成，和jQuery的$.ready() 效果差不多。
    window.addEventListener("DOMContentLoaded", function() {
    // canvas 元素將用于抓拍
    var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    // video 元素，將用于接收并播放攝像頭的數(shù)據(jù)流
    video = document.getElementById("video"),
    videoObj = { "video": true },
    // 一個(gè)出錯(cuò)的回調(diào)函數(shù)，在控制臺(tái)打印出錯(cuò)信息
    errBack = function(error) {
    if("object" === typeof window.console){
    console.log("Video capture error: ", error.code);
    }
    };
    // Put video listeners into place
    // 針對(duì)標(biāo)準(zhǔn)的瀏覽器
    if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
    video.src = stream;
    video.play();
    }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function(stream){
    video.src = window.webkitURL.createObjectURL(stream);
    video.play();
    }, errBack);
    }
    // 對(duì)拍照按鈕的事件監(jiān)聽
    document.getElementById("snap").addEventListener("click", function() {
    // 畫到畫布上
    context.drawImage(video, 0, 0, 640, 480);
    });
    }, false);
    最后，記得講您的網(wǎng)頁放到web服務(wù)器下面，然后通過http協(xié)議來訪問哦。
    另外，需要瀏覽器版本較新，并且支持HTML5的相關(guān)新特性才可以。
    譯者不算稱職啦，沒有按原文來翻譯。使用的瀏覽器是chrome 28。
    最后，貼上完整的代碼，比較呆板。
    代碼如下:
    <!DOCTYPE html>
    <html>
    <head>
    <title> 瀏覽器webcamera </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="renfufei@qq.com">
    <meta name="Description" content="inveted by: http://davidwalsh.name/browser-camera">
    <script>
    // 設(shè)置事件監(jiān)聽，DOM內(nèi)容加載完成，和jQuery的$.ready() 效果差不多。
    window.addEventListener("DOMContentLoaded", function() {
    // canvas 元素將用于抓拍
    var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    // video 元素，將用于接收并播放攝像頭的數(shù)據(jù)流
    video = document.getElementById("video"),
    videoObj = { "video": true },
    // 一個(gè)出錯(cuò)的回調(diào)函數(shù)，在控制臺(tái)打印出錯(cuò)信息
    errBack = function(error) {
    if("object" === typeof window.console){
    console.log("Video capture error: ", error.code);
    }
    };
    // Put video listeners into place
    // 針對(duì)標(biāo)準(zhǔn)的瀏覽器
    if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
    video.src = stream;
    video.play();
    }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function(stream){
    video.src = window.webkitURL.createObjectURL(stream);
    video.play();
    }, errBack);
    }
    // 對(duì)拍照按鈕的事件監(jiān)聽
    document.getElementById("snap").addEventListener("click", function() {
    // 畫到畫布上
    context.drawImage(video, 0, 0, 640, 480);
    });
    }, false);
    </script>
    </head>
    <body>
    <div>
    
    
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    </div>
    </body>
    </html>

使用HTML5拍照示例代碼

字號(hào)： 小 中 大

字號(hào)：小中大