【pc端】获取前、后置摄像头名称及id，并实现切换

<select id="camera-all">select>

<video id="localVideo" playsinline autoplay muted>video>

1. 获取前、后置摄像头并以下拉框的形式展示

 	var cameraAllDom = document.getElementById('camera-all')var cameraList=[];navigator.mediaDevices.enumerateDevices().then((devices) => {if(devices){devices.forEach((device,index)=>{//kind为videoinput的为摄像头设备，一般有两个，前置和后置if(device.kind=="videoinput"){cameraList.push(value);}});if(cameraList.length>0){var str="";cameraList.forEach((device,index)=>{str+=`${device.deviceId}">${device.label}`});cameraAllDom.innerHTML = str;}}});

2. 监听select的改变:切换摄像头

    cameraAllDom.onchange = () => {if (cameraAllDom.children.length > 0) {var index = cameraAllDom.selectedIndex; //获取当前选择的选项的index值var deviceId = cameraAllDom.options[selIndex].value; //获取选中摄像头的deviceId//切换摄像头selectCamera(deviceId);};}

function selectCamera(deviceId){return new Promise(function (resolve,reject) {var constraints;constraints = {audio: {echoCancellation: true,},video: {deviceId: {exact: deviceId}}};//访问用户媒体设备的方法（处理了各浏览器的兼容，具体封装在后面单独粘出来了）getUserMedia(constraints).then(stream=>{resolve(stream);//给video标签的srcObject属性赋值，展示视频框document.getElementById('localVideo').srcObject = stream;})}

//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){if(navigator.mediaDevices.getUserMedia){//最新标准APInavigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);} else if (navigator.webkitGetUserMedia){//webkit内核浏览器navigator.webkitGetUserMedia(constrains).then(success).catch(error);} else if (navigator.mozGetUserMedia){//Firefox浏览器navigator.mozGetUserMedia(constrains).then(success).catch(error);} else if (navigator.getUserMedia){//旧版APInavigator.getUserMedia(constrains).then(success).catch(error);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！