在這篇文章中，我將向您展示如何通過(guò)JAVAScript在網(wǎng)頁(yè)上訪(fǎng)問(wèn)設(shè)備的攝像頭，并支持多種瀏覽器，而無(wú)需外部庫(kù)。
我不好看，好看的是文字
如何使用相機(jī)
要訪(fǎng)問(wèn)用戶(hù)的相機(jī)（或麥克風(fēng)），我們使用JavaScript MediaStream API。該API允許通過(guò)流訪(fǎng)問(wèn)這些設(shè)備捕獲的視頻和音頻。
第一步是檢查瀏覽器是否支持此API：
if (
"mediaDevices" in navigator &&
"getUserMedia" in navigator.mediaDevices
) {
// ok, 瀏覽器支持它
}
在現(xiàn)代瀏覽器中，支持是不錯(cuò)的（當(dāng)然沒(méi)有Internet Explorer）。
捕獲視頻流
要捕獲由攝像機(jī)生成的視頻流，我們使用 mediaDevices 對(duì)象的 getUserMedia 方法。這個(gè)方法接收一個(gè)對(duì)象，其中包含我們要請(qǐng)求的媒體類(lèi)型（視頻或音頻）和一些要求。首先，我們可以通過(guò) {video: true} 來(lái)獲取攝像機(jī)的視頻。
const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
此調(diào)用將詢(xún)問(wèn)用戶(hù)是否允許訪(fǎng)問(wèn)攝像機(jī)。如果用戶(hù)拒絕，它將引發(fā)異常并且不返回流。因此，必須在 try/catch 塊內(nèi)完成處理這種情況。
請(qǐng)注意，它返回一個(gè)Promise，因此您必須使用 async/await 或 then 塊。在mac OS系統(tǒng)上還會(huì)彈出授權(quán)。
沒(méi)錯(cuò)，我使用的是Mac版的Edge瀏覽器
點(diǎn)擊“好”，就可以訪(fǎng)問(wèn)電腦攝像頭了，控制臺(tái)輸出的 videoStream 對(duì)象如下
視頻規(guī)格（requirements）
我們可以通過(guò)傳遞有關(guān)所需分辨率以及最小和最大限制的信息來(lái)改善視頻的要求：
const constraints = {
video: {
width: {
min: 1280,
ideal: 1920,
max: 2560,
},
height: {
min: 720,
ideal: 1080,
max: 1440,
},
},
};
const videoStream = await navigator.mediaDevices.getUserMedia(constraints);
這樣，流以正確的寬度和高度比例進(jìn)入，如果它是處于縱向模式的手機(jī)，則需要進(jìn)行尺寸反轉(zhuǎn)。
在頁(yè)面上顯示視頻
既然有了流，我們?cè)撊绾翁幚恚?/p>
我們可以在頁(yè)面上的 video 元素中顯示視頻：
// 頁(yè)面中有一個(gè) <video autoplay id="video"></video> 標(biāo)簽
const video = document.querySelector("#video");
const videoStream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = videoStream;
請(qǐng)注意 video 標(biāo)簽中的自動(dòng)播放屬性 autoplay，沒(méi)有它，你需要調(diào)用 video.play() 才能真正開(kāi)始顯示圖像。
訪(fǎng)問(wèn)手機(jī)的前后攝像頭
默認(rèn)情況下，getUserMedia 將使用系統(tǒng)默認(rèn)的視頻錄制設(shè)備。如果是有兩個(gè)攝像頭的手機(jī)，它使用前置攝像頭。
要訪(fǎng)問(wèn)后置攝像頭，我們必須在視頻規(guī)格中包括 faceModeMode:"environment"：
const constraints = {
video: {
width: { ... },
height: { ... },
facingMode: "environment"
},
};
默認(rèn)值為 faceingMode:"user"，即前置攝像頭。
需要注意的是，如果你想在已經(jīng)播放視頻的情況下更換攝像機(jī)，你需要先停止當(dāng)前的視頻流，然后再將其替換成另一臺(tái)攝像機(jī)的視頻流。
videoStream.getTracks().forEach((track) => {
track.stop();
});
截屏
你可以做的另一件很酷的事情是捕獲視頻的圖像（屏幕快照）。
你可以在canvas上繪制當(dāng)前視頻幀，例如：
// 頁(yè)面中有一個(gè) <canvas id="canvas"></canvas> 標(biāo)簽
const canvas = document.querySelector("#canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0);
你還可以在 img 元素中顯示畫(huà)布內(nèi)容。
在本教程創(chuàng)建的示例中，我添加了一個(gè)按鈕，該按鈕可從畫(huà)布動(dòng)態(tài)創(chuàng)建圖像并將其添加到頁(yè)面：
const img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
screenshotsContainer.prepend(img);
完整代碼
在線(xiàn)效果及源代碼，源代碼并不多，很簡(jiǎn)單，相信只要有點(diǎn)Javascript基礎(chǔ)都能看懂。需要的請(qǐng)復(fù)制下面的鏈接，或私信關(guān)鍵字：攝像頭。
https://coding.zhangbing.site/view.html?url=./list/camera-api/index.html
手機(jī)QQ中瀏覽效果
如果對(duì)你有所啟發(fā)和幫助，可以點(diǎn)個(gè)關(guān)注、收藏、轉(zhuǎn)發(fā)，也可以留言討論，這是對(duì)作者的最大鼓勵(lì)。
作者簡(jiǎn)介：Web前端工程師，全棧開(kāi)發(fā)工程師、持續(xù)學(xué)習(xí)者。
