前端页面展示本电脑的摄像头，并使用js获取摄像头列表

最新推荐文章于 2025-03-04 20:31:49 发布

1024小神

最新推荐文章于 2025-03-04 20:31:49 发布

阅读量894

点赞数 7

分类专栏： HTML前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_44786530/article/details/144819082

版权

HTML前端专栏收录该内容

727 篇文章

订阅专栏

可以通过 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()，使用选定摄像头进行视频预览。这个时候会提示访问权限，要点击允许就可以了