大网站成本,wordpress家居主题,网站怎么做数据转移,乐清网络平台可以通过 JavaScript 使用 navigator.mediaDevices.enumerateDevices() 获取电脑上的摄像头列表。以下是一个示例代码#xff0c;可以展示摄像头列表并选择进行预览。
HTML JavaScript 实现摄像头列表展示和预览
!DOCTYPE html
html langzh-CN…
可以通过 JavaScript 使用 navigator.mediaDevices.enumerateDevices() 获取电脑上的摄像头列表。以下是一个示例代码可以展示摄像头列表并选择进行预览。
HTML JavaScript 实现摄像头列表展示和预览
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title摄像头列表/title
/head
bodyh1摄像头选择/h1select idcameraSelect/selectbutton onclickstartCamera()开始预览/buttonvideo idvideoPreview autoplay playsinline stylewidth: 100%; max-width: 600px;/videoscriptconst 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标签不确定外接摄像头是否有标签。
