Web client HTML5/CSS Javascript to take apicture in a web application

I am writing a Windows web application using HTML5 & CSS and java-script. I wish for the web page to respond to a button click by operating the camera on the device displaying the web page so as to autofocus and take a picture image (in jpeg format) and return the image to the server in a Get or Post web action.
I am using Embarcadero C++ builder XE10.2 to develop the application.

The device viewing the web page is an Android mobile device which is using the chrome web browser. The image returned to the web application will be subjected to optical barcode recognition and the web application will respond according to the barcode that has been decoded;

I am seeking any relevant example code or references to appropriate tutorials. I don't need any assistance with decoding the barcode image, I do need help in acquiring the image from the mobile device's camera via the web page being displayed.
LVL 2
Roger AlcindorAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
If it's à web application, your server send the informations on the page. Why not reading/getting from there ?
0
Roger AlcindorAuthor Commented:
Because the camera is on a mobile device which is a client to the web application. the web application is running on a different machine in a different location and is acting as a web server.
0
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
I'd start by scripting this.

Use Powershell or Cygwin + bash.

Start with scripting + when you figure out all the idiosyncrasies, then convert this to code.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

leakim971PluritechnicianCommented:
OK, so why not capturing with :
<input type="file" accept="image/*;capture=camera">

so you can save the picture to server with a <form />
0
Roger AlcindorAuthor Commented:
Hello leakim971,
Thanks for your comment. I'm almost there.
my HTML code is shown below. The  mobile device displays a message Choose file No file chosen.
Then I tap the "Choose file" and am prompted to choose an action (Camera, Camcorder or documents).
I choose Camera and the camera is switched on and the camera image is displayed.
I then tap the camera Icon to take a photo  and a prompt appears for either OK or Retry.
I tap the OK option and a filename ending in .jpg is shown  but no "post" action is performed.
How do I get the "post" action to be performed ?

<div id="div1">
	<form name="scanner" action="" method="post">
	<label style ="margin-top:0px; font-size:50px;"for="barcodescan">Scan Barcode</label>
		<input name="picture" type="file" id="barcodescan" accept="image/*;capture=camera">
	</form>
</div>

Open in new window


Thanks,

Roger
0
leakim971PluritechnicianCommented:
Try this :
<div id="div1">
	<form name="scanner" id="scannerForm"  action="" method="post">
	<label style ="margin-top:0px; font-size:50px;"for="barcodescan">Scan Barcode</label>
		<input name="picture" type="file" id="barcodescan" accept="image/*;capture=camera">
	</form>
</div>
<script>
    document.getElementById("barcodescan").onchange = function() {
          if( this.files.length != 0 ) {
                 document.getElementById("scannerForm").submit();
          }
          else {
                alert("no barcode picked, please try again!");
          }
    }
</script>

Open in new window

1
Roger AlcindorAuthor Commented:
Excellent ! thanks very much for your help, it's really appreciated.
One last thing if you don't mind ? What gets posted is the name of the file, for example "picture=1512227382900-1699657311.jpg"
How do I get the contents of the file (the jpeg file) to be posted instead ?
0
leakim971PluritechnicianCommented:
what is server side language ? the file content is posted too, you just need to figure how to get it
0
Roger AlcindorAuthor Commented:
I attach a Wire-shark capture of the TCP traffic from the remote device (IP address 192.168.1.89) to the server application (192.168.1.77) after the photo has been taken and the OK area has been tapped.
The POST package is evident but the size is nowhere near the size of a high resolution jpeg file and inspecting the Wire-shark data shows plain English text. I would say that the Jpeg image data is not being sent ?
C--Users-roger-Downloads-Screenshots.JPG
0
leakim971PluritechnicianCommented:
add this to your form tag : enctype="multipart/form-data"

replace :
<form name="scanner" id="scannerForm"  action="/webtest" method="post">
by :
<form name="scanner" id="scannerForm"  action="/webtest" method="post" enctype="multipart/form-data">
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Roger AlcindorAuthor Commented:
That did the trick. Many thanks again.
the language of the web application is C++ with which I am quite proficient. I just have to manipulate the raw data (jpeg image) in the rest of the application.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.