Line 0
Link Here
|
|
|
1 |
<!DOCTYPE html> |
2 |
<html lang="en" dir="ltr"> |
3 |
|
4 |
<head> |
5 |
<meta charset="utf-8" /> |
6 |
<title>Koha Patron Image Via Webcam</title> |
7 |
<meta name="description" |
8 |
content="Attempt to take a patron picture using the webcam" /> |
9 |
</head> |
10 |
|
11 |
<body> |
12 |
<h1>Koha Patron Image Taker</h1> |
13 |
<p>Ask the patron to face the webcam to take their picture.</p> |
14 |
<p>WARNING: If your machine does not have a webcam, |
15 |
your browser is not allowed camera access, your operating |
16 |
system blocks the browser app from accessing the camera, |
17 |
or your browser does not support the javascript used |
18 |
in this page, this may not work and likely looks like |
19 |
a empty page. If this is working you will see a video |
20 |
playing of what the webcam sees.</p> |
21 |
|
22 |
<!-- display what will be captured --> |
23 |
<video id="video" width="640" height="480" autoplay></video><br> |
24 |
<!-- button to trigger cascading clicks resulting in a saved file --> |
25 |
<!-- first stick the image into a hidden canvas below --> |
26 |
<button id="snap">Take the Patron's Picture</button> |
27 |
<canvas id="canvas" width="640" height="480" style="display:none"></canvas> |
28 |
<!-- then change the href in a hidden link to the picture data --> |
29 |
<button id="save" style="display:none">Save the Patron's Picture</button> |
30 |
<!-- which will get programmatically clicked forcing the download --> |
31 |
<a href="#" id="download" style="display:none">Download the Patron's Picture</a> |
32 |
|
33 |
<!-- the javascript magic that makes it happen --> |
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> |