एक वेब कैमरा का उपयोग करके ब्राउज़र में ऑटोकार्ड बनाएं

नमस्ते वेब परियोजनाओं में से एक पर बहुत पहले नहीं, मुझे एक वेब कैमरा से एक तस्वीर प्राप्त करने के अवसर की आवश्यकता थी। कुछ समय बाद, एक अन्य परियोजना पर, समान आवश्यकता उत्पन्न हुई, और फिर से इसी तरह की कार्यक्षमता के साथ एक तीसरी परियोजना क्षितिज पर लूम हुई। हर बार एचटीएमएल 5 रॉक्स में नहीं जाने के लिए, और देखने के लिए, "कैसे और कहाँ," मैंने एक प्लगइन लिखने का फैसला किया।
दरअसल, इस लेख में मैं अपने काम का परिणाम प्रस्तुत करना चाहता हूं: html5-webcam-avatar - एक वेब कैमरा से अवतार बनाने के लिए jquery प्लगइन।



एक प्लगइन क्या कर सकता है?

• एक तस्वीर लें, और फिर इसे "संपर्क में जैसे" एक वर्ग के साथ फसल लें।
• बस साइट से किसी अन्य चित्र को काटें।

पता नहीं कैसे?

• ब्राउज़रों में काम करें जो usermedia एपीआई का समर्थन नहीं करते हैं, और कैनवास के साथ काम करते हैं।

यही है, प्लगइन केवल जावास्क्रिप्ट और देशी ब्राउज़र सुविधाओं का उपयोग करता है, कोई कमियां प्रदान नहीं की जाती हैं।
मैं इसे अपनी साइट पर एक अतिरिक्त सुविधा के रूप में उपयोग करने की सलाह दूंगा। हम जांचते हैं कि क्या संबंधित क्षमताएं समर्थित हैं और प्लगइन को कनेक्ट करती हैं।

यह कैसे काम करता है?
आधुनिक ब्राउज़र पहले से ही एक वेब कैमरा और माइक्रोफ़ोन के साथ काम करने की कोशिश कर रहे हैं। जावास्क्रिप्ट में, इसे संबंधित एपीआई के माध्यम से लागू किया जाता है।
Html5 रॉक्स वेबसाइट से नमूना कोड

window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //... if (navigator.getUserMedia) { navigator.getUserMedia({audio: true, video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); }, onFailSoHard); } else { video.src = 'somevideo.webm'; // fallback. } 

सब कुछ सरल है। हम जाँचते हैं कि फ़ंक्शन navigator.getUserMedia को परिभाषित करता है या संबंधित कोड को निष्पादित करता है। अन्यथा, हम कुछ प्रकार के फालबैक फंक्शन करते हैं। आप उपरोक्त साइट पर इस सब के बारे में अधिक पढ़ सकते हैं। मैं कुछ चीजों के बारे में बात करना चाहता हूं जो स्पष्ट नहीं हैं और वहां वर्णित नहीं हैं।

सबसे पहले , stream ऑब्जेक्ट का व्यवहार अलग-अलग ब्राउज़रों में भिन्न होता है। क्रोम में, video टैग के src पैरामीटर में इसे पास करने के लिए, इसे objectURL का उपयोग करके window.URL.createObjectURL objectURL बदला जाना चाहिए। ओपेरा में, जैसा कि मैं इसे समझता हूं, stream ऑब्जेक्ट स्वचालित रूप से परिवर्तित हो जाता है, और उदाहरण के लिए, मुझे window.URL गुण नहीं मिला। इसलिए, हम सीधे लिखते हैं: video.src = stream । खैर, फ़ायरफ़ॉक्स, एक window.URL संपत्ति और एक createObjectURL विधि है। हालाँकि, ऐसा कोड window.URL.createObjectURL(stream) - एक त्रुटि फेंकता है, लेकिन यहां बताया गया है कि video.src = stream - कैसे काम करता है।
इसलिए, मेरा कोड इस तरह निकला:

 navigator.getUserMedia && navigator.getUserMedia({video: true}, function(stream) { try { video.src = window.URL.createObjectURL(stream); //for webkit } catch (e) { video.src = stream; //for opera and firefox } }, function() { alert('-     '); }); 

दूसरा बिंदु जिसके बारे में मैं बात करना चाहूंगा वह खिलाड़ी के साथ ही काम कर रहा है। तथ्य यह है कि सुविधा के लिए, मैंने वीडियो को रोकने के लिए संभव बनाने का फैसला किया, और फिर स्नैपशॉट किया। इसलिए, क्रोम और फ़ायरफ़ॉक्स में वीडियो को रोकना सामान्य है। ओपेरा में, वीडियो को रोकने के साथ, वेबकैम से स्ट्रीम बंद हो जाती है। यही है, जब हम एक ठहराव के दौरान ओपेरा में एक स्नैपशॉट करते हैं, तो हमें एक प्रसिद्ध कलाकार (काला वर्ग) के काम का एक संस्करण मिलता है। इस समस्या का समाधान, सिद्धांत रूप में, स्पष्ट है। वीडियो को रोकने से पहले, हम डेटाअवर को कुछ अस्थायी संग्रहण में सहेजते हैं, और फिर, स्नैपशॉट बनाते समय, यदि वीडियो रोक दिया जाता है, तो हम इसे स्टोरेज से बाहर कर देते हैं या फिर दोबारा डेटा यूआरएल बनाते हैं।
यह मेरे लिए कुछ इस तरह दिखता है:

 // play/pause -      video.addEventListener('click', function() { if (video.paused) { video.play(); } else { $(video).data('data-url', getSnapshotDataUrl()); //     data-url video.pause(); } }); ... var getDataUrl = function() { var data_url = video.paused ? $video.data('data-url') : getSnapshotDataUrl(); return data_url; } 

यहाँ getSnapshotDataUrl एक फ़ंक्शन है जो वीडियो के वर्तमान फ्रेम को canvas, तत्व में फेंकता है canvas, और फिर कैनवास पर toDataURL विधि को बुलाया जाता है।

अब शायद मैं प्लगइन के बारे में बात करूँगा।
सामान्य तौर पर, यहाँ यह एक नहीं, बल्कि दो प्लगइन्स को बदल देता है। पहला html5WebCam से फ़ोटो प्राप्त करना है। दूसरा html5Crop फोटो को क्रॉप करना है। हां, इनका अलग-अलग इस्तेमाल किया जा सकता है।
सब कुछ निम्नानुसार काम करता है - हम प्लगइन को किसी तत्व पर लटकाते हैं। उदा। button अब तत्व click इवेंट के लिए सुनता है और एक अवतार बनाने के लिए प्रक्रिया शुरू करता है। जब अवतार तैयार हो जाता है, तो हम इसे callback फ़ंक्शन onCrop , या onsnapshot में प्राप्त करेंगे।

 $(document).ready(function() { $("#create_snapshot").html5WebCam({ oncrop: function(cropped_url) { // cropped_url - base64 image var $img = $("<img/>"); $img.attr('src', cropped_url); $('body').append($img); }, }); }); 

प्लगइन सरल मोडल विंडोज़ का उपयोग करता है जो आसानी से संलग्न सीएसएस फ़ाइल के माध्यम से अनुकूलन योग्य हैं। यदि यह समाधान आपको सूट नहीं करता है, तो आप अपनी मोडल विंडो का उपयोग कर सकते हैं (डेमो साइट पर jquery-ui Dialog के साथ एक उदाहरण है)।

अन्य अनुकूलन विकल्प हैं, यहां उनकी एक सूची है

 //html5WebCam NOT_SUPPORT_FEATURE: '      ', CAMERA_NOT_FOUND: '     ', CLICK_TO_PAUSE: '  /', TAKE_SNAPSHOT: ' ', CANCEL: '', max_video_size: 600, modal_class: 'html5-webcam-avatar-modal', use_native_modal: true, use_native_button: true, onDomCreated: function($html) { }, onsnapshot: function(snapshot) {}, use_crop: true, oncrop: function(cropped_url) {}, oncancel: function() {}, alertFn: function(msg) { alert(msg); } //html5Crop CROP_NAME: '', CANCEL: '', MIN_IMG_SIDE_ERROR: '      ', CANVAS_NOT_SUPPORTED: 'canvas not supported in this browser', square_mode: true, max_crop_side: 400, min_crop_side: 50, max_img_side: 600, min_img_side: 100, init_crop_side: 100, dot_side: 10, use_native_modal: true, use_native_button: true, onDomCreated: function($ui) {}, oncancel: function() {}, oncrop: function(cropped_url) {}, alertFn: function(msg) { alert(msg); }, modal_class: 'html5-webcam-avatar-modal' 

मुझे लगता है कि नामों से यह स्पष्ट है कि उनकी आवश्यकता क्यों है। मैं सिर्फ यह नोट करना चाहता हूं कि html5 क्रॉप के लिए सभी मापदंडों को html5WebCam में सेट किया जाना चाहिए - जब वे एक साथ उपयोग किए जाते हैं, अर्थात, अगर use_crop: true (डिफ़ॉल्ट रूप से यह मामला है)।

डेमो और प्लगइन - यहाँ
टिप्पणियों में प्रश्नों, सुझावों, आलोचना और सलाह की प्रतीक्षा है।