注意：獲取攝像頭影像主要是通過navigator.getUserMedia這個接口，在caniuse.com上查詢一下這個接口的支持情況，可以看到目前只有Chrome和Firefox支持得比較好，而且都要加上自家的前綴，移動端幾乎全線不可用。

屬性：window.navigator.getUserMedia(); 獲取攝像頭形象主要通過getUserMedia這個接口

案例代碼：

//首先要有個video標簽

<video id="video"></video>

var video = document.getElementById('video');

//getUserMeida做兼容處理

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

//向瀏覽器申請訪問攝像頭權限,需要用戶通過瀏覽器授權

var constraints= {

video:true,//video為true為啟用視頻

audio:true // audio為true為啟用音頻

}

navigator.getUserMedia(constraints,onSuccess, onError);

瀏覽器執行這段代碼的時候，會提示用戶是否允許使用攝像頭，允許之后，網頁上就可以實時顯示攝像頭影像了。如果不允許，就會觸發錯誤事件。

//如果啟動成功，出發監聽處理程序，傳入一個視頻流對象的參數stream

function onSuccess(stream){

if(window.URL){

//在Chrome和Opera中，URL.createObjectURL方法將媒體數據流（MediaStream）轉為一個二進制對象的URL（Blob URL），該URL可以作為video元素的src屬性的值。

video.src = window.URL.createObjectURL(stream);

}else{

video.src = stream;

}

video.play();

}

//如果再此基礎上需要實現獲取影像（拍照）功能的話，要加上canvas

<canvas id="canvas"></canvas>

var canvas = document.getElementById('canvas');

//規定要使用的圖像、畫布或視頻,位移x:0，y:0，寬，搞

canvas.getContext('2d).drawImage(video,0,0,window.innerWidth,innerHeight);

//把canvas的圖片顯示出來，放在一個img標簽里面

<img id='img' src=''/>

var img = document.getElementById('img');

//canvas.toDataUR()返回又參數指定格式image/webp的圖片的描述信息

img.src = canvas.toDateURL('image/webp');

來到這里img元素就會顯示你的攝像圖里面的圖像了！

總結

以上是生活随笔為你收集整理的HTML5 API详解（6）:getUserMedia实现拍照功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。