摘要：失敗回調(diào)函數(shù)的參數(shù)，可能的異常有硬件問題用戶拒絕了當(dāng)前的瀏覽器實(shí)例的訪問請(qǐng)求或者用戶拒絕了當(dāng)前會(huì)話的訪問或者用戶在全局范圍內(nèi)拒絕了所有媒體訪問請(qǐng)求。

HTML5的getUserMedia API為用戶提供訪問硬件設(shè)備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基于該接口，開發(fā)者可以在不依賴任何瀏覽器插件的條件下訪問硬件媒體設(shè)備。
getUserMedia API最初是navigator.getUserMedia，目前已被最新Web標(biāo)準(zhǔn)廢除，變更為navigator.mediaDevices.getUserMedia（），但瀏覽器支持情況不如舊版API普及。
MediaDevices.getUserMedia（）方法提示用戶允許使用一個(gè)視頻和/或一個(gè)音頻輸入設(shè)備，例如相機(jī)或屏幕共享和/或麥克風(fēng)。如果用戶給予許可，就返回一個(gè)Promise對(duì)象，MediaStream對(duì)象作為此Promise對(duì)象的Resolved［成功］狀態(tài)的回調(diào)函數(shù)參數(shù)，相應(yīng)的，如果用戶拒絕了許可，或者沒有媒體可用的情況下PermissionDeniedError或者NotFoundError作為此Promise的Rejected［失敗］狀態(tài)的回調(diào)函數(shù)參數(shù)。注意，由于用戶不會(huì)被要求必須作出允許或者拒絕的選擇，所以返回的Promise對(duì)象可能既不會(huì)觸發(fā)resolve也不會(huì)觸發(fā) reject。

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

containers：指定請(qǐng)求的媒體類型，主要包含video和audio，必須至少一個(gè)類型或者兩個(gè)同時(shí)可以被指定。如果瀏覽器無法找到指定的媒體類型或者無法滿足相對(duì)應(yīng)的參數(shù)要求，那么返回的Promise對(duì)象就會(huì)處于rejected［失敗］狀態(tài)，NotFoundError作為rejected［失敗］回調(diào)的參數(shù)。

【例】同時(shí)請(qǐng)求不帶任何參數(shù)的音頻和視頻：

 { 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 }
  }
}

當(dāng)請(qǐng)求包含一個(gè)ideal（應(yīng)用最理想的）值時(shí)，這個(gè)值有著更高的權(quán)重，意味著瀏覽器會(huì)先嘗試找到最接近指定的理想值的設(shè)定或者攝像頭（如果設(shè)備擁有不止一個(gè)攝像頭）。

【例】?jī)?yōu)先使用前置攝像頭（如果有的話）：

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

【例】強(qiáng)制使用后置攝像頭：

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

成功回調(diào)函數(shù)seccessCallback的參數(shù)stream：stream是MediaStream的對(duì)象，表示媒體內(nèi)容的數(shù)據(jù)流，可以通過URL.createObjectURL轉(zhuǎn)換后設(shè)置為Video或Audio元素的src屬性來使用，部分較新的瀏覽器也可以直接設(shè)置為srcObject屬性來使用。

失敗回調(diào)函數(shù)errorCallback的參數(shù)error，可能的異常有：

AbortError：硬件問題

NotAllowedError：用戶拒絕了當(dāng)前的瀏覽器實(shí)例的訪問請(qǐng)求；或者用戶拒絕了當(dāng)前會(huì)話的訪問；或者用戶在全局范圍內(nèi)拒絕了所有媒體訪問請(qǐng)求。

NotFoundError：找不到滿足請(qǐng)求參數(shù)的媒體類型。

NotReadableError：操作系統(tǒng)上某個(gè)硬件、瀏覽器或者網(wǎng)頁(yè)層面發(fā)生的錯(cuò)誤導(dǎo)致設(shè)備無法被訪問。

OverConstrainedError：指定的要求無法被設(shè)備滿足。

SecurityError：安全錯(cuò)誤，在getUserMedia() 被調(diào)用的 Document
上面，使用設(shè)備媒體被禁止。這個(gè)機(jī)制是否開啟或者關(guān)閉取決于單個(gè)用戶的偏好設(shè)置。

TypeError：類型錯(cuò)誤，constraints對(duì)象未設(shè)置［空］，或者都被設(shè)置為false。

這個(gè)例子中，請(qǐng)求訪問用戶硬件設(shè)備的攝像頭，并把視頻流通過Video元素顯示出來。網(wǎng)頁(yè)中提供一個(gè)"拍照"的按鈕，通過Canvas將Video的畫面截取并繪制，核心代碼如下：

HTML

拍照

JavaScript

//訪問用戶媒體設(shè)備的兼容方法
function getUserMedia(constrains,success,error){
    if(navigator.mediaDevices.getUserMedia){
        //最新標(biāo)準(zhǔn)API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia){
        //webkit內(nèi)核瀏覽器
        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");

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

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

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

對(duì)本示例進(jìn)行功能加強(qiáng)，比如使用CSS 3 的濾鏡實(shí)現(xiàn)模糊、黑白等效果。