96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
"use strict";
|
|
(function () {
|
|
const
|
|
control_againButton = document.getElementById("AgainButton"),
|
|
control_selfieBase64Image = document.getElementById("SelfieBase64Image"),
|
|
control_canvas = document.getElementById("Canvas"),
|
|
control_nextButton = document.getElementById("NextButton"),
|
|
control_photo = document.getElementById("Photo"),
|
|
control_photoContainer = document.getElementById("PhotoContainer"),
|
|
control_takePictureButton = document.getElementById("TakePictureButton"),
|
|
control_video = document.getElementById("Video"),
|
|
control_videoContainer = document.getElementById("VideoContainer");
|
|
|
|
function _bindEvents() {
|
|
control_video.addEventListener('canplay', _canPlay);
|
|
control_takePictureButton.addEventListener("click", _takePicture);
|
|
control_againButton.addEventListener("click", _showCamera);
|
|
}
|
|
|
|
function _canPlay() {
|
|
let width = 400;
|
|
let height = control_video.videoHeight / (control_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);
|
|
}
|
|
control_canvas.setAttribute('width', width);
|
|
control_canvas.setAttribute('height', height);
|
|
}
|
|
|
|
function _init() {
|
|
_loadCamera();
|
|
_bindEvents();
|
|
_showCamera();
|
|
}
|
|
|
|
function _loadCamera() {
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: false, })
|
|
.then(function (stream) {
|
|
let options = { mimeType: self.mimeType };
|
|
if (navigator.userAgent.indexOf('Chrome') >= 0) {
|
|
options = { mimeType: "video/webm; codecs=vp9" };
|
|
}
|
|
|
|
control_video.srcObject = stream;
|
|
control_video.play();
|
|
})
|
|
.catch(function (err) {
|
|
console.error("Unable to initialize camera: " + err);
|
|
});
|
|
}
|
|
|
|
function _showCamera() {
|
|
jfa.utilities.element.hide(control_photoContainer);
|
|
jfa.utilities.element.show(control_videoContainer);
|
|
|
|
jfa.utilities.element.show(control_takePictureButton);
|
|
jfa.utilities.element.hide(control_againButton);
|
|
|
|
jfa.utilities.element.disable(control_nextButton);
|
|
}
|
|
|
|
function _showPhoto() {
|
|
jfa.utilities.element.show(control_photoContainer);
|
|
jfa.utilities.element.hide(control_videoContainer);
|
|
|
|
jfa.utilities.element.show(control_againButton);
|
|
jfa.utilities.element.hide(control_takePictureButton);
|
|
|
|
jfa.utilities.element.enable(control_nextButton);
|
|
}
|
|
|
|
function _takePicture() {
|
|
let ratio = control_video.videoWidth / control_video.videoHeight;
|
|
let newHeight = control_canvas.height;
|
|
let newWidth = control_canvas.height * ratio;
|
|
|
|
control_canvas.width = newWidth;
|
|
control_canvas.height = newHeight;
|
|
|
|
const context = control_canvas.getContext('2d');
|
|
context.drawImage(control_video, 0, 0, newWidth, newHeight);
|
|
|
|
const data = control_canvas.toDataURL('image/jpg');
|
|
control_photo.setAttribute('src', data);
|
|
|
|
control_selfieBase64Image.value = data;
|
|
|
|
_showPhoto();
|
|
}
|
|
|
|
_init();
|
|
})(); |