View | Details | Raw Unified | Return to bug 6815
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member-webcam.tt (+107 lines)
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>
(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt (+4 lines)
Lines 320-325 Link Here
320
                                                <a href="#" id="cancel-picture-upload" class="cancel">Cancel</a>
320
                                                <a href="#" id="cancel-picture-upload" class="cancel">Cancel</a>
321
                                            </div>
321
                                            </div>
322
                                        </form>
322
                                        </form>
323
                                        <div class="patroninfo-heading">
324
                                            <h3>Take patron image</h3>
325
                                            <a class="btn btn-default btn-xs" id="trigger-webcam" href="/cgi-bin/koha/members/webcam.pl" target="_blank"><i class="fa fa-camera"></i> Take</a>
326
                                        </div>
323
                                    </div> [% # /div#manage-patron-image %]
327
                                    </div> [% # /div#manage-patron-image %]
324
                                [% END %]
328
                                [% END %]
325
                            [% END %]
329
                            [% END %]
(-)a/members/webcam.pl (-1 / +37 lines)
Line 0 Link Here
0
- 
1
#!/usr/bin/perl
2
3
# This file is part of Koha.
4
#
5
# Copyright 2019 Mark Tompsett
6
#
7
# Koha is free software; you can redistribute it and/or modify it
8
# under the terms of the GNU General Public License as published by
9
# the Free Software Foundation; either version 3 of the License, or
10
# (at your option) any later version.
11
#
12
# Koha is distributed in the hope that it will be useful, but
13
# WITHOUT ANY WARRANTY; without even the implied warranty of
14
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15
# GNU General Public License for more details.
16
#
17
# You should have received a copy of the GNU General Public License
18
# along with Koha; if not, see <http://www.gnu.org/licenses>.
19
20
use Modern::Perl;
21
22
use CGI qw ( -utf8 );
23
use C4::Auth;
24
use C4::Output;
25
26
my $input = new CGI;
27
28
my ( $template, $loggedinuser, $cookie, $staff_flags ) = get_template_and_user(
29
    {   template_name   => "members/member-webcam.tt",
30
        query           => $input,
31
        type            => "intranet",
32
        authnotrequired => 0,
33
        flagsrequired   => { borrowers => 'edit_borrowers' },
34
    }
35
);
36
37
output_html_with_http_headers( $input, $cookie, $template->output );

Return to bug 6815