|
Lines 1-107
Link Here
|
| 1 |
<!DOCTYPE html> |
1 |
[% INCLUDE 'doc-head-open.inc' %] |
| 2 |
<html lang="en" dir="ltr"> |
2 |
<title>Koha › Patrons › Capture patron image</title> |
| 3 |
|
3 |
[% INCLUDE 'doc-head-close.inc' %] |
| 4 |
<head> |
4 |
<style>#snap{width:100%;background-color:#336699;color:white;}</style> |
| 5 |
<meta charset="utf-8" /> |
5 |
</head> |
| 6 |
<title>Koha Patron Image Via Webcam</title> |
6 |
|
| 7 |
<meta name="description" |
7 |
<body id="pat_take_photo" class="pat"> |
| 8 |
content="Attempt to take a patron picture using the webcam" /> |
8 |
[% INCLUDE 'header.inc' %] |
| 9 |
</head> |
9 |
[% INCLUDE 'patron-search.inc' %] |
| 10 |
|
10 |
|
| 11 |
<body> |
11 |
<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> › <a href="/cgi-bin/koha/members/members-home.pl">Patrons</a> › Capture patron image</div> |
| 12 |
<h1>Koha Patron Image Taker</h1> |
12 |
|
| 13 |
<p>Ask the patron to face the webcam to take their picture.</p> |
13 |
<div class="main container-fluid"> |
| 14 |
<p>WARNING: If your machine does not have a webcam, |
14 |
<div class="row"> |
| 15 |
your browser is not allowed camera access, your operating |
15 |
<div class="col-md-8 col-md-offset-2"> |
| 16 |
system blocks the browser app from accessing the camera, |
16 |
<h1>Capture patron image</h1> |
| 17 |
or your browser does not support the javascript used |
17 |
<div id="webcam"> |
| 18 |
in this page, this may not work and likely looks like |
18 |
<p>Ask the patron to face the webcam to take their picture.</p> |
| 19 |
a empty page. If this is working you will see a video |
19 |
|
| 20 |
playing of what the webcam sees.</p> |
20 |
<!-- display what will be captured --> |
| 21 |
|
21 |
<video id="video" width="100%" autoplay></video><br> |
| 22 |
<!-- display what will be captured --> |
22 |
<!-- button to trigger cascading clicks resulting in a saved file --> |
| 23 |
<video id="video" width="640" height="480" autoplay></video><br> |
23 |
<!-- first stick the image into a hidden canvas below --> |
| 24 |
<!-- button to trigger cascading clicks resulting in a saved file --> |
24 |
<button id="snap"><i class="fa fa-camera"></i> Take the patron's picture</button> |
| 25 |
<!-- first stick the image into a hidden canvas below --> |
25 |
<canvas id="canvas" width="640" height="480" style="display:none"></canvas> |
| 26 |
<button id="snap">Take the Patron's Picture</button> |
26 |
<!-- which will get programmatically clicked forcing the download --> |
| 27 |
<canvas id="canvas" width="640" height="480" style="display:none"></canvas> |
27 |
<a href="#" id="download" style="display:none">Download the patron's picture</a> |
| 28 |
<!-- then change the href in a hidden link to the picture data --> |
28 |
</div> |
| 29 |
<button id="save" style="display:none">Save the Patron's Picture</button> |
29 |
</div> <!-- /.col-md-8.col-md-offset-2 --> |
| 30 |
<!-- which will get programmatically clicked forcing the download --> |
30 |
</div> <!-- /.row --> |
| 31 |
<a href="#" id="download" style="display:none">Download the Patron's Picture</a> |
31 |
</div> <!-- /.main.container-fluid --> |
| 32 |
|
32 |
|
| 33 |
<!-- the javascript magic that makes it happen --> |
33 |
[% INCLUDE 'intranet-bottom.inc' %] |
| 34 |
<script> |
|
|
| 35 |
// Put event listeners into place |
| 36 |
window.addEventListener("DOMContentLoaded", |
| 37 |
function() { |
| 38 |
// Grab elements, create settings, etc. |
| 39 |
var canvas = document.getElementById('canvas'); |
| 40 |
var context = canvas.getContext('2d'); |
| 41 |
var video = document.getElementById('video'); |
| 42 |
var mediaConfig = { video: true }; |
| 43 |
var errBack = function(e) { |
| 44 |
alert('An error has occurred!'); |
| 45 |
}; |
| 46 |
|
| 47 |
// Put video listeners into place |
| 48 |
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
| 49 |
navigator.mediaDevices.getUserMedia(mediaConfig).then( |
| 50 |
function(stream) { |
| 51 |
video.srcObject = stream; |
| 52 |
video.play(); |
| 53 |
} |
| 54 |
); |
| 55 |
} |
| 56 |
/* Legacy code below! */ |
| 57 |
else if (navigator.getUserMedia) { // Standard |
| 58 |
navigator.getUserMedia(mediaConfig, |
| 59 |
function(stream) { |
| 60 |
video.src = stream; |
| 61 |
video.play(); |
| 62 |
}, |
| 63 |
errBack |
| 64 |
); |
| 65 |
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed |
| 66 |
navigator.webkitGetUserMedia(mediaConfig, |
| 67 |
function(stream) { |
| 68 |
video.src = window.webkitURL.createObjectURL(stream); |
| 69 |
video.play(); |
| 70 |
}, |
| 71 |
errBack |
| 72 |
); |
| 73 |
} else if (navigator.mozGetUserMedia) { // Mozilla-prefixed |
| 74 |
navigator.mozGetUserMedia(mediaConfig, |
| 75 |
function(stream) { |
| 76 |
video.src = window.URL.createObjectURL(stream); |
| 77 |
video.play(); |
| 78 |
}, |
| 79 |
errBack |
| 80 |
); |
| 81 |
} |
| 82 |
|
| 83 |
// Trigger photo take |
| 84 |
document.getElementById('snap').addEventListener('click', |
| 85 |
function() { |
| 86 |
context.drawImage(video, 0, 0, 640, 480); |
| 87 |
var save_button = document.getElementById('save'); |
| 88 |
save_button.click(); |
| 89 |
} |
| 90 |
); |
| 91 |
|
| 92 |
// Save photo taken |
| 93 |
document.getElementById('save').addEventListener('click', |
| 94 |
function() { |
| 95 |
var download_anchor = document.getElementById('download'); |
| 96 |
download_anchor.href = canvas.toDataURL('image/jpeg'); |
| 97 |
download_anchor.download = "SamplePhoto.jpg"; |
| 98 |
download_anchor.click(); |
| 99 |
} |
| 100 |
); |
| 101 |
}, |
| 102 |
false |
| 103 |
); |
| 104 |
|
| 105 |
</script> |
| 106 |
</body> |
| 107 |
</html> |