I want to access both webcams in chrome browser simultaneously. My laptop has two webcams and I want to show both of them in a html page. This code shows only one webcam (back webcam) and I can't change it to use front webcam (Consider that, I know if I change chrome privacy, I can use only the other webcam). but the question is how can I use both of them simultaneously? This is the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Camera Test</title>
</head>
<body>
<div style="width:400px; background:#ccc; border:10px solid #ddd; margin:0 auto;">
<video id="video" width="400" height="300" autoplay></video>
</div>
<script>
(function () {
var video = document.getElementById('video');
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
//Capture video
navigator.getMedia({
video: true,
audio: false
}, function (stream) {
console.log(stream);
var mediaStream = new MediaStream(stream);
video.srcObject = mediaStream;
video.play();
}, function (error) {
console.error('MediaStream error:', error);
});
})();
</script>
</body>
</html>