getUserMedia API及HTML5 調用手機攝像頭拍照

getUserMedia API簡介

HTML5的getUserMedia API爲用戶提供訪問硬件設備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基於該接口，開發者能夠在不依賴任何瀏覽器插件的條件下訪問硬件媒體設備。
getUserMedia API最初是navigator.getUserMedia，目前已被最新Web標準廢除，變動爲navigator.mediaDevices.getUserMedia（），但瀏覽器支持狀況不如舊版API普及。
MediaDevices.getUserMedia（）方法提示用戶容許使用一個視頻和/或一個音頻輸入設備，例如相機或屏幕共享和/或麥克風。若是用戶給予許可，就返回一個Promise對象，MediaStream對象做爲此Promise對象的Resolved［成功］狀態的回調函數參數，相應的，若是用戶拒絕了許可，或者沒有媒體可用的狀況下PermissionDeniedError或者NotFoundError做爲此Promise的Rejected［失敗］狀態的回調函數參數。注意，因爲用戶不會被要求必須做出容許或者拒絕的選擇，因此返回的Promise對象可能既不會觸發resolve也不會觸發 reject。

瀏覽器兼容性

語法

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) { ... })
.catch(function(error) { ... })

參數

containers：指定請求的媒體類型，主要包含video和audio，必須至少一個類型或者兩個同時能夠被指定。若是瀏覽器沒法找到指定的媒體類型或者沒法知足相對應的參數要求，那麼返回的Promise對象就會處於rejected［失敗］狀態，NotFoundError做爲rejected［失敗］回調的參數。

【例】同時請求不帶任何參數的音頻和視頻：

{ audio: true, video: true }

【例】使用1280x720的攝像頭分辨率：

{
  audio: true,
  video: { width: 1280, height: 720 }
}

【例】要求獲取最低爲1280x720的分辨率：

{
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

當請求包含一個ideal（應用最理想的）值時，這個值有着更高的權重，意味着瀏覽器會先嚐試找到最接近指定的理想值的設定或者攝像頭（若是設備擁有不止一個攝像頭）。

【例】優先使用前置攝像頭（若是有的話）：

{ audio: true, video: { facingMode: "user" } }

【例】強制使用後置攝像頭：

{ audio: true, video: { facingMode: { exact: "environment" } } }

---

成功回調函數seccessCallback的參數stream：stream是MediaStream的對象，表示媒體內容的數據流，能夠經過URL.createObjectURL轉換後設置爲Video或Audio元素的src屬性來使用，部分較新的瀏覽器也能夠直接設置爲srcObject屬性來使用。

---

失敗回調函數errorCallback的參數error，可能的異常有：

• AbortError：硬件問題
• NotAllowedError：用戶拒絕了當前的瀏覽器實例的訪問請求；或者用戶拒絕了當前會話的訪問；或者用戶在全局範圍內拒絕了全部媒體訪問請求。
• NotFoundError：找不到知足請求參數的媒體類型。
• NotReadableError：操做系統上某個硬件、瀏覽器或者網頁層面發生的錯誤致使設備沒法被訪問。
• OverConstrainedError：指定的要求沒法被設備知足。
• SecurityError：安全錯誤，在getUserMedia() 被調用的 Document
  上面，使用設備媒體被禁止。這個機制是否開啓或者關閉取決於單個用戶的偏好設置。
• TypeError：類型錯誤，constraints對象未設置［空］，或者都被設置爲false。

示例：HTML 5調用媒體設備攝像頭

這個例子中，請求訪問用戶硬件設備的攝像頭，並把視頻流經過Video元素顯示出來。網頁中提供一個"拍照"的按鈕，經過Canvas將Video的畫面截取並繪製，核心代碼以下：

HTML

<!--video用於顯示媒體設備的視頻流，自動播放-->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按鈕-->
<div>
<button id="capture">拍照</button>
</div>
<!--描繪video截圖-->
<canvas id="canvas" width="480" height="320"></canvas>

JavaScript

//訪問用戶媒體設備的兼容方法
function getUserMedia(constrains,success,error){
    if(navigator.mediaDevices.getUserMedia){
        //最新標準API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia){
        //webkit內核瀏覽器
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia){
        //Firefox瀏覽器
        navagator.mozGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.getUserMedia){
        //舊版API
        navigator.getUserMedia(constrains).then(success).catch(error);
    }
}

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//成功的回調函數
function success(stream){
    //兼容webkit內核瀏覽器
    var CompatibleURL = window.URL || window.webkitURL;
    //將視頻流設置爲video元素的源
    video.src = CompatibleURL.createObjectURL(stream);
    //播放視頻
    video.play();
}

//異常的回調函數
function error(error){
    console.log("訪問用戶媒體設備失敗：",error.name,error.message);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
    //調用用戶媒體設備，訪問攝像頭
    getUserMedia({
        video:{width:480,height:320}
    },success,error);
} else {
    alert("你的瀏覽器不支持訪問用戶媒體設備");
}

//註冊拍照按鈕的單擊事件
document.getElementById("capture").addEventListener("click",function(){
    //繪製畫面
    context.drawImage(video,0,0,480,320);
});

進階

對本示例進行功能增強，好比使用CSS 3 的濾鏡實現模糊、黑白等效果。