आपका स्वागत है!
ऑनलाइन स्टोर के लिए बड़ी संख्या में उत्पादों की तस्वीर लगाने का काम था। उत्पाद की बारीकियां ऐसी हैं कि सुंदर चित्र इतना महत्वपूर्ण नहीं है क्योंकि उत्पाद की डिजाइन विशेषताएं (जो पक्ष केबल है, क्या कोई बढ़ते छोरों आदि हैं)
एक साधारण कैमरे के साथ तस्वीरें लेना, फिर एक कंप्यूटर पर एक तस्वीर अपलोड करना, व्यवस्थापक पैनल में प्रत्येक उत्पाद की खोज करना, फिर संबंधित फोटो की खोज करना बहुत लंबा समय लगता था। उत्पाद को व्यवस्थापक पैनल में खोलना और उत्पाद पर फोन को इंगित करना बहुत आसान है। इसके अलावा, अच्छी तरह से उजागर प्रकाश व्यवस्था के तहत, आधुनिक स्मार्टफोन काफी उच्च गुणवत्ता वाली तस्वीर देते हैं।
सिद्धांत
एंड्रॉइड मार्केट में एक अद्भुत प्रोग्राम
इपब्लिकैम है , जो आपको अपने फोन को एक पूर्ण वेब कैमरा में बदलने की अनुमति देता है। इसके अलावा, उसके पास ऑटोफोकस के साथ फोटो लेने के लिए एक एपीआई है। जब IpWebCam शुरू होता है, तो वेब सर्वर फोन पर उगता है, जो फॉर्म 192.168.0.14:8080/shot.jpg के पते पर स्थानीय मशीन से वाईफाई के माध्यम से फोन से वर्तमान फ्रेम प्राप्त करने की अनुमति देता है।
विचार इस प्रकार था:
- स्मार्टफोन से फोटो के पते के साथ <img> फॉर्म में पेस्ट करें
- एक कैनवास बनाएं और उसमें <img> की सामग्री को कॉपी करें
- कैनवस के साथ डेटा सहेजें ।toDataURL ()
- AJAX का उपयोग कर सर्वर को डेटा भेजें
दुर्भाग्य से, क्रॉस-डोमेन नीतियों के कारण, toDataURL () विधि केवल एक छवि के बजाय एक काला वर्ग बचाता है। इसलिए, कैनवास उसी डोमेन पर बनाया जाना चाहिए जहां से छवि ली गई है।
कार्यक्रम की वेबसाइट पर जाने पर , मुझे पता चला कि IpWebCam आपको अपने आंतरिक सर्वर पर अपने स्वयं के HTML-पृष्ठ बनाने की अनुमति देता है। ऐसा करने के लिए, बस उन्हें एसडी कार्ड पर अपलोड करें और प्रोग्राम को बताएं कि उन्हें किस फ़ोल्डर में देखना है।
एल्गोरिथ्म इस प्रकार है:
- स्मार्टफोन पर, एक विशेष पेज बनाएं (उदाहरण के लिए, my.html)
- हमारी वेबसाइट पर फॉर्म में, एक <iframe> बनाएं, जिसमें हम एक स्मार्टफोन से html पेज लोड करते हैं।
- Html पेज में फोन पर हम एक कैनवास बनाते हैं जिसमें हम कैमरे से छवि को लोड करते हैं।
- एक चर के लिए कैनवस .toDataURL () का उपयोग करके डेटा सहेजें
- Window.postMessage () का उपयोग करके मूल पृष्ठ पर डेटा पास करें
- पैरेंट पेज में हमें इमेज मिलती है और अजाक्स का उपयोग करके सर्वर को डेटा भेजते हैं
- सर्वर पर, छवि को फ़ाइल में सहेजें।
निर्णय
सबसे पहले, हम स्मार्टफोन पर
बाजार से IpWebCam कार्यक्रम
डालते हैं ।
हम स्मार्टफोन पर
वेब कैमरा फ़ोल्डर बनाते हैं, और इसमें हम निम्नलिखित सामग्री के साथ
my.html फ़ाइल बनाते हैं:
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(); </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>
कृपया ध्यान दें कि फ़ाइल की शुरुआत में HTTP हेडर और पेज की मुख्य सामग्री के सामने एक खाली लाइन है। आधार को कार्यक्रम से ही जावास्क्रिप्ट वीडियो प्लेयर लिया गया था।
अब आपको यह निर्दिष्ट करने की आवश्यकता है कि एप्लिकेशन के वेब सर्वर के लिए फाइलें कहां देखें। ऐसा करने के लिए, फोन पर प्रोग्राम खोलें, हार्डकी मेनू बटन दबाएं और केवल चीट्स आइटम चुनें। अब खुलने वाले डायलॉग में
सेट कमांड
(HtmlPath, / sdcard / webcam) डालें । कृपया ध्यान दें कि अल्पविराम के बाद किसी भी स्थान की अनुमति नहीं है।
अब हमारे सर्वर पर हम jquery.ipwebcam.js प्लगइन की jquery फ़ाइल बनाते हैं:
(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 )
प्लगइन डायलॉग कॉल बटन पर चढ़ जाता है। उदाहरण के लिए:
$('#camera_button').ipWebCam({ ip: '',
प्लगइन डेटा वैरिएबल में POST विधि का उपयोग करके सर्वर में डेटा स्थानांतरित करता है। फ़ाइल को php में सहेजें:
if(isset($_POST['data'])) { $name = 'img/shot.jpg';
यह सब, अगर किसी के काम आता है, तो मुझे खुशी होगी।
अपडेट यह विचार था कि व्यवस्थापक बड़े कंप्यूटर के लिए व्यवस्थापक पैनल में काम करता है, यह अधिक सुविधाजनक है (वह सिर्फ तस्वीरें नहीं लेता है)। एक स्मार्टफोन को एक तिपाई पर रखा जाता है और स्पर्श नहीं करता है। प्रत्यक्ष रूप से फ़ोटोग्राफ़िंग (पूर्वावलोकन और शटर को दबाते हुए) एक बड़े कंप्यूटर पर होता है, ताकि आप फिर से फ़ोन पर न चलें। इसलिए, फोटो को बड़े कंप्यूटर पर सीधे html फॉर्म में ट्रांसफर करना होगा। यह केवल स्मार्ट पर वेब सर्वर को उठाकर किया जा सकता है। आप प्रोग्राम को स्वयं लिख सकते हैं, लेकिन अगर आपके पास पहले से तैयार समाधान है - IpWebCam।