使用HTML5技術控制電腦或手機上的攝像頭(轉載)

  移動設備和桌面電腦上的客戶端API起初並非同步的。最初老是移動設備上先擁有某些功能和相應的API,但慢慢的,這些API會出如今桌面電腦上。其中一個應用接口技術就是getUserMedia API,它能讓應用開發者訪問用戶的攝像頭或內置相機。下面就讓我展現一下如何經過瀏覽器來訪問你的攝像頭,並提取截屏圖形。java

觀看演示web

HTML代碼

  下面的代碼裏我寫了一部分註釋,請閱讀:canvas

<!--
    理想狀況下咱們應該先判斷你的設備上是否
    有攝像頭或相機,但簡單起見,咱們在這裏直接
    寫出了HTML標記,而不是用JavaScript先判斷
    而後動態生成這些標記
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

  在寫出上面這些標記前應該判斷用戶的客戶端是否有攝像頭支持,但這裏爲了避免那麼麻煩,這裏直接寫出了這些HTML標記,須要注意的是咱們這裏使用的長寬是640×480。瀏覽器

JavaScript代碼

  由於咱們是手工寫出的HTML,因此下面的js代碼會比你想象的要簡單了不少。ide

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
            console.log("Video capture error: ", error.code); 
        };

    // Put video listeners into place
    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);
    }
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
}, false);

  一旦判斷出用戶瀏覽器支持getUserMedia ,下面就很是簡單了,只須要將那個video元素的src設置爲用戶的攝像頭視頻直播鏈接。這就是用瀏覽器訪問攝像頭須要作的全部的事情!spa

  拍照的功能只能說是稍微複雜一點點。咱們在按鈕上加入一個監聽器,將視頻畫面畫到畫布上。插件

// 觸發拍照動做
document.getElementById("snap")
       .addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
});

  固然,你還能夠在圖片上加一些濾鏡效果….我仍是把這些技術放到之後的文章裏再說吧。但至少你能夠將這個畫布圖像轉換成一張圖片code

觀看演示視頻

  之前咱們須要使用第三方的插件才能從瀏覽器裏訪問用戶的攝像頭,這難免有些複雜。如今只須要HTML5的畫布技術和javaScript,咱們就能簡單快速的操做用戶的攝像頭。不單單仍是訪問攝像頭,並且是由於HTML5的畫布技術及其強大,咱們能夠給圖片上加入各類迷人的濾鏡效果。如今,在瀏覽器裏用本身的攝像頭給本身拍張照片吧!blog

 

 引自:http://www.webhek.com/browser-camera

相關文章
相關標籤/搜索