Skip to content

Instantly share code, notes, and snippets.

@linktohack

linktohack/index.html

Created July 24, 2018 12:29
Show Gist options
  • Save linktohack/ce598313eb99781ae9fc41c2a4bf8762 to your computer and use it in GitHub Desktop.
Save linktohack/ce598313eb99781ae9fc41c2a4bf8762 to your computer and use it in GitHub Desktop.
Download ZIP
two cameras
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<video></video>
<video></video>
<video></video>
<button>Capture</button>
<canvas width="640" height="480"></canvas>
<canvas width="640" height="480"></canvas>
<canvas width="640" height="480"></canvas>
<script>
navigator
.mediaDevices
.enumerateDevices()
.then(devices => {
const videos = document.querySelectorAll('video');
devices
.filter(device => device.kind === 'videoinput' && (/BRIO/.test(device.label) || /B525/.test(device.label)))
.reverse()
.forEach((device, index) => {
setTimeout(() => {
console.log('device', index, device);
navigator.getUserMedia({ video: { deviceId: { exact: device.deviceId } } }, (stream) => {
console.log('got stream', index, stream);
videos[index].srcObject = stream
videos[index].play()
}, (err) => {
console.log('error', err)
})
}, (index + 1) * 1)
})
})
document
.querySelector('button')
.addEventListener('click', () => {
const canvases = document.querySelectorAll('canvas');
const videos = document.querySelectorAll('video')
videos.forEach((video, index) => {
if (video.paused) {
video.srcObject && video.play()
const ctx = canvases[index].getContext('2d')
ctx.fillStyle = 'rgb(255,255,255)'
ctx.fillRect(0, 0, 640, 480)
} else {
video.pause()
const ctx = canvases[index].getContext('2d')
ctx.drawImage(video, 0, 0);
}
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment