js在浏览器获取电脑所有摄像头切换预览画面效果代码
代码语言:html
所属分类:多媒体
代码描述:js在浏览器获取电脑所有摄像头切换预览画面效果代码
代码标签: js 浏览器 获取 电脑 所有 摄像头 切换 预览 画面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Camera Switcher</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #f0f0f0; } video { border: 1px solid #ccc; border-radius: 4px; margin-top: 20px; width: 640px; height: 480px; } </style> </head> <body> <select id="cameraSelect"></select> <video id="video" autoplay></video> <script> async function getCameras() { try { // 枚举所有媒体设备 const devices = await navigator.mediaDevices.enumerateDevices(); const videoDevices = devices.filter(device => device.kind === 'videoinput'); // 获取下拉框元素 const cameraSelect = document.getElementById('cameraSelect'); // 清空下拉框内容 cameraSelect.innerHTML = ''; // 添加视频输入设备到下拉框中 videoDevices.forEach((device, index) => { const option = document.createElement('option'); option.value = device.deviceId; option.text = device.label || `Camera ${index + 1}`; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0