在現(xiàn)代的網(wǎng)頁應(yīng)用中，經(jīng)常需要使用電腦攝像頭來實(shí)現(xiàn)一些功能。例如視頻會議、頭像上傳、掃描二維碼等。而JavaScript正是一種能夠輕松實(shí)現(xiàn)攝像頭調(diào)用功能的語言。下面我們來看一下如何使用JavaScript調(diào)用電腦攝像頭并且獲取圖像。
調(diào)用攝像頭的方式多種多樣，我們這里介紹一種比較普遍的方法，即使用Web API。Web API是一套標(biāo)準(zhǔn)化的接口，可以讓瀏覽器直接訪問硬件、軟件等操作系統(tǒng)的底層功能。而HTML5則提供了一個新的API叫做getUserMedia，用于從設(shè)備攝像頭和麥克風(fēng)獲取視頻和音頻流。下面是一個簡單的使用示例代碼：

<video id="video" width="640" height="480" autoplay></video>
<br>
  <script>
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
var video = document.querySelector('#video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
</script>

上面的代碼片段用到了getUserMedia函數(shù)來獲取攝像頭的視頻流，并將其賦值給視頻元素的srcObject屬性，最后顯示出來。需要注意的是，此方法只在HTTPS環(huán)境下使用。
通過上面的示例我們可以發(fā)現(xiàn)，使用getUserMedia調(diào)用攝像頭非常簡單。不過在實(shí)際應(yīng)用中，我們還需要對獲取的視頻流進(jìn)行一些處理。例如，可以使用canvas把視頻流轉(zhuǎn)化成一張靜態(tài)圖片，再或者使用WebRTC通過數(shù)據(jù)通信的方式向其他用戶發(fā)送視頻流。下面是一個實(shí)現(xiàn)WebRTC視頻聊天的示例代碼：

<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<br>
  <script>
var constraints = { video: true, audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
var localVideo = document.querySelector('#localVideo');
localVideo.srcObject = stream;
<br>
      var pc1 = new RTCPeerConnection();
var pc2 = new RTCPeerConnection();
<br>
      pc1.onicecandidate = function(event) {
if (event.candidate) {
pc2.addIceCandidate(event.candidate);
}
};
<br>
      pc2.onicecandidate = function(event) {
if (event.candidate) {
pc1.addIceCandidate(event.candidate);
}
};
<br>
      pc2.onaddstream = function(event) {
var remoteVideo = document.querySelector('#remoteVideo');
remoteVideo.srcObject = event.stream;
};
<br>
      pc1.addStream(stream);
pc1.createOffer().then(function(offer) {
pc1.setLocalDescription(offer);
pc2.setRemoteDescription(offer);
pc2.createAnswer().then(function(answer) {
pc2.setLocalDescription(answer);
pc1.setRemoteDescription(answer);
});
});
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
</script>

上面的代碼片段使用WebRTC技術(shù)實(shí)現(xiàn)了視頻聊天功能。我們通過getUserMedia獲取用戶的媒體流，然后將其加入到RTCPeerConnection中。RTCPeerConnection是WebRTC的核心部分，能夠在瀏覽器之間建立點(diǎn)對點(diǎn)的傳輸數(shù)據(jù)通道。我們通過RTCPeerConnection實(shí)現(xiàn)了視頻流的傳輸。
總的來說，通過JavaScript調(diào)用電腦攝像頭非常方便，而且能夠?qū)崿F(xiàn)各種各樣的功能。需要注意的是，在使用getUserMedia函數(shù)時，必須要遵循用戶隱私保護(hù)的相關(guān)法律規(guī)定。同時，頁面訪問攝像頭時必須給用戶以提示或者授權(quán)。