This is the code I have, I want the camera to stop completely by itself without me entering control panel or closing the browser after the image is downloaded.... How do I stop the camera ? The light keeps going on. Ideally, I want the system to excess the camera once the file is downloaded. I do not want the browser to be closed. I thought the line was video.stop(); but doesn't seem to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
</head>
<body>
<div class="camera">
<video id="video">Video stream not available.</video>
<button onclick="startRecording()">Start Camera</button>
<button onclick="capturePhoto()">Take photo</button>
<button onclick="download()">Download photo</button>
</div>
<canvas id="canvas">
</canvas>
<script>
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;
//Starting webcam
function startRecording() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
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);
}
// Capture a photo by fetching the current contents of the video
function capturePhoto() {
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');
} else {
makePhoto();
}
}
// Download photo in canvas
function download(){
var link = document.createElement('a');
link.download = 'filename.png';
link.href = document.getElementById('canvas').toDataURL()
link.click();
}
