| 
      
            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 | 
                          console.log('An error has occurred!', e) | 
            
            
              | 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>  | 
            
            
              | 108 | 
               |