Bug 6815 - Capture member photo via webcam
Summary: Capture member photo via webcam
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Patrons (show other bugs)
Version: master
Hardware: All All
: P5 - low new feature (vote)
Assignee: Owen Leonard
QA Contact: Jonathan Druart
URL:
Keywords: release-notes-needed
Depends on:
Blocks: 25980
  Show dependency treegraph
 
Reported: 2011-08-30 09:00 UTC by Savitra Sirohi
Modified: 2022-05-10 08:41 UTC (History)
22 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Medium patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Adds the option to take a photo of the patron via a webcam for patron photos.
Version(s) released in:
22.05.00


Attachments
how to take Instead of uploading a file, capture the image directly from a webcam (33.57 KB, text/plain)
2013-10-31 08:39 UTC, Amruta
Details
Readable, but not useable attachment (29.41 KB, text/plain)
2014-07-10 15:15 UTC, Mark Tompsett
Details
Bug 6815: Capture picture from web cam (6.41 KB, patch)
2015-04-26 00:11 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Add a 'Take Patron Image' ability (8.34 KB, patch)
2019-07-05 01:01 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Add a 'Take Patron Image' ability (8.32 KB, patch)
2019-07-05 01:10 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Detect Webcam to show or not button (2.81 KB, patch)
2019-07-05 16:26 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Add a 'Take Patron Image' ability (8.38 KB, patch)
2020-02-14 18:46 UTC, Lisette Scheer
Details | Diff | Splinter Review
Bug 6815: Detect Webcam to show or not button (2.87 KB, patch)
2020-02-14 18:46 UTC, Lisette Scheer
Details | Diff | Splinter Review
Move webcam interface into modal (16.11 KB, patch)
2020-02-28 14:05 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 6815: Actually push the taken picture to the DB (5.66 KB, patch)
2020-07-10 18:23 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Turn off the webcam when done (2.42 KB, patch)
2020-07-10 19:12 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Ugly reload, but it works (916 bytes, patch)
2020-07-10 19:17 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Attempt to detect webcam differently (1.93 KB, patch)
2020-07-11 04:50 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Simplify code, add msGetUserMedia case (2.77 KB, patch)
2020-07-11 12:40 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Attempt to get web cam working on sandbox (4.28 KB, patch)
2020-07-11 13:30 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Add a 'Take Patron Image' ability (8.38 KB, patch)
2020-07-12 00:34 UTC, Christopher Brannon
Details | Diff | Splinter Review
Bug 6815: Detect Webcam to show or not button (2.87 KB, patch)
2020-07-12 00:34 UTC, Christopher Brannon
Details | Diff | Splinter Review
Move webcam interface into modal (16.10 KB, patch)
2020-07-12 00:34 UTC, Christopher Brannon
Details | Diff | Splinter Review
Bug 6815: Actually push the taken picture to the DB (5.66 KB, patch)
2020-07-12 00:34 UTC, Christopher Brannon
Details | Diff | Splinter Review
Bug 6815: Turn off the webcam when done (2.42 KB, patch)
2020-07-12 00:34 UTC, Christopher Brannon
Details | Diff | Splinter Review
Bug 6815: Ugly reload, but it works (916 bytes, patch)
2020-07-12 00:34 UTC, Christopher Brannon
Details | Diff | Splinter Review
Bug 6815: Attempt to detect webcam differently (1.93 KB, patch)
2020-07-12 00:34 UTC, Christopher Brannon
Details | Diff | Splinter Review
Bug 6815: Simplify code, add msGetUserMedia case (2.77 KB, patch)
2020-07-12 00:35 UTC, Christopher Brannon
Details | Diff | Splinter Review
Bug 6815: Attempt to get web cam working on sandbox (4.28 KB, patch)
2020-07-12 00:35 UTC, Christopher Brannon
Details | Diff | Splinter Review
Bug 6815: Add a 'Take Patron Image' ability (8.44 KB, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 6815: Detect Webcam to show or not button (2.93 KB, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Move webcam interface into modal (16.16 KB, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 6815: Actually push the taken picture to the DB (5.72 KB, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 6815: Turn off the webcam when done (2.48 KB, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 6815: Ugly reload, but it works (977 bytes, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 6815: Attempt to detect webcam differently (1.99 KB, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 6815: Simplify code, add msGetUserMedia case (2.83 KB, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 6815: Attempt to get web cam working on sandbox (4.34 KB, patch)
2020-07-12 01:09 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 6815: Take a patron's picture (23.12 KB, patch)
2020-07-15 20:02 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Attempt to get sandbox to work (8.00 KB, patch)
2020-07-15 20:31 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Attempt again to make it work in sandbox (3.42 KB, patch)
2020-07-15 20:52 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 6815: Capture member photo via webcam (32.64 KB, patch)
2022-03-01 01:06 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 6815: Capture member photo via webcam (32.70 KB, patch)
2022-03-10 12:46 UTC, Nicolas Legrand
Details | Diff | Splinter Review
Bug 6815: Display an error in if HTTPS not used and webcam unavailable (2.31 KB, patch)
2022-03-21 16:04 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 6815: Don't make an AJAX request to generate the modal (148.40 KB, patch)
2022-03-21 16:27 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 6815: Don't make an AJAX request to generate the modal (16.33 KB, patch)
2022-03-21 16:29 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 6815: Capture member photo via webcam (32.79 KB, patch)
2022-03-22 10:13 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 6815: Display an error in if HTTPS not used and webcam unavailable (2.38 KB, patch)
2022-03-22 10:13 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 6815: Don't make an AJAX request to generate the modal (16.40 KB, patch)
2022-03-22 10:13 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Savitra Sirohi 2011-08-30 09:00:10 UTC
Instead of uploading a file, capture the image directly from a webcam
Comment 1 Savitra Sirohi 2011-08-30 09:00:40 UTC
A sys pref to turn the feature on or off.
Comment 2 Amruta 2013-10-31 08:39:04 UTC Comment hidden (obsolete)
Comment 3 Pablo López Liotti 2014-03-28 13:10:43 UTC
In that state of development is this ?
I am searching for some solution to bring Koha a patrons capture image capability.

Anybody is using this or anything other way?

Thanks.
Comment 4 Owen Leonard 2014-03-28 14:50:22 UTC
I don't know if the attached patch is functional in any way--it was attached as a .docx Word document, which doesn't make any kind of sense. The "patch" looks like it was made against an older version of Koha, so even if you could pull out the changes you'd have to re-implement the solution.

Anyway, the offered solution relies on a Flash file, and there's no way a Flash dependency is going to get into Koha. Perhaps it would work as a local customization.
Comment 5 Tomás Cohen Arazi 2014-07-10 14:48:29 UTC
Comment on attachment 22623 [details]
how to take Instead of uploading a file, capture the image directly from a webcam

As said before, the attached file is not a patch or usable. Obsoleted then
Comment 6 Mark Tompsett 2014-07-10 15:15:17 UTC Comment hidden (obsolete)
Comment 7 Mark Tompsett 2014-07-10 15:17:07 UTC
Comment on attachment 29613 [details]
Readable, but not useable attachment

I'm pretty sure it won't apply, even if I tried to make it a nice patch. Don't like the proprietary requirement either.
Comment 8 Mark Tompsett 2014-07-10 16:02:11 UTC
This was likely against 3.10.x or earlier.
Comment 9 Owen Leonard 2014-07-10 16:09:04 UTC
(In reply to M. Tompsett from comment #8)
> This was likely against 3.10.x or earlier.

tcohen has re-assigned this bug to himself because he is working on a new version.
Comment 10 Mark Tompsett 2015-04-26 00:11:56 UTC Comment hidden (obsolete)
Comment 11 Mark Tompsett 2015-04-26 00:38:19 UTC
Though we probably want something more client-side like:
http://jsfiddle.net/attuts/svcf41o6/2/
Comment 12 Marc Véron 2015-04-27 06:34:36 UTC
Sorry, could not test patch (no access to webcam with my server / vm)

Tested code on jsfiddle.net with a client - works. I would prefer a client side solution.
Comment 13 Josef Moravec 2015-05-25 20:46:08 UTC
The client side capturing does make much more sense to me. I've tested the jsfiddle code and it works like a charm, I think it's the way how it could work.
Comment 14 Mark Tompsett 2015-05-25 20:50:12 UTC
(In reply to Josef Moravec from comment #13)
> The client side capturing does make much more sense to me. I've tested the
> jsfiddle code and it works like a charm, I think it's the way how it could
> work.

Did you test with Internet Explorer?
What about Firefox, Opera, Safari, Chrome, and Chromium?
jsfiddle code does not work for all of them, last I checked. It failed for IE, if I recall.
Comment 15 Josef Moravec 2015-05-26 05:38:42 UTC
I tested it in Opera, Chromium and Firefox. 
According to this page, it doesn't work in Safari and IE, but it will work in Microsoft's new browser Edge:
http://caniuse.com/#search=getUserMedia

There are some polyfills available, based on flash:
https://github.com/addyosmani/getUserMedia.js
https://github.com/jhuckaby/webcamjs

There is also an plugin for IE and Safari, which implements WebRTC:
https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins/
Comment 16 Mark Tompsett 2015-05-26 12:39:40 UTC
(In reply to Josef Moravec from comment #15)
[SNIP]
> There are some polyfills available, based on flash:

You said the word of evil: flash. This is one of the things attempted to be avoided. I'm pretty sure it is license related.


[SNIP]
> There is also an plugin for IE and Safari, which implements WebRTC:
> https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins/

Nice. So, is there a way to mix this with something using getUserMedia? I think that would be palatable.
Comment 17 Josef Moravec 2015-05-26 15:06:54 UTC
(In reply to M. Tompsett from comment #16)
> (In reply to Josef Moravec from comment #15)
> [SNIP]
> > There are some polyfills available, based on flash:
> 
> You said the word of evil: flash. This is one of the things attempted to be
> avoided. I'm pretty sure it is license related.

I agree that flash s evil, I've just tried to find "something" :)
 
> [SNIP]
> > There is also an plugin for IE and Safari, which implements WebRTC:
> > https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins/
> 
> Nice. So, is there a way to mix this with something using getUserMedia? I
> think that would be palatable.

I've tried that plugin and edit the jsfiddle and use Adapter.js, which kind of polyfill for webrtc accross browsers and the plugin:
http://jsfiddle.net/6azxcg0j/1/

but it can't access to the plugin (in browsers, which has support to getUserMedia it works good), but the demo site for webrtc plugin does work in IE 11 with plugin... so I think there is an error in my code ;)

https://plugin.temasys.com.sg/

However, it looks as a viable way I think...
Comment 18 Josef Moravec 2015-05-26 15:17:46 UTC
Even if I copy-pasted the code from webrtc plugin demo page, it doesn't work in jsfiddle, so I suppose problem with accessing ActiveX plugins in jsfiddle...
Comment 19 Katrin Fischer 2015-07-09 02:40:21 UTC
Comment on attachment 38518 [details] [review]
Bug 6815: Capture picture from web cam

Review of attachment 38518 [details] [review]:
-----------------------------------------------------------------

I have to say I am in favour of a client side solution and we are not supporting IE for the staff client officially. I think for a feature that is not a core functionality it would be ok for me if it was limited to Firefox/Chromium.

::: koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt
@@ +271,5 @@
>                      </li>
>                  </ol>
>                  <fieldset class="action">
> +                    <input type="submit" name="op" id="op" value="Upload" class="submit btn" />&nbsp;&nbsp;&nbsp;&nbsp;
> +                    [% IF ( webcam ) %]<input type="submit" name="op" id="op" value="Capture" class="submit btn" />&nbsp;&nbsp;&nbsp;&nbsp;[% END %]

Using multiple &nbsp; for styling is no good style - this should be done using CSS.
Comment 21 Mark Tompsett 2016-05-19 19:47:30 UTC
(In reply to Tomás Cohen Arazi from comment #20)
> Just saying:
> https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/
> Taking_still_photos

Just saying: doesn't work for me.
Comment 22 Mark Tompsett 2016-05-19 19:48:26 UTC
(In reply to M. Tompsett from comment #21)
> (In reply to Tomás Cohen Arazi from comment #20)
> > Just saying:
> > https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/
> > Taking_still_photos
> 
> Just saying: doesn't work for me.

-- google chrome, though. Koha should not be browser specific.
Comment 23 Katrin Fischer 2016-05-19 20:27:36 UTC
https://webrtc.org/ ?
Comment 24 Mark Tompsett 2016-05-19 20:44:07 UTC
(In reply to Katrin Fischer from comment #23)
> https://webrtc.org/ ?

I tried clicking through some link off what Tomas posted. There... it does work for Chrome is this example I found clicking through there.

However, note the lack of love for IE or Edge. My browser agnosticism point is still valid. Granted, I think I've stumbled onto something that says it may be possible to trick Edge into experimentally working for it. But I don't wish to devote time to researching that.
Comment 25 Katrin Fischer 2016-05-19 20:47:43 UTC
I think I disagree about this having to work in any and every browser. It's a feature not a lot of libraries will need - and we don't recommend using IE or Edge with Koha.
Comment 26 Tomás Cohen Arazi 2016-05-20 03:24:16 UTC
(In reply to Katrin Fischer from comment #25)
> I think I disagree about this having to work in any and every browser. It's
> a feature not a lot of libraries will need - and we don't recommend using IE
> or Edge with Koha.

I think having an implmentation on top of which interested parties could work to support more browsers is better than nothing.
Comment 27 Tomás Cohen Arazi 2016-05-20 03:26:07 UTC
(In reply to Tomás Cohen Arazi from comment #26)
> (In reply to Katrin Fischer from comment #25)
> > I think I disagree about this having to work in any and every browser. It's
> > a feature not a lot of libraries will need - and we don't recommend using IE
> > or Edge with Koha.
> 
> I think having an implmentation on top of which interested parties could
> work to support more browsers is better than nothing.

Also, I found this exmaple to work in both Chrome and Firefox:

https://davidwalsh.name/demo/camera.php

It can be done!
Comment 28 Mark Tompsett 2019-07-05 01:01:46 UTC Comment hidden (obsolete)
Comment 29 Mark Tompsett 2019-07-05 01:10:10 UTC Comment hidden (obsolete)
Comment 30 Mark Tompsett 2019-07-05 16:26:07 UTC Comment hidden (obsolete)
Comment 31 Mark Tompsett 2019-07-05 21:35:24 UTC
(In reply to M. Tompsett from comment #30)
> Created attachment 91335 [details] [review] [review]
> Bug 6815: Detect Webcam to show or not button
> 
> It's hard to test on a laptop with a webcam built it.

sudo apt install v4l-utils
sudo modprobe -r uvcvideo # removes
sudo v4l2-ctl --list-devices
sudo modprobe uvcvideo # re-adds
sudo v4l2-ctl --list-devices

Tested with:
- Chrome Version 75.0.3770.100 (Official Build) (64-bit)
- FireFox Quantum 67.0.4 (64-bit)
- Chromium Version 75.0.3770.90 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
- Opera Version:62.0.3331.43

They all worked! YAY! I was testing on Ubuntu 18.04.2 LTS with the default desktop manager, which I believe is Gnome.
Comment 32 Séverine Queune 2019-09-30 13:44:20 UTC
Tested with Firefox (69.0.1) & Chrome(77.0.3865.90).
Taking picture is correct, but when I disable my camera (integrated to my laptop), I still have the "Take" button.
It probably comes from my computer (I must have missed something when disabling the camera), but I prefer not sign it and let someone else try to check that point.
Comment 33 Lisette Scheer 2020-02-14 18:46:11 UTC Comment hidden (obsolete)
Comment 34 Lisette Scheer 2020-02-14 18:46:51 UTC Comment hidden (obsolete)
Comment 35 Katrin Fischer 2020-02-18 23:05:33 UTC
QA tools pass without problems. Some smaller issues:

1) Capitalization

<title>Koha Patron Image Via Webcam</title>
<h1>Koha Patron Image Taker</h1>

... that's it so far :)
Comment 36 Katrin Fischer 2020-02-18 23:38:25 UTC
>4) click the 'Take' button.
>   -- it is in the text area on the right, and not the
>      hover over the image area. Adding here would require
>      CSS changes, which are now difficult and ugly to do.

Don't agree about this and don't feel it should be in a commit message and then in git... if you want to raise an issue, there are better ways.

In general I think the page to take pictures needs some more work, it's quite a raw HTML page currently and doesn't fit well into Koha as is.
Comment 37 Owen Leonard 2020-02-20 15:06:21 UTC
I've done some follow-up work on this and will hopefully be able to get back to it soon.
Comment 38 Owen Leonard 2020-02-28 14:05:51 UTC Comment hidden (obsolete)
Comment 39 Owen Leonard 2020-02-28 14:12:25 UTC
I've attached a new follow-up so that I might get some feedback. This is working pretty well from the patron detail page. Test with a webcam-capable device.

I think it's not ideal that the user is required to save the image to the local machine and then upload it. We already have picture-upload.pl so it seems logical that we should be able to submit the data directly. I've found write-ups of accomplishing this in PHP, for instance:

https://www.geeksforgeeks.org/how-to-save-an-html-5-canvas-as-an-image-on-the-server/

There is some AJAX in patron-webcam.js which mocks this process but I'm not sure yet how to finish it. If anyone is interested in this feature I'd love to get your opinion. I think it would be really nice to be able to push this feature with the automatic-save built in.
Comment 40 Jonathan Druart 2020-03-03 09:19:12 UTC
It does not work for me/my webcam:
* Firefox:
I see "Take", but then the modal displays with "No permission to use camera" in an alert. If I close it, I see the "Take the patron's picture" button in the modal, but it generates a black picture.

* Chromium: No "Take"


The browsers does not ask me if I want to allow the webcam for this page.

The webcam seems to work with cheese and hangout.
Comment 41 Mark Tompsett 2020-07-08 01:46:48 UTC
(In reply to Jonathan Druart from comment #40)
> It does not work for me/my webcam:
> * Firefox:
> I see "Take", but then the modal displays with "No permission to use camera"
> in an alert. If I close it, I see the "Take the patron's picture" button in
> the modal, but it generates a black picture.
> 
> * Chromium: No "Take"
> 
> 
> The browsers does not ask me if I want to allow the webcam for this page.
> 
> The webcam seems to work with cheese and hangout.

Greetings.

I ran in Chrome (Version 83.0.4103.116 (Official Build) (64-bit) on Ubuntu 20.04 LTS vagrant up'd to stretch and accessed by localhost:8081), and it worked just fine.
I then run in Chromium (Version 81.0.4044.138 (Official Build) Built on Ubuntu , running on Ubuntu 20.04 (64-bit) same localhost:8081), without closing the Chrome, and it gave me the error you got in Firefox. Once I closed Chrome, and retried in Chromium, it worked.

It worked for me in Opera (69.0.3686.49) too.

I even tried firefox (78.0.1 (64-bit)). And while it was much noisier (Are you sure you want permissions for this? Really? What about this?), it worked for me too.

Did you have cheese and hangout open when you tested this? I think there may be some "Give me exclusive control!" type issues between the various programs.
Comment 42 Mark Tompsett 2020-07-08 03:10:38 UTC
I see the attempt to javascript the picture up, but it is failing, because the click() hijacks and returns, never to run the ajaxiness. I have an idea... perhaps I'll play with it a bit this week. It would be nice to solve a 4 digit bugzilla. Sorry I have been distracted with other projects lately. :)
Comment 43 Mark Tompsett 2020-07-10 18:23:47 UTC Comment hidden (obsolete)
Comment 44 Mark Tompsett 2020-07-10 19:12:24 UTC Comment hidden (obsolete)
Comment 45 Mark Tompsett 2020-07-10 19:17:19 UTC Comment hidden (obsolete)
Comment 46 Mark Tompsett 2020-07-10 19:22:52 UTC
TEST PLAN
------------
Start up your koha
choose a patron entry for yourself (assuming you are adminish)
click the take button
pose
click the take picture button
after a short reload, it should be the pose you had and the webcam should be off.

You want to retake, click the take button again. The notion of keep, retake is an extra step that is beyond the scope of THIS bug.
Comment 47 Christopher Brannon 2020-07-10 21:37:22 UTC
Not detecting camera.  Even when I force the button to show, nothing is showing when the window comes up.  May need more work.

I also am not a big fan of how to get to this function.  I think it needs to have a button option in the window where you click Add on the photo.  So you have the option to upload or take a photo.

I would also not bother with the logic to detect the camera with the button.  Just have the button, and if the camera is detected, you see an image.  Keep it simple.
Comment 48 Mark Tompsett 2020-07-11 04:26:44 UTC
(In reply to Christopher Brannon from comment #47)
> Not detecting camera.  Even when I force the button to show, nothing is
> showing when the window comes up.  May need more work.

*sigh* I can confirm that is doesn't work when running from a ByWater's sandbox, but it does work just fine locally.

Not sure what to make of it. Open to suggestions.
Comment 49 Mark Tompsett 2020-07-11 04:50:14 UTC Comment hidden (obsolete)
Comment 50 Mark Tompsett 2020-07-11 04:59:56 UTC
(In reply to M. Tompsett from comment #49)
> Created attachment 106777 [details] [review] [review]
> Bug 6815: Attempt to detect webcam differently

Success in the sandbox. And as far as I can tell navigator is still valid javascript code. Still have to fix the canvas portion of it, but that should be do-able.
Comment 51 Mark Tompsett 2020-07-11 12:40:17 UTC Comment hidden (obsolete)
Comment 52 Mark Tompsett 2020-07-11 13:30:31 UTC Comment hidden (obsolete)
Comment 53 Christopher Brannon 2020-07-11 17:13:15 UTC
I can confirm the button is showing now.  Now if the actual image would show, we're in business.

I would still encourage you to remove the take button from the detail screen and add it the Add window (same window where the browse and upload buttons are.  That way it is accessible from details or circulation through the add button, and you centralize it and don't have to worry about were to go to get to it.
Comment 54 Christopher Brannon 2020-07-12 00:34:29 UTC Comment hidden (obsolete)
Comment 55 Christopher Brannon 2020-07-12 00:34:35 UTC Comment hidden (obsolete)
Comment 56 Christopher Brannon 2020-07-12 00:34:39 UTC Comment hidden (obsolete)
Comment 57 Christopher Brannon 2020-07-12 00:34:44 UTC Comment hidden (obsolete)
Comment 58 Christopher Brannon 2020-07-12 00:34:48 UTC Comment hidden (obsolete)
Comment 59 Christopher Brannon 2020-07-12 00:34:52 UTC Comment hidden (obsolete)
Comment 60 Christopher Brannon 2020-07-12 00:34:57 UTC Comment hidden (obsolete)
Comment 61 Christopher Brannon 2020-07-12 00:35:01 UTC Comment hidden (obsolete)
Comment 62 Christopher Brannon 2020-07-12 00:35:05 UTC Comment hidden (obsolete)
Comment 63 Christopher Brannon 2020-07-12 01:04:05 UTC
Sorry, tried to sign off on this bug, but it's not working.  Getting a bunch of HTML and status=200.
Comment 64 ByWater Sandboxes 2020-07-12 01:09:10 UTC Comment hidden (obsolete)
Comment 65 ByWater Sandboxes 2020-07-12 01:09:13 UTC Comment hidden (obsolete)
Comment 66 ByWater Sandboxes 2020-07-12 01:09:17 UTC Comment hidden (obsolete)
Comment 67 ByWater Sandboxes 2020-07-12 01:09:21 UTC Comment hidden (obsolete)
Comment 68 ByWater Sandboxes 2020-07-12 01:09:24 UTC Comment hidden (obsolete)
Comment 69 ByWater Sandboxes 2020-07-12 01:09:28 UTC Comment hidden (obsolete)
Comment 70 ByWater Sandboxes 2020-07-12 01:09:32 UTC Comment hidden (obsolete)
Comment 71 ByWater Sandboxes 2020-07-12 01:09:35 UTC Comment hidden (obsolete)
Comment 72 ByWater Sandboxes 2020-07-12 01:09:39 UTC Comment hidden (obsolete)
Comment 73 Christopher Brannon 2020-07-12 01:13:08 UTC
Couldn't sign of in devbox, so I signed off on sandbox.  Doesn't work in sandbox, but worked in devbox.  I am signing off as it works as described, but I would like to encourage that the button be placed in the exiting modal for browsing and uploading.  Otherwise, it works!
Comment 74 Mark Tompsett 2020-07-15 20:02:16 UTC
Okay... here is an alternative patch... I'll temporarily obsolete the other 9.
Comment 75 Mark Tompsett 2020-07-15 20:02:49 UTC
Created attachment 106938 [details] [review]
Bug 6815: Take a patron's picture

- Remove Manage Image Patron
  (everything done via picture clicks)
- Break out the modal to its own pl/tt pair
- tweak member-menu.js
- tweak tools/picture-upload.pl

Clicking Add/Edit button on the patron
picture should give the user the ability
to either upload a file, or take a patron's
picture.

The camera can be turned on/off.
Turn it on, take until the picture on the right
looks good.
Click keep.
Profile picture should be refreshed
Comment 76 Mark Tompsett 2020-07-15 20:31:30 UTC
Created attachment 106939 [details] [review]
Bug 6815: Attempt to get sandbox to work
Comment 77 Mark Tompsett 2020-07-15 20:52:46 UTC
Created attachment 106940 [details] [review]
Bug 6815: Attempt again to make it work in sandbox
Comment 78 Mark Tompsett 2020-07-16 18:25:34 UTC
I'm sticking with this newer version. Tested on my phone, after fighting the networking. The problem is the sandbox still doesn't work. And perhaps people might want the details tab manage patron image back.
Comment 79 Owen Leonard 2020-07-16 20:29:36 UTC
I see errors in the console when using a computer without a webcam. Can there be some feature-detection to prevent this?
Comment 80 Mark Tompsett 2020-07-25 04:16:27 UTC
No time to take this on again. Whoever wishes to try. Go ahead. Reset to default assignee.
Comment 81 Christopher Brannon 2020-08-17 22:01:57 UTC
Would love to see someone pick this up and complete it.  So close!  And it would make using patron pictures so much easier to use with front line staff!
Comment 82 Owen Leonard 2022-03-01 01:06:11 UTC
Created attachment 131174 [details] [review]
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.
Comment 83 Nicolas Legrand 2022-03-10 12:46:31 UTC
Created attachment 131554 [details] [review]
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 <nicolas.legrand@bulac.fr>
Comment 84 Nicolas Legrand 2022-03-10 12:49:54 UTC
Thank you Owen it's great!
Comment 85 Nicolas Legrand 2022-03-10 13:44:55 UTC
Frido, any chance you merge this in 20.11?
Comment 86 Fridolin Somers 2022-03-10 21:58:06 UTC
(In reply to Nicolas Legrand from comment #85)
> Frido, any chance you merge this in 20.11?

Oh but it is not yet QA.
Then push master, then backport to older versions.
Victor Grousset is actual maintainer of 20.11.
In my opinion such a big patch is dangerous for an old stable version, we may only propose backport on 21.11.

Best regards,
Comment 87 Nicolas Legrand 2022-03-11 10:39:15 UTC
(In reply to Fridolin Somers from comment #86)
> (In reply to Nicolas Legrand from comment #85)
> > Frido, any chance you merge this in 20.11?
> 
> Oh but it is not yet QA.
> Then push master, then backport to older versions.
> Victor Grousset is actual maintainer of 20.11.
> In my opinion such a big patch is dangerous for an old stable version, we
> may only propose backport on 21.11.

Oups sorry, I thought you were maintainer of 20.11. Anyhow thank you for your input, I needed to know the feasibility of this and now I can answer my colleagues who deeply want this patch to stop dreaming :D.
Comment 88 Jonathan Druart 2022-03-21 15:51:48 UTC
It does not work for me, the browser does not ask for permission.

I am getting the following error in the console after I clicked on "Add": Uncaught TypeError: navigator.mediaDevices is undefined
Comment 89 Jonathan Druart 2022-03-21 15:53:18 UTC
(In reply to Jonathan Druart from comment #88)
> It does not work for me, the browser does not ask for permission.
> 
> I am getting the following error in the console after I clicked on "Add":
> Uncaught TypeError: navigator.mediaDevices is undefined

This was the Firefox error.

And here is the chromium error: Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')
Comment 90 Jonathan Druart 2022-03-21 15:55:20 UTC
From https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
"""
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
"""

Ok, makes sense.
Comment 91 Jonathan Druart 2022-03-21 16:04:43 UTC
Created attachment 131985 [details] [review]
Bug 6815: Display an error in if HTTPS not used and webcam unavailable
Comment 92 Jonathan Druart 2022-03-21 16:18:57 UTC
There is something completely wrong. The new pl and tt are useless, we just want to display a modal, we don't need an AJAX request. I am working on it.
Comment 93 Jonathan Druart 2022-03-21 16:27:21 UTC
Created attachment 131987 [details] [review]
Bug 6815: Don't make an AJAX request to generate the modal

moremember-patronimage.pl|tt were not needed.
Comment 94 Jonathan Druart 2022-03-21 16:29:32 UTC
Created attachment 131988 [details] [review]
Bug 6815: Don't make an AJAX request to generate the modal

moremember-patronimage.pl|tt were not needed.
Comment 95 Jonathan Druart 2022-03-21 16:32:39 UTC
Can I get a signoff on those 2 patches please?
Comment 96 Nicolas Legrand 2022-03-22 09:50:42 UTC
(In reply to Jonathan Druart from comment #91)
> Created attachment 131985 [details] [review] [review]
> Bug 6815: Display an error in if HTTPS not used and webcam unavailable

Thank you Jonathan.

About HTTPS: I'm with HTTP in docker and not seeing any error while the cam is available. Is it what is expected?

When I block the camera, I have an error message saying it's blocked, which is nice. Then I authorize the page to use the camera, but I'm sticked with the same error message, I have to reload the page to be able to use the cam. Which is not very nice.

Everything else seems to work nicely.
Comment 97 Jonathan Druart 2022-03-22 10:10:44 UTC
(In reply to Nicolas Legrand from comment #96)
> (In reply to Jonathan Druart from comment #91)
> > Created attachment 131985 [details] [review] [review] [review]
> > Bug 6815: Display an error in if HTTPS not used and webcam unavailable
> 
> Thank you Jonathan.
> 
> About HTTPS: I'm with HTTP in docker and not seeing any error while the cam
> is available. Is it what is expected?

It's not supposed to work at all under HTTP. But not all browsers block it apparently.

> When I block the camera, I have an error message saying it's blocked, which
> is nice. Then I authorize the page to use the camera, but I'm sticked with
> the same error message, I have to reload the page to be able to use the cam.
> Which is not very nice.

Not caused by my follow-ups. Could be improved later if possible and needed.

> Everything else seems to work nicely.

Thanks!
Comment 98 Jonathan Druart 2022-03-22 10:13:43 UTC
Created attachment 131999 [details] [review]
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 <nicolas.legrand@bulac.fr>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 99 Jonathan Druart 2022-03-22 10:13:50 UTC
Created attachment 132000 [details] [review]
Bug 6815: Display an error in if HTTPS not used and webcam unavailable

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 100 Jonathan Druart 2022-03-22 10:13:56 UTC
Created attachment 132001 [details] [review]
Bug 6815: Don't make an AJAX request to generate the modal

moremember-patronimage.pl|tt were not needed.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 101 Fridolin Somers 2022-03-25 00:24:47 UTC
Pushed to master for 22.05, thanks to everybody involved 🦄
Comment 102 Katrin Fischer 2022-03-26 20:12:47 UTC
Bit early to be thinking of release notes.. but might make a nice highlight as "new feature"? :)