User camera capture

by Emanuele del Grande

HTML

<div class="logo">
    <span>JS</span> <span>Video capture</span>
    <div>User's camera image capture</div>
</div>

<p>Capturing shots from user's camera with HTML5 video and camera APIs.</p>

<button id="play">Play camera stream</button>
<button id="pause">Stop camera</button>

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }

/* SPECIFIC STYLE */
video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; background: #000; }
#canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }

JavaScript

/**
Check https://davidwalsh.name/browser-camera

The method for getting access to camera was initially navigator.getUserMedianavigator.mediaDevices.getUserMedia.

Browser vendors have recently ruled that getUserMedia should only work on https: protocol. You'll need a SSL certificate for this API to work.
**/

/*
// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    });
}



// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});



// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}
*/






// Put event listeners into place
window.addEventListener("DOMContentLoaded", function(e) {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('video');
    var mediaConfig = { video: true };
    var errBack = function(e) {
        console.log('An error has occurred!', e);
    };
    var _stream;

	function playStream() {
        // Put video listeners into place
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
                //video.src = window.URL.createObjectURL(stream);
                video.srcObject = stream;
                _stream =...