1、getUserMedia
要播放攝像頭的影像，首先需要一個video標簽：
1
<video id="video"></video>
獲取攝像頭影像主要是通過navigator.getUserMedia這個接口，這個接口的支持情況已經逐漸變好了：點這里
不過，使用的時候還是要加上前綴的，兼容代碼：
1
2
3
navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia;
1
語法： navigator.getUserMedia(constraints, successCallback, errorCallback);
參數說明：
constraints：Object類型，指定了請求使用媒體的類型
succeCallback：啟用成功時的函數，它傳入一個參數，為視頻流對象，可以進一步通過window.URL.createObjectURL()接口把視頻流轉換為對象URL。
errorCallback：啟動失敗時的函數。它傳入一個參數，為錯誤對象（chrome）或錯誤信息字符串（Firefox），可能值：
PERMISSION_DENIED：用戶拒絕提供信息。
NOT_SUPPORTED_ERROR：瀏覽器不支持硬件設備。
MANDATORY_UNSATISFIED_ERROR：無法發現指定的硬件設備。
例如：要啟用視頻設備（攝像頭），可這樣：
1
2
3
navigator.getUserMedia({
video: true
});
如果要同時啟用視頻設備和音頻設備，可這樣：
1
2
3
4
navigator.getUserMedia({
video: true,
audio: true
});
2、 獲取攝像頭
1
2
3
4
5
6
7
8
9
var URL = window.URL || window.webkitURL; // 獲取到window.URL對象
navigator.getUserMedia({
video: true
}, function(stream) {
video.src = URL.createObjectURL(stream);// 將獲取到的視頻流對象轉換為地址
video.play();
}, function(error) {
console.log(error.name || error);
});
3、 截圖
除了實時直播外，我們還可以做實時截圖效果，這時我們需要利用<canvas>元素來畫圖，代碼如下：
1
2
3
4
5
6
7
8
9
10
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = video.width;
var height = video.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(video, 0, 0, width, height);
4、 保存圖片
當然，截圖后，你也可以保存下來：
1
2
3
4
<a download='snap.png' id="download">下載圖片</a>
var url = canvas.toDataURL('image/png');
document.getElementById('download').src = url;
5、 完整實例
實例代碼（由於安全限制問題，請將代碼復制到本地運行）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#canvas,#video {
float: left;
margin-right: 10px;
background: #fff;
}
.box {
overflow: hidden;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">
<video id="video" width="400" height="300"></video>
<canvas id="canvas"></canvas>
</div>
<button id="live">直播</button>
<button id="snap">截圖</button>
<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = video.width;
var height = video.height;
canvas.width = width;
canvas.height = height;
function liveVideo(){
var URL = window.URL || window.webkitURL; // 獲取到window.URL對象
navigator.getUserMedia({
video: true
}, function(stream){
video.src = URL.createObjectURL(stream); // 將獲取到的視頻流對象轉換為地址
video.play(); // 播放
//點擊截圖
document.getElementById("snap").addEventListener('click', function() {
ctx.drawImage(video, 0, 0, width, height);
var url = canvas.toDataURL('image/png');
document.getElementById('download').href = url;
});
}, function(error){
console.log(error.name || error);
});
}
document.getElementById("live").addEventListener('click',function(){
liveVideo();
});
</script>
</body>
</html>