const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const mongoose = require('mongoose');
const passport = require('passport');
const flash = require('connect-flash');
const session = require('express-session');
const app = express();
// Passport Config
require('./config/passport')(passport);
// DB Config
const db = require('./config/keys').mongoURI;
// Connect to MongoDB
mongoose
.connect(
db,
{ useNewUrlParser: true }
.then(() => console.log('MongoDB Connected'))
.catch(err => console.log(err));
// EJS
app.use(expressLayouts);
app.set('view engine', 'ejs');
// Express body parser
app.use(express.urlencoded({ extended: true }));
// Express session
app.use(
session({
secret: 'secret',
resave: true,
saveUninitialized: true
})
);
// Passport middleware
app.use(passport.initialize());
app.use(passport.session());
// Connect flash
app.use(flash());
// Global variables
app.use(function(req, res, next) {
res.locals.success_msg = req.flash('success_msg');
res.locals.error_msg = req.flash('error_msg');
res.locals.error = req.flash('error');
next();
});
// Routes
app.use('/', require('./routes/index.js'));
app.use('/users', require('./routes/users.js'));
const PORT = process.env.PORT || 5000;
app.listen(PORT, console.log(`Server started on port ${PORT}`));
Pagina de inregristrare:
<div class="row mt-5">
<div class="col-md-8 m-auto">
<div class="card card-body">
<h1 class="text-center mb-3">
<i class="fas fa-user-plus"></i> Register
</h1>
<% include ./partials/messages %>
<div class="form-group">
<video id="video" style="display: inherit;" width="640" height="480" autoplay></video>
<canvas id="canvas" style="display: none;" width="640" height="480"></canvas>
<p id="opResult"></p>
<button id="snap" style="display: inherit;" class="btn btn-primary btn-block">
Snap
</button>
<button id="reset" style="display: none;" class="btn btn-primary btn-block">
Reset
</button>
</div>
<form action="/users/register" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input
type="name"
id="name"
name="name"
class="form-control"
placeholder="Enter Name"
value="<%= typeof name != 'undefined' ? name : '' %>"
/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="Enter Email"
value="<%= typeof email != 'undefined' ? email : '' %>"
/>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<input
type="gender"
id="gender"
name="gender"
class="form-control"
placeholder="Enter gender"
value="<%= typeof gender != 'undefined' ? gender : '' %>"
/>
</div>
<div class="form-group">
<label for="age">Age</label>
<input
type="age"
id="age"
name="age"
class="form-control"
placeholder="Enter age"
value="<%= typeof age != 'undefined' ? age : '' %>"
/>
</div>
<div class="form-group">
<label for="glasses">Glasses</label>
<input
type="glasses"
id="glasses"
name="glasses"
class="form-control"
placeholder="Enter glasses"
value="<%= typeof glasses != 'undefined' ? glasses : '' %>"
/>
</div>
<div class="form-group">
<label for="beard">Beard</label>
<input
type="beard"
id="beard"
name="beard"
class="form-control"
placeholder="Enter beard"
value="<%= typeof beard != 'undefined' ? beard : '' %>"
/>
</div>
<button type="submit" class="btn btn-primary btn-block">
Register
</button>
</form>
<p class="lead mt-4">Have An Account? <a href="/users/login">Login</a></p>
</div>
</div>
</div>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
document.getElementById("reset").addEventListener("click", function() {
document.getElementById("video").style.display = "inherit";
document.getElementById("snap").style.display = "inherit";
document.getElementById("canvas").style.display = "none";
document.getElementById("reset").style.display = "none";
});
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0);
document.getElementById("video").style.display = "none";
document.getElementById("snap").style.display = "none";
document.getElementById("canvas").style.display = "inherit";
document.getElementById("reset").style.display = "inherit";
AnonLog();
image = atob(canvas.toDataURL("image/jpeg").split("data:image/jpeg;base64,")[1]);
var length = image.length;
imageBytes = new ArrayBuffer(length);
var ua = new Uint8Array(imageBytes);
for (var i = 0; i < length; i++) {
ua[i] = image.charCodeAt(i);
DetectFaces(imageBytes);
});
//Calls DetectFaces API and shows estimated ages of detected faces
function DetectFaces(imageData) {
AWS.region = "us-east-1";
var rekognition = new AWS.Rekognition();
var params = {
Image: {
Bytes: imageData
},
Attributes: [
'ALL',
};
rekognition.detectFaces(params, function (err, data) {
if (err) console.log(err, err.stack); // an error occurred
else {
console.log(JSON.stringify(data));
console.log(canvas.toDataURL("image/jpeg").split("data:image/jpeg;base64,")[1]);
document.getElementById("gender").value = data.FaceDetails[0].Gender.Value;
document.getElementById("age").value = data.FaceDetails[0].AgeRange.Low;
document.getElementById("glasses").value = data.FaceDetails[0].Eyeglasses.Value;
document.getElementById("beard").value = data.FaceDetails[0].Beard.Value;
});
//Provides anonymous log on to AWS services
function AnonLog() {
// Configure the credentials provider to use your identity pool
AWS.config.region = 'us-east-1'; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:d079002e-ad6b-452c-959c-6b9feaef3342',
});
// Make the call to obtain credentials
AWS.config.credentials.get(function () {
// Credentials will be available when this function is called.
var accessKeyId = AWS.config.credentials.accessKeyId;
var secretAccessKey = AWS.config.credentials.secretAccessKey;
var sessionToken = AWS.config.credentials.sessionToken;
});
</script>
Pagina de Log In
<div class="row mt-5">
<div class="col-md-8 m-auto">
<div class="card card-body">
<h1 class="text-center mb-3"><i class="fas fa-sign-in-alt"></i> Login</h1>
<% include ./partials/messages %>
<div class="form-group">
<video id="video" style="display: inherit;" width="640" height="480" autoplay></video>
<canvas id="canvas" style="display: none;" width="640" height="480"></canvas>
<p></p>
<button id="snap" style="display: inherit;" class="btn btn-primary btn-block">
Snap
</button>
<button id="reset" style="display: none;" class="btn btn-primary btn-block">
Reset
</button>
</div>
<form action="/users/login" method="POST">
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="Enter Email"
/>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
<p class="lead mt-4">
No Account? <a href="/users/register">Register</a>
</p>
</div>
</div>
</div>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
document.getElementById("reset").addEventListener("click", function() {
document.getElementById("video").style.display = "inherit";
document.getElementById("snap").style.display = "inherit";
document.getElementById("canvas").style.display = "none";
document.getElementById("reset").style.display = "none";
});
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0);
document.getElementById("video").style.display = "none";
document.getElementById("snap").style.display = "none";
document.getElementById("canvas").style.display = "inherit";
document.getElementById("reset").style.display = "inherit";
AnonLog();
image = atob(canvas.toDataURL("image/jpeg").split("data:image/jpeg;base64,")[1]);
var length = image.length;
imageBytes = new ArrayBuffer(length);
var ua = new Uint8Array(imageBytes);
for (var i = 0; i < length; i++) {
ua[i] = image.charCodeAt(i);
DetectFaces(imageBytes);
});
//Calls DetectFaces API and shows estimated ages of detected faces
function DetectFaces(imageData) {
AWS.region = "us-east-1";
var rekognition = new AWS.Rekognition();
var params = {
Image: {
Bytes: imageData
},
Attributes: [
'ALL',
};
rekognition.detectFaces(params, function (err, data) {
if (err) console.log(err, err.stack); // an error occurred
else {
document.getElementById("opResult").innerHTML = JSON.stringify(data);
});
//Provides anonymous log on to AWS services
function AnonLog() {
// Configure the credentials provider to use your identity pool
AWS.config.region = 'us-east-1'; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:d079002e-ad6b-452c-959c-6b9feaef3342',
});
// Make the call to obtain credentials
AWS.config.credentials.get(function () {
// Credentials will be available when this function is called.
var accessKeyId = AWS.config.credentials.accessKeyId;
var secretAccessKey = AWS.config.credentials.secretAccessKey;
var sessionToken = AWS.config.credentials.sessionToken;
});
</script>
