Skip to content

GitLab

N
nutrapharm_producto
Commit c5f68f9d authored by Cristian Mauricio Diaz Canales's avatar Cristian Mauricio Diaz Canales 💬
Browse files
Options

Actualizacion con cambios de miguel

parent 36fad147
Hide whitespace changes
Inline Side-by-side
Showing with 133 additions and 115 deletions
web/frontend/js/capture.js
View file @ c5f68f9d
(function() { (function () {
// The width and height of the captured photo. We will set the // The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be // width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream. // calculated based on the aspect ratio of the input stream.
var width = 320; // We will scale the photo width to this var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream var height = 0; // This will be computed based on the input stream
// |streaming| indicates whether or not we're currently streaming // |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false. // video from the camera. Obviously, we start at false.
var streaming = false; var streaming = false;
// The various HTML elements we need to configure or control. These // The various HTML elements we need to configure or control. These
// will be set by the startup() function. // will be set by the startup() function.
var video = null; var video = null;
var canvas = null; var canvas = null;
var photo = null; var photo = null;
var startbutton = null; var startbutton = null;
function startup() { function startup() {
video = document.getElementById('video'); video = document.getElementById('video');
canvas = document.getElementById('canvas'); canvas = document.getElementById('canvas');
photo = document.getElementById('photo'); photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton'); startbutton = document.getElementById('startbutton');
var video_constraints = {mandatory: { var video_constraints = {mandatory: {
maxWidth: 320, maxWidth: 320,
maxHeight: 240, maxHeight: 240,
maxAspectRatio:4/3, maxAspectRatio: 4 / 3,
maxFrameRate:60 maxFrameRate: 60
}, },
optional: [ ] optional: []
}; };
navigator.mediaDevices.getUserMedia({video: true, audio: false}) navigator.mediaDevices.getUserMedia({video: true, audio: false})
//navigator.mediaDevices.getUserMedia({video:video_constraints, audio: false}) //navigator.mediaDevices.getUserMedia({video:video_constraints, audio: false})
.then(function(stream) { .then(function (stream) {
video.srcObject = stream; video.srcObject = stream;
video.play(); video.play();
}) })
.catch(function(err) { .catch(function (err) {
console.log("An error occurred: " + err); console.log("An error occurred: " + err);
}); });
video.addEventListener('canplay', function(ev){ video.addEventListener('canplay', function (ev) {
if (!streaming) { if (!streaming) {
height = video.videoHeight / (video.videoWidth/width); height = video.videoHeight / (video.videoWidth / width);
// Firefox currently has a bug where the height can't be read from // Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens. // the video, so we will make assumptions if this happens.
if (isNaN(height)) { if (isNaN(height)) {
height = width / (4/3); 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();
showForm();
hidePhotoButtons();
}, 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');
var calculatedRatio = calculateAspectRatioFit(width, height, 600, 400);
if (width && height) {
canvas.width = calculatedRatio.width;
canvas.height = calculatedRatio.height;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
} }
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();
showForm();
hidePhotoButtons();
}, 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 / 4/3);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
} }
}
/**
function showForm(){ * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
$("#containerFormulario").show(); * images to fit into a certain area.
} *
* @param {Number} srcWidth width of source image
function hidePhotoButtons(){ * @param {Number} srcHeight height of source image
$("#tomarFotoContainer").show(); * @param {Number} maxWidth maximum available width
$("#subirFotoContainer").hide(); * @param {Number} maxHeight maximum available height
} * @return {Object} { width, height }
*/
// Set up our event listener to run the startup process function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
// once loading is complete.
window.addEventListener('load', startup, false); var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return {width: srcWidth * ratio, height: srcHeight * ratio};
}
function showForm() {
$("#containerFormulario").show();
}
function hidePhotoButtons() {
$("#tomarFotoContainer").show();
$("#subirFotoContainer").hide();
}
// Set up our event listener to run the startup process
// once loading is complete.
window.addEventListener('load', startup, false);
})(); })();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment