Getting photos from android-smartphone right in html form
Hello!
There was a task for the online store to photograph a large number of goods. The specificity of the product is such that a beautiful picture is not so important as the design features of the product (on which side is the cable, are there fastening loops, etc.)
')
Photographing with an ordinary camera, then uploading a photo to a computer, searching for each item in the admin panel, then searching for the corresponding photo, seemed very long. It is much easier to open the goods in the admin panel and direct the phone to the goods. Moreover, with well-exposed lighting, modern smartphones give quite a high-quality picture.
In the android market is a wonderful program IpWebCam , which allows you to turn your phone into a full-fledged webcam. In addition, she has api for receiving photos with autofocus. When IpWebCam is launched, a web-server rises on the phone, which allows you to receive the current frame from the phone at the address of the form 192.168.0.14:8080/shot.jpg
The idea was as follows:
Unfortunately, the toDataURL () method retains only a black square instead of an image due to cross-domain policies. Therefore, the canvas must be created on the same domain from which the image is taken. Going to the program's website , I learned that IpWebCam allows you to create your own html-pages on your internal server. To do this, it’s enough to upload them to the sd card and tell the program in which folder to search for them.
The algorithm is as follows:
First, we put the IpWebCam program from the market on the smartphone.
Create a webcam folder on your smartphone, and in it create a file my.html with the following contents:
Please note that at the beginning of the file are HTTP headers and a blank line before the main content of the page. The basis was taken javascript video player from the program itself.
Now you need to specify where to look for files for the web server of the application. To do this, open the program on your phone, press the hardware menu button and select a single item Cheats. Now enter the set (HtmlPath, / sdcard / webcam) command in the opened dialog box. Please note that no spaces are allowed after the comma.
Now on our server we create the jquery file of the jquery.ipwebcam.js plugin:
The plugin clings to the dialog call button. For example:
The plugin sends data to the server using the POST method in the data variable. Save file to php:
That's all, if someone comes in handy, I will be glad.
upd The idea was that the administrator works in the admin for a large computer, it is more convenient (it’s not only the pictures that he does). A smartphone is placed on a tripod and does not move. Directly photographing (preview and pressing the shutter) takes place on a large computer, so as not to run to the phone once again. Therefore, the photo itself will have to be transferred directly to the html form on a large computer. This can be done only by raising the web server on a smart. You could write the program yourself, but why if you already have a ready solution - IpWebCam.
There was a task for the online store to photograph a large number of goods. The specificity of the product is such that a beautiful picture is not so important as the design features of the product (on which side is the cable, are there fastening loops, etc.)
')
Photographing with an ordinary camera, then uploading a photo to a computer, searching for each item in the admin panel, then searching for the corresponding photo, seemed very long. It is much easier to open the goods in the admin panel and direct the phone to the goods. Moreover, with well-exposed lighting, modern smartphones give quite a high-quality picture.
Theory
In the android market is a wonderful program IpWebCam , which allows you to turn your phone into a full-fledged webcam. In addition, she has api for receiving photos with autofocus. When IpWebCam is launched, a web-server rises on the phone, which allows you to receive the current frame from the phone at the address of the form 192.168.0.14:8080/shot.jpg
The idea was as follows:
- Paste in the form <img> with the address of the photo from the smartphone
- Create a canvas and copy the contents of <img> into it.
- Save data with canvas.toDataURL ()
- Send data to server using ajax
Unfortunately, the toDataURL () method retains only a black square instead of an image due to cross-domain policies. Therefore, the canvas must be created on the same domain from which the image is taken. Going to the program's website , I learned that IpWebCam allows you to create your own html-pages on your internal server. To do this, it’s enough to upload them to the sd card and tell the program in which folder to search for them.
The algorithm is as follows:
- On the smartphone we create a special page (for example my.html)
- In the form on our website we create <iframe>, in which we load the html-page from the smartphone.
- On the phone in the html page we create a canvas into which we load the image from the camera.
- Save data using canvas.toDataURL () to a variable
- Passing data to the parent page using window.postMessage ()
- In the parent page we get the image and send the data to the server using ajax
- On the server, save the image to a file.
Decision
First, we put the IpWebCam program from the market on the smartphone.
Create a webcam folder on your smartphone, and in it create a file my.html with the following contents:
Content-Type: text/html <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript" src="common.js"></script> <style> * { margin: 0; padding: 0} </style> <script type="text/javascript"> $(loadJsWindowed); function shot() { $('#msg').text('Please wait...'); var img = new Image(); img.onload = function(){ var canvas = $('<canvas width="' + img.width + '" height="' + img.height + '">'); canvas[0].getContext('2d').drawImage(img, 0, 0); var data = canvas[0].toDataURL('image/jpeg').replace(/data:image\/jpeg;base64,/, ''); canvas.remove(); // window.parent.postMessage(data, '*'); } img.src = 'photoaf.jpg'; } </script> </head> <body> <div id="msg" style="text-align: center; background-color: #000000; color: #FFFFFF; font-weight: bold; cursor: pointer;" onclick="shot();">Click to take a shot..</div> <img id="img1" src="/shot.jpg?1" style="cursor: pointer; position:absolute;"/> <img id="img2" src="/shot.jpg?2" style="cursor: pointer; position:absolute;"/> </body> </html> Please note that at the beginning of the file are HTTP headers and a blank line before the main content of the page. The basis was taken javascript video player from the program itself.
Now you need to specify where to look for files for the web server of the application. To do this, open the program on your phone, press the hardware menu button and select a single item Cheats. Now enter the set (HtmlPath, / sdcard / webcam) command in the opened dialog box. Please note that no spaces are allowed after the comma.
Now on our server we create the jquery file of the jquery.ipwebcam.js plugin:
(function($) { $.fn.ipWebCam = function(options) { var settings = $.extend( { ip: '', width: 640, height: 480, action: '?', callback: function(){} }, options); function ipWebCam_listener(event){ $('#ipWebCam_wnd').prev().remove(); $('#ipWebCam_wnd').remove(); $.post(settings.action, {data:event.data}, settings.callback); } if (window.addEventListener){ window.addEventListener('message', ipWebCam_listener,false); } else { window.attachEvent('onmessage', ipWebCam_listener); } return this.each(function() { $(this).click(function(){ if(settings.ip=='') settings.ip = prompt('IP Webcam address:'); $('<iframe>').css({ position: 'fixed', width: settings.width + 'px', marginLeft: '-' + (settings.width/2) + 'px', left: '50%', height: settings.height + 'px', marginTop: '-' + (settings.height/2) + 'px', top: '50%', border: 0, overflow: 'hidden', backgroundColor: '#777777' }) .attr('width', settings.width) .attr('height', settings.height) .attr('src', 'http://' + settings.ip + ':8080/my.html') .attr('id', 'ipWebCam_wnd') .prependTo('body'); $('<div>').css({ position:'fixed', left: 0, top: 0, right:0, bottom:0, backgroundColor: '#000000', opacity: 0.5 }).click(function(){ $('#ipWebCam_wnd').prev().remove(); $('#ipWebCam_wnd').remove(); }).prependTo('body'); }); }); }; })( jQuery ) The plugin clings to the dialog call button. For example:
$('#camera_button').ipWebCam({ ip: '', //ip , , prompt action: 'save_img.php', // , callback: function(rep){ // window.location.reload(); }, width: 640, // iframe height: 480 }); The plugin sends data to the server using the POST method in the data variable. Save file to php:
if(isset($_POST['data'])) { $name = 'img/shot.jpg'; //, base64 file_put_contents($name, base64_decode($_POST['data'] )); echo 'ok'; } That's all, if someone comes in handy, I will be glad.
upd The idea was that the administrator works in the admin for a large computer, it is more convenient (it’s not only the pictures that he does). A smartphone is placed on a tripod and does not move. Directly photographing (preview and pressing the shutter) takes place on a large computer, so as not to run to the phone once again. Therefore, the photo itself will have to be transferred directly to the html form on a large computer. This can be done only by raising the web server on a smart. You could write the program yourself, but why if you already have a ready solution - IpWebCam.
Source: https://habr.com/ru/post/140974/
All Articles