From 370a10c512cc42acfd6d4f37fa625643721804b3 Mon Sep 17 00:00:00 2001 From: Mark Tompsett Date: Wed, 15 Jul 2020 04:55:06 +0000 Subject: [PATCH] Bug 6815: Capture member photo via webcam This patch builds on a patch by Mark Tompsett, adding the option to take a patron's picture using the computer's webcam. The photo can then be saved to the patron's account. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Go to Administration -> System preferences and enable the 'patronimages' preference. - View a patron record. In the sidebar, hover your mouse over the blank patron image. Click the "Edit" button which appears. - A modal window should appear with two sections, "Upload patron photo" and "Take patron photo." - If your computer has a webcam, your browser should ask permission to access it. Grant access. - You should see the view of your webcam shown under the "Take photo" button. - Click the "Take photo" button. The captured photo should be shown in place of the live video from the webcam. - You should now see three buttons: "Retake photo," "Download photo," and "Upload photo." - Clicking "Retake photo" should hide those buttons and return you to a live video view. - Clicking "Download" should make your browser download the image. - Clicking "Upload" should cause the page to redirect back to the patron detail page where you should see the new patron image displayed in the sidebar. - Trigger the modal again and click the "cancel" button. The modal should disappear and camera access should stop. - If your computer has no webcam the modal should appear correctly but there should be a banner at the bottom indicating that a camera is not available. - Try the test again but this time deny your browser access to the webcam. You may need to reset the camera permissions in your browser's settings. When the modal appears you should see a message saying access to the camera is denied. - The patron image edit modal should be available on all pages which show the patron image in the sidebar: Check out, Batch check out, Details, Accounting, Routing lists, Circulation history, Holds history, Modification log, Notices, Statistics, Files, Purchase suggestions, Discharges, Housebound, and ILL requests history. - Test adding an image to a patron record using the "Upload photo" option. It should still work correctly. - If the patron has an image attached, the "Upload photo" section should have a "Delete" button. Test that it works correctly. Signed-off-by: Nicolas Legrand Signed-off-by: Jonathan Druart Signed-off-by: Fridolin Somers --- .../prog/css/src/staff-global.scss | 20 ++ .../prog/en/includes/circ-menu.inc | 6 +- .../prog/en/includes/str/members-menu.inc | 6 +- .../prog/en/modules/members/housebound.tt | 1 - .../modules/members/moremember-patronimage.tt | 83 ++++++++ .../prog/en/modules/members/moremember.tt | 52 ----- .../intranet-tmpl/prog/js/members-menu.js | 39 +++- .../intranet-tmpl/prog/js/patron-webcam.js | 184 ++++++++++++++++++ members/moremember-patronimage.pl | 59 ++++++ tools/picture-upload.pl | 38 +++- 10 files changed, 412 insertions(+), 76 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember-patronimage.tt create mode 100644 koha-tmpl/intranet-tmpl/prog/js/patron-webcam.js create mode 100755 members/moremember-patronimage.pl diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index fbf5200bfe..cd1c0ba2a4 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -4618,6 +4618,26 @@ div .suggestion_note { } } +#camera, #output { + border: 8px solid #EDF4F6; + padding: 1em; +} + +#photo { + display: block; + margin: auto; +} + +#camera-error { + display: none; + flex-direction: row; + flex-wrap: nowrap; + + div { + padding: 0 .5em; + } +} + @media (min-width: 200px) { } diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc index 9b4940b2f3..5bc5fb1082 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc @@ -38,12 +38,12 @@ [% IF ( patron.image ) %] [% patron.firstname | html %] [% patron.surname | html %] ([% patron.cardnumber | html %])
-
Edit
+
Edit
[% ELSE %]
-
Add
+
Add
[% END %] @@ -186,7 +186,7 @@
- +
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/str/members-menu.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/str/members-menu.inc index 777f814f11..530e9bfb89 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/str/members-menu.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/str/members-menu.inc @@ -1,7 +1,11 @@ +[% USE raw %] [% USE scalar %] [% USE Koha %] [% USE Categories %] +[% IF ( Koha.Preference('patronimages') ) %] + [% Asset.js("js/patron-webcam.js") | $raw %] +[% END %]