Skip to content

Instantly share code, notes, and snippets.

@nikolaydubina
Created June 11, 2025 12:32
Show Gist options
  • Save nikolaydubina/2681e7bf773d377926780b14e94081f6 to your computer and use it in GitHub Desktop.
Save nikolaydubina/2681e7bf773d377926780b14e94081f6 to your computer and use it in GitHub Desktop.
<html>
<body>
<video id="player" autoplay muted playsinline></video>
<button id="capture">Capture</button>
<canvas id="canvas"></canvas>
<script>
const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
captureButton.addEventListener('click', () => {
canvas.width = player.videoWidth;
canvas.height = player.videoHeight;
context.drawImage(player, 0, 0, canvas.width, canvas.height);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image;
});
navigator.mediaDevices
.getUserMedia({ video: { facingMode: { exact: 'environment' } } })
.then((stream) => { player.srcObject = stream; });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment