在現今世界，人們對于攝像頭的使用越來越頻繁，這些應用包括視頻會議、在線監控、視頻直播等等。在網頁應用中，使用攝像頭可以帶來一些很有趣的功能，比如：在線客服、視頻通話、拍照上傳等等。Javascript 作為網頁開發的主要語言之一，也支持攝像頭操作，接下來我們將詳細介紹如何在網頁中使用 Javascript 調用攝像頭進行截圖。
調用攝像頭
在 JavaScript 中，使用攝像頭需要通過獲取攝像對象navigator.mediaDevices.getUserMedia()方法來進行調用。該方法返回成功后，Camera 對象的可用性就已經被校驗，下面我們就可以調用視頻流進行拍照或者錄像了。
獲取視頻流：

navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.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);
});

通過上述代碼我們能夠獲取到系統攝像頭的視頻流，為了調試方便，這里我們使用了在頁面中的 video 標簽來展示視頻。
攝像頭截圖
當我們獲取到視頻流之后，就可以進行拍照了。在進行截圖時，我們需要保存當前畫面的快照，并且需要將快照數據轉換為圖片格式。這種轉換需要使用 canvas 元素進行操作。
接下來的代碼段是將 canvas 元素中的數據轉換為一個圖片格式

var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
<br>
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var imgData = canvas.toDataURL('image/png');

在上面的代碼中，我們使用了 canvas 元素來讀取視頻流，并將其轉換為圖片格式，通過toDataURL方法將 canvas 畫布中繪制的處理后的數據輸出為可供 img 標簽以及其他 HTML 標簽使用的 base64 字符串，從而生成圖片。
在對圖片進行處理后，我們可以按照之前的需求，對其進行上傳、下載等操作來完成需求。
總結：
在 Web 應用中，用 Javascript 調用攝像頭實現拍照或錄像是一個非常有趣和實用的功能，為了實現這個功能，我們需要通過navigator.mediaDevices.getUserMedia()方法來調用攝像頭獲取視頻流。將視頻流轉換成 canvas 底部，我們能夠獲取到一個二進制數據，而后我們通過toDataURL方法將其轉換為了 base64 格式。最后，我們可以進行圖片處理并上傳或者下載來完成需求。