How I fixed 'Take Image' from WebCam in partkeepr v1.4.0

[AGG]

I had hard time to enter over 1000 parts, creating a picture with my phone, transfer the file and upload it for each part. Useless to say the functionality 'Take Image' was not working at all (white screen, 0 byte file, no asking for webcam permissions at all). I didn't find ready solution for this issue and started to investigate what can be the problem. I found all js components and snippets to be working well if I'm using the online demo on https web site but I have the same problem when I transfer the same code to my http partkeepr installation. So, first fix was to change the nginx web server from http to https as explained here:

https://www.digitalocean.com/community/tutorials/how-to-create-a-self-signed-ssl-certificate-for-nginx-in-ubuntu-16-04

Now all browsers asked for camera permission but that was not enough. I still had white screen. I had to modify web/js/compiled/main2.js:

line 14974: this.video.src = window.URL.createObjectURL(stream);

which was giving me error: "Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched..."

to:

this.video.srcObject = stream;

this.video.play();

Now everything is working great with all my browsers Opera, Chrome and FireFox. 

Hope that can help to someone else trying to make working this great functionality.

[AGG]

In fact, this was fast fix of the compiled folder to see if it is working and it will not work after executing the next setup which will update this code from the sources. So, the right place should be line 52 of the file:

src/PartKeepr/FrontendBundle/Resources/public/js/Components/Widgets/WebcamPanel.js

[Christian Wolf]

Hello,

Am Dienstag, 29. September 2020, 13:10:27 CEST schrieb AGG:
> In fact, this was fast fix of the compiled folder to see if it is working
> and it will not work after executing the next setup which will update this
> code from the sources. So, the right place should be line 52 of the file:
> src/PartKeepr/FrontendBundle/Resources/public/js/Components/Widgets/WebcamPa
> nel.js

this seems to be a trivial change. DO you want to file a pull request on github
yourself?

Otherwise I'd put it there if you do not mind.

Christian

[Christian Wolf]

Hello,

Am Dienstag, 29. September 2020, 00:42:45 CEST schrieb AGG:
> I had hard time to enter over 1000 parts, creating a picture with my phone,
> transfer the file and upload it for each part. Useless to say the
> functionality 'Take Image' was not working at all (white screen, 0 byte
> file, no asking for webcam permissions at all). I didn't find ready
> solution for this issue and started to investigate what can be the problem.
> I found all js components and snippets to be working well if I'm using the
> online demo on https web site but I have the same problem when I transfer
> the same code to my http partkeepr installation. So, first fix was to
> change the nginx web server from http to https as explained here:
> https://www.digitalocean.com/community/tutorials/how-to-create-a-self-signed

> -ssl-certificate-for-nginx-in-ubuntu-16-04 Now all browsers asked for camera

> permission but that was not enough.

The thing is this is a browser security thing. Only encrypted connections are
allowed by recent browser to access user hardware like webcam, microphone or
location as far as I know. So your browser protected you from yourself here.

Just FYI

Christian

[AGG]

Please do whatever is needed to be done about this issue. I'm not that deep inside this stuff. Thanks!

[AGG]

I provided a link of a tutorial how to change the nginx from http to https but with the setup provided there are another issues when using the APIs. Just remove all added elements to the header in the snippet ssl-params.conf and it will work.

Another improvement should be to add a slider next to take picture button. Most of the cameras have high resolution and it is not suitable for large number of part images when we do often full backups.

Something like this will do the job (the same image uploaded from 1:1 to 10:1 result as different file sizes):

I will prepare a github repo with the changes needed for all my improvements in case someone is interested.

[Seinan Khan]

where did u link the tutorial?