Frdrcpeter007/camera-app.markdown

## camera-app.markdown

      
    Raw
  

              camera-app.markdown
            
          
    Camera App

A Pen by Michael on CodePen.
License.

  
## index.html
<html lang=”en”>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<main id="camera">
		    <canvas id="camera--sensor"></canvas>
		    <video id="camera--view" autoplay playsinline></video>
		    <img src="//:0" alt="" id="camera--output">
		    <button id="camera--trigger">Take a picture</button>
		</main>
	</body>
</html>

## script.js
var constraints = { video: { facingMode: "environment" }, audio: false };
var track = null;
const cameraView = document.querySelector("#camera--view"),
    cameraOutput = document.querySelector("#camera--output"),
    cameraSensor = document.querySelector("#camera--sensor"),
    cameraTrigger = document.querySelector("#camera--trigger");
function cameraStart() {
    navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function(stream) {
            track = stream.getTracks()[0];
            cameraView.srcObject = stream;
        })
        .catch(function(error) {
            console.error("Oops. Something is broken.", error);
        });
}
cameraTrigger.onclick = function() {
    cameraSensor.width = cameraView.videoWidth;
    cameraSensor.height = cameraView.videoHeight;
    cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
    cameraOutput.src = cameraSensor.toDataURL("image/webp");
    cameraOutput.classList.add("taken");
};
window.addEventListener("load", cameraStart, false);

## style.css
#camera, #camera--view, #camera--sensor, #camera--output{
    position: fixed;
    height: 30em;
    width: 50em;
    object-fit: cover;
}
#camera--view, #camera--sensor, #camera--output{
    transform: scaleX(-1);
    filter: FlipH;
}
#camera--trigger{
    color: #fff;
    background-color: #2c3e50;
    border-color: #2c3e50;
	display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    text-align: center;
    position: fixed;
    bottom: 2em;
    left: calc(50% - 100px);
}
.taken{
    height: 300px!important;
    width: 500px!important;
    transition: all 0.5s ease-in;
    border: solid 3px white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    top: 20px;
    right: 20px;
    z-index: 2;
}
	<html lang=”en”>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<main id="camera">
	<canvas id="camera--sensor"></canvas>
	<video id="camera--view" autoplay playsinline></video>
	<img src="//:0" alt="" id="camera--output">
	<button id="camera--trigger">Take a picture</button>
	</main>
	</body>
	</html>
	var constraints = { video: { facingMode: "environment" }, audio: false };
	var track = null;
	const cameraView = document.querySelector("#camera--view"),
	cameraOutput = document.querySelector("#camera--output"),
	cameraSensor = document.querySelector("#camera--sensor"),
	cameraTrigger = document.querySelector("#camera--trigger");
	function cameraStart() {
	navigator.mediaDevices
	.getUserMedia(constraints)
	.then(function(stream) {
	track = stream.getTracks()[0];
	cameraView.srcObject = stream;
	})
	.catch(function(error) {
	console.error("Oops. Something is broken.", error);
	});
	}
	cameraTrigger.onclick = function() {
	cameraSensor.width = cameraView.videoWidth;
	cameraSensor.height = cameraView.videoHeight;
	cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
	cameraOutput.src = cameraSensor.toDataURL("image/webp");
	cameraOutput.classList.add("taken");
	};
	window.addEventListener("load", cameraStart, false);
	#camera, #camera--view, #camera--sensor, #camera--output{
	position: fixed;
	height: 30em;
	width: 50em;
	object-fit: cover;
	}
	#camera--view, #camera--sensor, #camera--output{
	transform: scaleX(-1);
	filter: FlipH;
	}
	#camera--trigger{
	color: #fff;
	background-color: #2c3e50;
	border-color: #2c3e50;
	display: inline-block;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	text-align: center;
	position: fixed;
	bottom: 2em;
	left: calc(50% - 100px);
	}
	.taken{
	height: 300px!important;
	width: 500px!important;
	transition: all 0.5s ease-in;
	border: solid 3px white;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
	top: 20px;
	right: 20px;
	z-index: 2;
	}