Bug 6815

Summary: Capture member photo via webcam
Product: Koha Reporter: Savitra Sirohi <savitra.sirohi>
Component: PatronsAssignee: M. Tompsett <mtompset>
Status: ASSIGNED --- QA Contact: Katrin Fischer <katrin.fischer>
Severity: enhancement    
Priority: P5 - low CC: amrutapatil_30, dcook, gmcharlt, indradg, jonathan.druart, josef.moravec, katrin.fischer, kohapatch, lisetteslatah, mtj, mtompset, oleonard, paliotti, severine.queune, tomascohen, veron
Version: master   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Who signed the patch off: Text to go in the release notes:
Version(s) released in:
Attachments: how to take Instead of uploading a file, capture the image directly from a webcam
Readable, but not useable attachment
Bug 6815: Capture picture from web cam
Bug 6815: Add a 'Take Patron Image' ability
Bug 6815: Add a 'Take Patron Image' ability
Bug 6815: Detect Webcam to show or not button
Bug 6815: Add a 'Take Patron Image' ability
Bug 6815: Detect Webcam to show or not button
Move webcam interface into modal

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 M. Tompsett 2014-07-10 15:15:17 UTC Comment hidden (obsolete)
Comment 7 M. 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 M. 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 M. Tompsett 2015-04-26 00:11:56 UTC
Created attachment 38518 [details] [review]
Bug 6815: Capture picture from web cam

This enhancement gives the librarian the ability to capture
a photo from a webcam attached to the Koha server.

It does this by adding a 'Capture' button to the member details
page. This button is only visible if there is likely a webcam.
This is determined by if /dev/video{something} exists.

This also corrects the functionality of the delete button, which
is broken, because borrowernumber and cardnumber got mixed up.

This requires the package streamer be installed:
    $ sudo apt-get install streamer
Additionally, I had to add www-data to the video group.
    $ sudo addgroup www-data video

TEST PLAN
---------
 1) Back up DB.
 2) Have a picture file available for uploading.
 3) Find a particular patron
 4) Upload the picture file on hand.
    -- should work fine.
 5) Delete the patron picture.
    -- fails.
 6) Apply patch.
 7) Delete the patron picture.
    -- success
 8) Upload the patron picture again.
    -- success
 9) Check for Capture button.
    a) plug in it and refresh page
       -- capture button should be there.
    b) unplug it and refresh page
       -- capture button should not be there.
    c) plug it back in and refresh
10) Make a strange face, hold it, and click 'Capture'
    -- a few seconds later the page should refresh
       with your face.
11) Restore DB
12) run koha qa test tools.
Comment 11 M. 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 M. 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 M. 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 M. 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 M. 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 M. 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 M. Tompsett 2019-07-05 01:01:46 UTC Comment hidden (obsolete)
Comment 29 M. Tompsett 2019-07-05 01:10:10 UTC Comment hidden (obsolete)
Comment 30 M. Tompsett 2019-07-05 16:26:07 UTC Comment hidden (obsolete)
Comment 31 M. 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
Created attachment 99015 [details] [review]
Bug 6815: Add a 'Take Patron Image' ability

This does not just click in place, which would be
nice. But it does take the picture, download to a file,
and then let's the user use the existing upload
functionality to add the photo.

If wording or formating is ugly, feel free to tweak.

TEST PLAN
---------
1) the 'patronimages' system preference in Patrons system preferences
   must be set to 'Allow'.
2) apply the patch
3) go to any patron
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.
   -- new tab should open. If you have a working webcam,
      you should see it playing 'live'.
5) click the "Take the Patron's Picture" button
   -- this should download a photo SamplePhoto.jpg or some
      variation of that.
6) close this tab, and click the 'Edit' or 'Add' button for
   the patron image.
7) click 'Choose File' and choose the file that was created
8) click 'Upload'
   -- the webcam photo should now be used.
9) run koha qa test tools

Signed-off-by: Lisette Scheer <lisettes@latahlibrary.org>
Comment 34 Lisette Scheer 2020-02-14 18:46:51 UTC
Created attachment 99016 [details] [review]
Bug 6815: Detect Webcam to show or not button

It's hard to test on a laptop with a webcam built it.
So, please attempt with:
The system preference patronimage set to allow.
And in any given patron detail page, see if the 'Take'
button appears/disappears with a refresh while
plugging and unplugging a webcam.

Signed-off-by: Lisette Scheer <lisettes@latahlibrary.org>
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
Created attachment 99757 [details] [review]
Move webcam interface into modal
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.