可以通過 JavaScript 使用 navigator.mediaDevices.enumerateDevices() 獲取電腦上的攝像頭列表。以下是一個示例代碼，可以展示攝像頭列表并選擇進行預覽。
HTML + JavaScript 實現攝像頭列表展示和預覽
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>攝像頭列表</title>
</head>
<body><h1>攝像頭選擇</h1><select id="cameraSelect"></select><button onclick="startCamera()">開始預覽</button><video id="videoPreview" autoplay playsinline style="width: 100%; max-width: 600px;"></video><script>const videoElement = document.getElementById('videoPreview');const selectElement = document.getElementById('cameraSelect');// 獲取攝像頭設備列表async function getCameraDevices() {const devices = await navigator.mediaDevices.enumerateDevices();const videoDevices = devices.filter(device => device.kind === 'videoinput');selectElement.innerHTML = ''; // 清空下拉框videoDevices.forEach((device, index) => {const option = document.createElement('option');option.value = device.deviceId;option.text = device.label || `攝像頭 ${index + 1}`;selectElement.appendChild(option);});}// 啟動攝像頭async function startCamera() {const selectedDeviceId = selectElement.value;const constraints = {video: {deviceId: selectedDeviceId ? { exact: selectedDeviceId } : undefined}};const stream = await navigator.mediaDevices.getUserMedia(constraints);videoElement.srcObject = stream;}// 頁面加載時自動獲取攝像頭window.onload = getCameraDevices;</script>
</body>
</html>
說明
- 核心方法:
navigator.mediaDevices.enumerateDevices()：列出所有音視頻設備。- 過濾出
videoinput類型的設備即為攝像頭。
- 下拉框動態生成：遍歷攝像頭設備，將其添加到
<select>下拉框中。 - 設備啟動：調用
navigator.mediaDevices.getUserMedia()，使用選定攝像頭進行視頻預覽。這個時候會提示訪問權限，要點擊允許就可以了
注意事項
- 瀏覽器權限：首次訪問頁面時，瀏覽器會請求訪問攝像頭權限。用戶拒絕后，設備列表可能為空。
- HTTPS要求：
getUserMedia只能在 HTTPS 或 localhost 上使用。 - 標簽問題：某些設備的標簽只有在用戶授權訪問后才能顯示。
運行后，你的頁面會自動檢測并展示攝像頭設備列表，選擇設備并點擊“開始預覽”即可看到實時攝像頭畫面。但是獲取到的本機攝像頭沒有label標簽，不確定外接攝像頭是否有標簽。
小項目實戰)
常見基礎配置)
