koha-tmpl/intranet-tmpl/prog/js/patron-webcam.js

   1 /* global __ */
   2 /* exported startup */
   3
   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
   6 */
   7
   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
  10
  11 // |streaming| indicates whether or not we're currently streaming
  12 // video from the camera. Obviously, we start at false.
  13
  14 var streaming = false;
  15
  16 // The various HTML elements we need to configure or control. These
  17 // will be set by the startup() function.
  18
  19 var video = null;
  20 var canvas = null;
  21 var photo = null;
  22 var takebutton = null;
  23 var retakebutton = null;
  24 var downloadbutton = null;
  25 var savebutton = null;
  26 var output = null;
  27 var camera = null;
  28 var uploadfiletext = null;
  29
  30 /**
  31  * Initiate the camera and add some click handlers
  32  */
  33
  34 function startup() {
  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");
  45
  46     try {
  47         navigator.mediaDevices.getUserMedia({
  48             video: true,
  49             audio: false
  50         })
  51             .then(function (stream) {
  52                 video.srcObject = stream;
  53                 video.play();
  54             })
  55             .catch(function (err) {
  56                 $("#capture-patron-image").hide();
  57                 $("#camera-error").css("display", "flex");
  58                 $("#camera-error-message").text( showMediaErrors( err ) );
  59             });
  60     } catch(err) {
  61         $("#capture-patron-image").hide();
  62         $("#camera-error").css("display", "flex");
  63         $("#camera-error-message").text( showMediaErrors( err ) );
  64     }
  65
  66     video.addEventListener('canplay', function () {
  67         if (!streaming) {
  68             height = video.videoHeight / (video.videoWidth / width);
  69
  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.
  72
  73             if (isNaN(height)) {
  74                 height = width / (4 / 3);
  75             }
  76
  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);
  83             streaming = true;
  84         }
  85     }, false);
  86
  87     takebutton.addEventListener('click', function (ev) {
  88         takepicture();
  89         ev.preventDefault();
  90     }, false);
  91
  92     retakebutton.addEventListener('click', function (ev) {
  93         ev.preventDefault();
  94         retakephoto();
  95     }, false);
  96
  97     clearphoto();
  98 }
  99
 100 function showMediaErrors( err ){
 101     // Example error: "NotAllowedError: Permission denied"
 102     var errorcode = err.toString().split(":");
 103     var output;
 104     switch ( errorcode[0] ) {
 105     case "NotFoundError":
 106     case "DevicesNotFoundError":
 107         output = __("No camera detected.");
 108         break;
 109     case "NotReadableError":
 110     case "TrackStartError":
 111         output = __("Could not access camera.");
 112         break;
 113     case "NotAllowedError":
 114     case "PermissionDeniedError":
 115         output = __("Access to camera denied.");
 116         break;
 117     case "TypeError":
 118         output = __("This feature is available only in secure contexts (HTTPS).");
 119         break;
 120     default:
 121         output = __("An unknown error occurred: ") + err;
 122         break;
 123     }
 124     return output;
 125 }
 126
 127 /**
 128  * Clear anything passed to the canvas element and the corresponding image.
 129  */
 130
 131 function clearphoto() {
 132     var context = canvas.getContext('2d');
 133     context.fillStyle = "#AAA";
 134     context.fillRect(0, 0, canvas.width, canvas.height);
 135
 136     var data = canvas.toDataURL('image/jpeg', 1.0);
 137     photo.setAttribute('src', data);
 138 }
 139
 140 /**
 141  * Reset the interface to hide download and save buttons.
 142  * Redisplay camera "shutter" button.
 143  */
 144
 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";
 152     photo.src = "";
 153     camera.style.display = "block";
 154     uploadfiletext.value = "";
 155 }
 156
 157 /**
 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).
 163  */
 164
 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);
 178
 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";
 184         } else {
 185             downloadbutton.download = "patron-photo.jpg";
 186         }
 187         downloadbutton.href = data;
 188         uploadfiletext.value = data;
 189
 190     } else {
 191         clearphoto();
 192     }
 193 }