276 lines
7.8 KiB
JavaScript
276 lines
7.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
cheangpage();
|
|
// References to all the element we will need.
|
|
var video = document.querySelector('#camera-stream'),
|
|
image = document.querySelector('#snap'),
|
|
start_camera = document.querySelector('#start-camera'),
|
|
controls = document.querySelector('.controls'),
|
|
take_photo_btn = document.querySelector('#take-photo'),
|
|
delete_photo_btn = document.querySelector('#delete-photo'),
|
|
error_message = document.querySelector('#error-message');
|
|
|
|
|
|
// The getUserMedia interface is used for handling camera input.
|
|
// Some browsers need a prefix so here we're covering all the options
|
|
navigator.getMedia = ( navigator.getUserMedia ||
|
|
navigator.webkitGetUserMedia ||
|
|
navigator.mozGetUserMedia ||
|
|
navigator.msGetUserMedia);
|
|
|
|
|
|
if(!navigator.getMedia){
|
|
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
|
|
}
|
|
else{
|
|
|
|
// Request the camera.
|
|
navigator.getMedia(
|
|
{
|
|
video: true
|
|
},
|
|
// Success Callback
|
|
function(stream){
|
|
|
|
// Create an object URL for the video stream and
|
|
// set it as src of our HTLM video element.
|
|
//video.src = window.URL.createObjectURL(stream);
|
|
video.srcObject = stream
|
|
|
|
// Play the video element to start the stream.
|
|
video.play();
|
|
video.onplay = function() {
|
|
showVideo();
|
|
};
|
|
|
|
},
|
|
// Error Callback
|
|
function(err){
|
|
displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
|
|
}
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Mobile browsers cannot play video without user input,
|
|
// so here we're using a button to start it manually.
|
|
start_camera.addEventListener("click", function(e){
|
|
|
|
e.preventDefault();
|
|
|
|
// Start video playback manually.
|
|
video.play();
|
|
showVideo();
|
|
|
|
});
|
|
|
|
|
|
take_photo_btn.addEventListener("click", function(e){
|
|
|
|
e.preventDefault();
|
|
|
|
var snap = takeSnapshot();
|
|
|
|
// Show image.
|
|
image.setAttribute('src', snap);
|
|
image.classList.add("visible");
|
|
|
|
// Enable delete and save buttons
|
|
delete_photo_btn.classList.remove("disabled");
|
|
|
|
// Pause video playback of stream.
|
|
video.pause();
|
|
search(snap);
|
|
|
|
});
|
|
|
|
|
|
delete_photo_btn.addEventListener("click", function(e){
|
|
|
|
e.preventDefault();
|
|
|
|
// Hide image.
|
|
image.setAttribute('src', "");
|
|
image.classList.remove("visible");
|
|
|
|
// Disable delete and save buttons
|
|
delete_photo_btn.classList.add("disabled");
|
|
|
|
// Resume playback of stream.
|
|
video.play();
|
|
|
|
});
|
|
|
|
|
|
|
|
function showVideo(){
|
|
// Display the video stream and the controls.
|
|
|
|
hideUI();
|
|
video.classList.add("visible");
|
|
controls.classList.add("visible");
|
|
}
|
|
|
|
|
|
function takeSnapshot(){
|
|
// Here we're using a trick that involves a hidden canvas element.
|
|
|
|
var hidden_canvas = document.querySelector('canvas'),
|
|
context = hidden_canvas.getContext('2d');
|
|
|
|
var width = video.videoWidth,
|
|
height = video.videoHeight;
|
|
|
|
if (width && height) {
|
|
|
|
// Setup a canvas with the same dimensions as the video.
|
|
hidden_canvas.width = width;
|
|
hidden_canvas.height = height;
|
|
|
|
// Make a copy of the current frame in the video on the canvas.
|
|
context.drawImage(video, 0, 0, width, height);
|
|
|
|
// Turn the canvas image into a dataURL that can be used as a src for our photo.
|
|
return hidden_canvas.toDataURL('image/png');
|
|
}
|
|
}
|
|
|
|
|
|
function displayErrorMessage(error_msg, error){
|
|
error = error || "";
|
|
if(error){
|
|
console.error(error);
|
|
}
|
|
|
|
error_message.innerText = error_msg;
|
|
|
|
hideUI();
|
|
error_message.classList.add("visible");
|
|
}
|
|
|
|
|
|
function hideUI(){
|
|
// Helper function for clearing the app UI.
|
|
|
|
controls.classList.remove("visible");
|
|
start_camera.classList.remove("visible");
|
|
video.classList.remove("visible");
|
|
snap.classList.remove("visible");
|
|
error_message.classList.remove("visible");
|
|
}
|
|
|
|
});
|
|
function cheangpage(){
|
|
var add_page = document.getElementById('add_page');
|
|
var search_page = document.getElementById('search_page');
|
|
var add_icon = document.getElementsByClassName('add_icon')[0];
|
|
|
|
if (add_icon.innerHTML == "add")
|
|
{
|
|
add_icon.innerHTML = "search";
|
|
add_page.style.display = "";
|
|
search_page.style.display = "none";
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/add', true);
|
|
var formData = new FormData();
|
|
xhr.onload = function(e) { };
|
|
xhr.send(formData);
|
|
}else{
|
|
add_icon.innerHTML = "add";
|
|
add_page.style.display = "none";
|
|
search_page.style.display = "";
|
|
|
|
}
|
|
};
|
|
function setinit(typ, pid){
|
|
if (pid != "0"){
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', '/' + typ + '/' + pid, true);
|
|
xhr.onload = function(e) {
|
|
document.getElementById("plast" + pid).innerHTML = "آخرین حضور: " + xhr.response;
|
|
};
|
|
xhr.send();
|
|
}};
|
|
function cer_per (name, nave, last, pid) {
|
|
var per = document.createElement("DIV");
|
|
var pname = document.createElement("P");
|
|
var pnave = document.createElement("P");
|
|
var plast = document.createElement("P");
|
|
var lex = document.createElement("DIV");
|
|
var ini = document.createElement("A");
|
|
var out = document.createElement("A");
|
|
|
|
pname.innerHTML = "نام: " + name;
|
|
pnave.innerHTML = "کد ملی: " + nave;
|
|
plast.innerHTML = "آخرین حضور: " + last;
|
|
plast.id = "plast" + pid;
|
|
|
|
lex.className = "flex";
|
|
lex.dir = "ltr";
|
|
|
|
var aa = '<a class="btn effect01" onclick="setinit(\'out\', ' + pid + ')"><span>ثبت خروج</span></a>';
|
|
aa = aa + '<a class="btn effect01" onclick="setinit(\'ini\', ' + pid + ')"><span>ثبت ورود</span></a>';
|
|
|
|
lex.innerHTML = aa;
|
|
per.appendChild(pname);
|
|
per.appendChild(pnave);
|
|
per.appendChild(plast);
|
|
|
|
lex.appendChild(out);
|
|
lex.appendChild(ini);
|
|
|
|
per.appendChild(lex);
|
|
Persons.appendChild(per);
|
|
};
|
|
function search (data) {
|
|
Persons.innerHTML = "<h4>مشخصات فرد</h4>";
|
|
// define data and connections
|
|
var blob = new Blob([data]);
|
|
var url = URL.createObjectURL(blob);
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/search', true);
|
|
|
|
// define new form
|
|
var formData = new FormData();
|
|
formData.append('image', data);
|
|
|
|
// action after uploading happens
|
|
xhr.onload = function(e) {
|
|
var text = xhr.response;
|
|
if (text == "0" || text == ""){return;}
|
|
var users = JSON.parse(text);
|
|
var img = users.pop();
|
|
snap.src = img;
|
|
for (index in users){
|
|
var user = users[index];
|
|
if (user == "0") {cer_per("یافت نشد.", "", "00:00", "0");}
|
|
else {cer_per(user[1], user[2], user[3], user[0]);}
|
|
}
|
|
};
|
|
|
|
// do the uploading
|
|
xhr.send(formData);
|
|
|
|
};
|
|
function savenew(){
|
|
var fname = document.getElementById("fname");
|
|
var fnav = document.getElementById("fnav");
|
|
var add_result = document.getElementById("add_result");
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
var formData = new FormData();
|
|
formData.append('name', fname.value);
|
|
formData.append('nav', fnav.value);
|
|
|
|
|
|
xhr.onload = function(e) {
|
|
var text = xhr.response;
|
|
if (text == "1") {add_result.innerHTML = "با موفقیت ثبت شد.";add_result.style.color = "green";}
|
|
else if (text == "0") {add_result.innerHTML = "مشکلی پیش آمد دوبار امتحان کنید.";add_result.style.color = "red";}
|
|
else {add_result.innerHTML = text;add_result.style.color = "red";}
|
|
};
|
|
xhr.open('POST', '/savenew', true);
|
|
xhr.send(formData);
|
|
};
|