Scribd
Upload
24 views

Camera Codes

The document describes how to use JavaScript to capture photos from a user's webcam. It uses the webcam to get a video stream, draws the stream to a canvas, and takes a snapshot by drawing the canvas to an image when a button is clicked.

Uploaded by

iaaravyadav20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
24 views

Camera Codes

The document describes how to use JavaScript to capture photos from a user's webcam. It uses the webcam to get a video stream, draws the stream to a canvas, and takes a snapshot by drawing the canvas to an image when a button is clicked.

Uploaded by

iaaravyadav20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<html>

<head>
<style>
/* CSS comes here */
#video {
border: 1px solid black;
width: 320px;
height: 240px;
}

#photo {
border: 1px solid black;
width: 320px;
height: 240px;
}

#canvas {
display: none;
}

.camera {
width: 340px;
display: inline-block;
}

.output {
width: 340px;
display: inline-block;
}

#startbutton {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
bottom: 36px;
padding: 5px;
background-color: #6a67ce;
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 14px;
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}

.contentarea {
font-size: 16px;
font-family: Arial;
text-align: center;
}
</style>
<title>My Favorite Sport</title>
</head>

<body>
<div class="contentarea">
<h1>
Using Javascript to capture Photo
</h1>
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<div><button id="startbutton">Take photo</button></div>
<canvas id="canvas"></canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
</div>

<script>
/* JS comes here */
(function() {

var width = 320; // We will scale the photo width to this


var height = 0; // This will be computed based on the input stream

var streaming = false;

var video = null;


var canvas = null;
var photo = null;
var startbutton = null;

function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');

navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});

video.addEventListener('canplay', function(ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);

if (isNaN(height)) {
height = width / (4 / 3);
}

video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);

startbutton.addEventListener('click', function(ev) {
takepicture();
ev.preventDefault();
}, false);

clearphoto();
}

function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);

var data = canvas.toDataURL('image/png');


photo.setAttribute('src', data);
}

function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);

var data = canvas.toDataURL('image/png');


photo.setAttribute('src', data);
} else {
clearphoto();
}
}

window.addEventListener('load', startup, false);


})();
</script>
</body>

</html>

You might also like