웹캠 여러대 한페이지에 뛰울 수 있을까요?
본문
웹캠(USB) 여러대를 하나의 컴퓨터에 꽃은다음에 하나의 브라우저에서 여러대 동시에 뛰우고 싶은데
가능 할까요?
<script>
async function startWebcams() {
const constraints = { video: true };
try {
const stream1 = await navigator.mediaDevices.getUserMedia(constraints);
document.getElementById('webcam1').srcObject = stream1;
const stream2 = await navigator.mediaDevices.getUserMedia(constraints);
document.getElementById('webcam2').srcObject = stream2;
} catch (error) {
console.error('Error accessing webcams:', error);
}
}
startWebcams();
</script>
했는데 두대중 하나의 캠만 잡아 두 화면에 뿌려주네요~
js로 안되면 php로도 괞찬구요
감사 합니다~
답변 1
안녕하세요.
아래의 코드를 참고해 보시겠어요?
async function startWebcams() {
try {
// 연결된 미디어 장치 목록을 가져옵니다.
const devices = await navigator.mediaDevices.enumerateDevices();
// 비디오 장치만 필터링합니다.
const videoDevices = devices.filter(device => device.kind === 'videoinput');
if (videoDevices.length >= 2) {
// 첫 번째 웹캠 시작
const stream1 = await navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: videoDevices[0].deviceId } }
});
document.getElementById('webcam1').srcObject = stream1;
// 두 번째 웹캠 시작
const stream2 = await navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: videoDevices[1].deviceId } }
});
document.getElementById('webcam2').srcObject = stream2;
} else {
console.error('Not enough video devices found.');
}
} catch (error) {
console.error('Error accessing webcams:', error);
}
}
startWebcams();
잘 되는것을 확인 하였습니다.
오늘 p5.js 접했는데 그걸로도 두개 이상 가능한지 봐야 겠네요.
감사 드립니다~
