Necesito mostrar 2 videos capturados desde 2 cámaras diferentes conectadas a mi computadora portátil. Una es la cámara de mi computadora portátil y la otra es una cámara web USB adjunta. Lo intenté con el siguiente código, pero ambos videos provienen de la misma cámara pero no son diferentes. Debajo de mi código. ¿Alguien puede ayudarme a ordenar esto, por favor? AIT
<video id="cameraModule1" width="100%" height="100%" autoplay></video> <video id="cameraModule2" width="100%" height="100%" autoplay></video> <script> //Selector for your <video> element const cam1 = document.querySelector('#cameraModule1'); //Core window.navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { cam1.srcObject = stream; cam1.onloadedmetadata = (e) => { cam1.play(); }; }) .catch( () => { alert('You have give browser the permission to run Webcam and mic ;( '); }); </script> <script> //Selector for your <video> element const cam2 = document.querySelector('#cameraModule2'); //Core window.navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { cam2.srcObject = stream; cam2.onloadedmetadata = (e) => { cam2.play(); }; }) .catch( () => { alert('You have give browser the permission to run Webcam and mic ;( '); }); </script>Cada cámara tiene un identificador único almacenado en una matriz. Si no especifica qué cámara, simplemente toma el índice [0]:
Aquí hay un código de muestra para obtener todos los dispositivos (esto agrega cada dispositivo a un menú desplegable para seleccionar cuál usar):
navigator.mediaDevices.enumerateDevices() .then(function(devices) { devices.forEach(function(device) { console.log("device", device); deviceName = device.label; if(deviceName == "" ){ deviceName = device.deviceId; } console.log(device.kind + ": named: " + deviceName +" id = " + device.deviceId); var audioSelect = document.getElementById("audioPicker-select"); var cameraSelect = document.getElementById("cameraPicker-select"); if(device.kind=="audioinput"){ //add a select to the audio dropdown list var option = document.createElement("option"); option.value = device.deviceId; option.text = deviceName; audioSelect.appendChild(option); }else if(device.kind =="videoinput"){ //add a select to the camera dropdown list var option = document.createElement("option"); option.value = device.deviceId; option.text = deviceName; cameraSelect.appendChild(option); } }); }) .catch(function(err) { console.log(err.name + ": " + err.message); });Ahora que tiene los dispositivos, debe insertar el cameraId en getUserMedia:
(Estos son algunos fragmentos de mi código):
var videoOptions = { deviceId: cameraId, width: { min: 100, ideal: cameraW, max: 1920 }, height: { min: 100, ideal: cameraH, max: 1080 }, frameRate: {ideal: cameraFR} }; cameraMediaOptions = { audio: false, video: videoOptions }; cameraStream = await navigator.mediaDevices.getUserMedia(cameraMediaOptions);Todo esto es de https://record.a.video - y todo el código está en GitHub: https://github.com/apivideo/recordavideo