4 /* Adapted from Mozilla's article "Taking still photos with WebRTC"
5 * https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos
8 var width = 480; // We will scale the photo width to this
9 var height = 0; // This will be computed based on the input stream
11 // |streaming| indicates whether or not we're currently streaming
12 // video from the camera. Obviously, we start at false.
14 var streaming = false;
16 // The various HTML elements we need to configure or control. These
17 // will be set by the startup() function.
22 var takebutton = null;
23 var retakebutton = null;
24 var downloadbutton = null;
25 var savebutton = null;
28 var uploadfiletext = null;
31 * Initiate the camera and add some click handlers
35 video = document.getElementById('viewfinder');
36 canvas = document.getElementById('canvas');
37 photo = document.getElementById('photo');
38 takebutton = document.getElementById('takebutton');
39 retakebutton = document.getElementById('retakebutton');
40 downloadbutton = document.getElementById('downloadbutton');
41 savebutton = document.getElementById('savebutton');
42 output = document.getElementById("output");
43 camera = document.getElementById("camera");
44 uploadfiletext = document.getElementById("uploadfiletext");
47 navigator.mediaDevices.getUserMedia({
51 .then(function (stream) {
52 video.srcObject = stream;
55 .catch(function (err) {
56 $("#capture-patron-image").hide();
57 $("#camera-error").css("display", "flex");
58 $("#camera-error-message").text( showMediaErrors( err ) );
61 $("#capture-patron-image").hide();
62 $("#camera-error").css("display", "flex");
63 $("#camera-error-message").text( showMediaErrors( err ) );
66 video.addEventListener('canplay', function () {
68 height = video.videoHeight / (video.videoWidth / width);
70 // Firefox currently has a bug where the height can't be read from
71 // the video, so we will make assumptions if this happens.
74 height = width / (4 / 3);
77 video.setAttribute('width', width);
78 video.setAttribute('height', height);
79 canvas.setAttribute('width', width);
80 canvas.setAttribute('height', height);
81 photo.setAttribute('width', width);
82 photo.setAttribute('height', height);
87 takebutton.addEventListener('click', function (ev) {
92 retakebutton.addEventListener('click', function (ev) {
100 function showMediaErrors( err ){
101 // Example error: "NotAllowedError: Permission denied"
102 var errorcode = err.toString().split(":");
104 switch ( errorcode[0] ) {
105 case "NotFoundError":
106 case "DevicesNotFoundError":
107 output = __("No camera detected.");
109 case "NotReadableError":
110 case "TrackStartError":
111 output = __("Could not access camera.");
113 case "NotAllowedError":
114 case "PermissionDeniedError":
115 output = __("Access to camera denied.");
118 output = __("This feature is available only in secure contexts (HTTPS).");
121 output = __("An unknown error occurred: ") + err;
128 * Clear anything passed to the canvas element and the corresponding image.
131 function clearphoto() {
132 var context = canvas.getContext('2d');
133 context.fillStyle = "#AAA";
134 context.fillRect(0, 0, canvas.width, canvas.height);
136 var data = canvas.toDataURL('image/jpeg', 1.0);
137 photo.setAttribute('src', data);
141 * Reset the interface to hide download and save buttons.
142 * Redisplay camera "shutter" button.
145 function retakephoto(){
146 downloadbutton.href= "";
147 downloadbutton.style.display = "none";
148 takebutton.style.display = "inline-block";
149 retakebutton.style.display = "none";
150 savebutton.style.display = "none";
151 output.style.display = "none";
153 camera.style.display = "block";
154 uploadfiletext.value = "";
158 * Capture the data from the user's camera and write it to the canvas element.
159 * The canvas data is converted to a data-url, and that URL set as the src
160 * attribute of an image.
161 * Display two controls for the captured photo: Download (to save to the
162 * user's computer) and Upload (save to the patron's record in Koha).
165 function takepicture() {
166 var context = canvas.getContext('2d');
167 var cardnumber = document.getElementById("cardnumber").value;
168 camera.style.display = "none";
169 downloadbutton.style.display = '';
170 output.style.display = "block";
171 takebutton.style.display = "none";
172 retakebutton.style.display = "inline-block";
173 savebutton.style.display = "inline-block";
174 if (width && height) {
175 canvas.width = width;
176 canvas.height = height;
177 context.drawImage(video, 0, 0, width, height);
179 var data = canvas.toDataURL('image/jpeg', 1.0);
180 photo.setAttribute('src', data);
181 if( cardnumber !== '' ){
182 // Download a file which the patrons card number as its name
183 downloadbutton.download = cardnumber + ".jpg";
185 downloadbutton.download = "patron-photo.jpg";
187 downloadbutton.href = data;
188 uploadfiletext.value = data;