Created
November 30, 2017 10:31
Star
You must be signed in to star a gist
Exemplo de tirar fotos a partir do browser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Teste de Tirar Foto</title> | |
</head> | |
<body> | |
<div class="camera"> | |
<video id="video" autoplay>Video stream not available.</video> | |
<button id="startbutton">Take photo</button> | |
</div> | |
<canvas id="canvas" style="display:none;"> | |
</canvas> | |
<div class="output"> | |
<img id="photo" alt="The screen capture will appear in this box."> | |
</div> | |
<script type="text/javascript"> | |
(function() { | |
// The width and height of the captured photo. We will set the | |
// width to the value defined here, but the height will be | |
// calculated based on the aspect ratio of the input stream. | |
var width = 320; // We will scale the photo width to this | |
var height = 0; // This will be computed based on the input stream | |
// |streaming| indicates whether or not we're currently streaming | |
// video from the camera. Obviously, we start at false. | |
var streaming = false; | |
// The various HTML elements we need to configure or control. These | |
// will be set by the startup() function. | |
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}) | |
.then(function(stream) { | |
video.srcObject = stream; | |
video.onloadedmetadata = function(e) { | |
video.play(); | |
}; | |
}) | |
.catch(function(err) { | |
console.log("An error occured! " + err); | |
}); | |
video.addEventListener('canplay', function(ev){ | |
if (!streaming) { | |
height = video.videoHeight / (video.videoWidth/width); | |
// Firefox currently has a bug where the height can't be read from | |
// the video, so we will make assumptions if this happens. | |
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(); | |
} | |
// Fill the photo with an indication that none has been | |
// captured. | |
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); | |
} | |
// Capture a photo by fetching the current contents of the video | |
// and drawing it into a canvas, then converting that to a PNG | |
// format data URL. By drawing it on an offscreen canvas and then | |
// drawing that to the screen, we can change its size and/or apply | |
// other changes before drawing it. | |
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(); | |
} | |
} | |
// Set up our event listener to run the startup process | |
// once loading is complete. | |
//window.addEventListener('load', startup, false); | |
window.addEventListener('DOMContentLoaded', startup, false); | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment