स्क्रीन कैप्चर एपीआई का परिचय - एक ब्राउज़र में QR कोड स्कैन करें

परिचय

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

आपको शुरू करने के लिए कुछ लिंक:

• स्क्रीन कैप्चर विशिष्टता
• एमडीएन उपयोग गाइड
• डेमो

यदि डेमो के साथ लिंक बंद हो जाता है (या यदि आप वहां जाने के लिए बहुत आलसी हैं) - तो यह है कि समाप्त डेमो कैसे दिखता है:

चलिए शुरू करते हैं।

प्रेरणा

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

कुछ उत्पाद, जैसे 1Password , में इस स्थिति के लिए एक दिलचस्प समाधान शामिल है। यदि आपको क्यूआर कोड से एक खाता स्थापित करने की आवश्यकता है, तो वे एक पारदर्शी खिड़की खोलते हैं जिसे आप कोड के साथ छवि पर खींच सकते हैं, और यह स्वचालित रूप से मान्यता प्राप्त है। यहाँ यह कैसा दिखता है:

यह आदर्श होगा यदि हम अपने आवेदन के लिए कुछ समान लागू कर सकते हैं। लेकिन शायद यह ब्राउज़र में काम नहीं कर रहा है ...

मिलना - getDisplayMedia

खैर, लगभग। यहां स्क्रीन कैप्चर एपीआई इसकी एकमात्र getDisplayMedia पद्धति से getDisplayMedia । getDisplayMedia अपने कैमरे के बजाय केवल डिवाइस स्क्रीन के लिए getDisplayMedia की तरह है। दुर्भाग्य से, ब्राउज़र समर्थन, जैसा कि ऊपर उल्लेख किया गया है, कैमरे तक पहुंच के रूप में व्यापक है। एमडीएन के अनुसार, आप इसे फ़ायरफ़ॉक्स, क्रोम, एज में इस्तेमाल कर सकते हैं (हालांकि यह गलत जगह पर है - navigator में सही है, और navigator.mediaDevices में नहीं navigator.mediaDevices ) + एज मोबाइल और एंड्रॉइड के लिए ओपेरा।

अपेक्षित बिग टू के बगल में मोबाइल ब्राउज़रों का एक बहुत ही उत्सुक चयन।

एपीआई अपने आप में बेहद सरल है। यह getUserMedia के समान काम करता है, लेकिन आपको परिभाषित प्रदर्शन सतहों में से एक से वीडियो स्ट्रीम कैप्चर करने की अनुमति देता है :

• मॉनिटर (संपूर्ण स्क्रीन) से,
• एक खिड़की या एक निश्चित आवेदन के सभी खिड़कियों से,
• किसी ब्राउज़र से , या किसी विशिष्ट दस्तावेज़ से। क्रोम में, यह दस्तावेज़ एक अलग टैब है, लेकिन FF में ऐसा कोई विकल्प नहीं है।

ब्राउज़र एपीआई, जो आपको ब्राउज़र से परे देखने की अनुमति देता है ... यह परिचित लगता है और आमतौर पर कुछ परेशानियों के लिए नीचे झुकता है, लेकिन इस मामले में यह काफी सुविधाजनक हो सकता है। आप अन्य विंडो से चित्र कैप्चर कर सकते हैं और उदाहरण के लिए, Google Translate Camera जैसे वास्तविक समय में टेक्स्ट को पहचान और अनुवाद कर सकते हैं। खैर, और शायद कई और अधिक दिलचस्प उपयोग हैं।

हम जमा करते हैं

इसलिए, हमने उन क्षमताओं का पता लगाया जो एपीआई हमें देता है। आगे क्या है?

और फिर हमें इस वीडियो स्ट्रीम को उन छवियों से आगे निकलने की जरूरत है, जिन पर हम काम कर सकते हैं। ऐसा करने के लिए, हम <video> , <canvas> तत्वों और कुछ और जेएस का उपयोग करते हैं।

प्रक्रिया का एक क्लोज़-अप कुछ इस तरह दिखता है:

• <video> लिए डायरेक्ट स्ट्रीम;
• एक निश्चित आवृत्ति के साथ <video> की सामग्री को <canvas> में खींचें;
• getImageData 2D संदर्भ विधि का उपयोग करके <canvas> से एक ImageData ऑब्जेक्ट लीजिए।

इतनी लंबी पाइपलाइन के कारण यह पूरी प्रक्रिया थोड़ी अजीब लग सकती है, लेकिन यह विधि काफी लोकप्रिय है और इसका उपयोग getUserMedia में वेबकैम से डेटा कैप्चर करने के लिए किया गया था।

धारा को शुरू करने और इससे फ्रेम को बाहर निकालने के लिए, हर चीज को अप्रासंगिक मानते हुए, हमें निम्नलिखित कोड की आवश्यकता है:

 async function run() { const video = document.createElement('video'); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const displayMediaOptions = { video: { cursor: "never" }, audio: false } video.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions); const videoTrack = video.srcObject.getVideoTracks()[0]; const { height, width } = videoTrack.getSettings(); context.drawImage(video, 0, 0, width, height); return context.getImageData(0, 0, width, height); } await run(); 

जैसा कि ऊपर उल्लेख किया गया है: पहले हम <video> और <canvas> तत्व बनाते हैं और कैनवास को 2 डी संदर्भ ( CanvasRenderingContext2D ) के लिए CanvasRenderingContext2D ।

तब हम प्रवाह प्रतिबंध / शर्तों को परिभाषित करते हैं । कैमरे की धाराओं के विपरीत, उनमें से कुछ हैं। हम कहते हैं कि हम कर्सर नहीं देखना चाहते हैं, और हमें ऑडियो की आवश्यकता नहीं है। हालांकि इस लेखन के समय, ऑडियो कैप्चर अभी भी किसी के द्वारा समर्थित नहीं है।

उसके बाद, हम <video> तत्व के लिए MediaStream प्रकार की प्राप्त स्ट्रीम को हुक करते हैं। ध्यान दें कि getDisplayMedia एक वादा लौटाता है।

अंत में, स्ट्रीम के बारे में प्राप्त आंकड़ों से, हमें वीडियो रिज़ॉल्यूशन याद है कि इसे कैनवास पर सही ढंग से खींचने के लिए, फ्रेम को ड्रा करें और ImageData से इमेजडेटा ऑब्जेक्ट को बाहर निकालें।

पूर्ण उपयोग के लिए, आप सबसे अधिक संभावना एक बार के बजाय एक लूप में फ्रेम को संसाधित करना चाहेंगे। उदाहरण के लिए, जब आप प्रतीक्षा करते हैं जब फ्रेम में वांछित छवि दिखाई देती है। और यहाँ कुछ शब्दों को कहने की आवश्यकता है।

जब बात आती है "एक निरंतर लूप में डोम में कुछ संभालने" की, पहली बात जो मन में आती है वह सबसे अधिक requestAnimationFrame । हालांकि, हमारे मामले में, इसका उपयोग करने से काम नहीं चलेगा। बात यह है कि जब टैब सक्रिय होना बंद हो जाता है - ब्राउज़र आरएएफ लूप प्रसंस्करण को रोकते हैं। हमारे मामले में, यह इस समय है कि हम छवियों को संसाधित करना चाहेंगे।

इस संबंध में, आरएएफ के बजाय, हम अच्छे पुराने सेटइंटरवल का उपयोग करेंगे। लेकिन चीजें उसके साथ इतनी सहज नहीं हैं। एक निष्क्रिय टैब में, कॉलबैक संचालन के बीच का अंतराल कम से कम 1 सेकंड है । फिर भी, यह हमारे लिए पर्याप्त है।

अंत में, जब हम फ़्रेम पर पहुँचते हैं, तो हम उन्हें संसाधित कर सकते हैं जैसे हम चाहते हैं। इस डेमो के प्रयोजनों के लिए, हम jsQR लाइब्रेरी का उपयोग करेंगे। यह बेहद सरल है: इनपुट ImageData स्वीकार करता है, छवि की चौड़ाई और ऊंचाई। यदि प्राप्त छवि में एक QR कोड है, तो आपको मान्यता प्राप्त डेटा के साथ एक JS ऑब्जेक्ट मिलेगा।
आइए कोड के कुछ और पंक्तियों के साथ हमारे पिछले उदाहरण को पूरक करें:

 const imageData = await run(); const code = jsQR(imageData.data, streamWidth, streamHeight); 

हो गया!

NPM

मैंने सोचा था कि इस उदाहरण के पीछे का मुख्य कोड एक npm लाइब्रेरी में पैक किया जा सकता है और बाद के उपयोग के लिए प्रारंभिक उपयोग में कुछ समय बचा सकता है। पुस्तकालय बहुत सरल है, इस स्तर पर यह केवल कॉलबैक को स्वीकार करता है जिस पर ImageData भेजा जाएगा, और एक अतिरिक्त पैरामीटर डेटा भेजने की आवृत्ति है। सभी प्रसंस्करण जो आपको अपने स्वयं के लाने की आवश्यकता है। मैं इसके बारे में सोचूंगा कि क्या यह अपनी कार्यक्षमता का विस्तार करने के लिए समझ में आता है।

पुस्तकालय को stream-display कहा जाता है: एनपीएम | गिथब ।

इसका उपयोग वस्तुतः कोड की तीन पंक्तियों और एक कॉलबैक में घटाया जाता है:

 const callback = imageData => {...} // do whatever with those images const capture = new StreamDisplay(callback); // specify where the ImageData will go await capture.startCapture(); // when ready capture.stopCapture(); // when done 

यहां डेमो देखा जा सकता है । त्वरित प्रयोगों के लिए एक कोडपेन संस्करण भी है। दोनों उदाहरण उपरोक्त एनपीएम पैकेज का उपयोग करते हैं।

परीक्षण के बारे में थोड़ा सा

इस कोड को लाइब्रेरी में पैक करते हुए, मुझे यह सोचना था कि इसका परीक्षण कैसे किया जाए। मैं बिल्कुल नहीं चाहता था कि इसमें कुछ छोटे परीक्षण चलाने के लिए 50 एमबी का हेडलेस क्रोम खींचें। और यद्यपि सभी घटकों के लिए स्टब्स लिखने का विचार बहुत दर्दनाक लग रहा था, अंत में मैंने ऐसा किया।
परीक्षण धावक के रूप में, tape का चयन किया गया था। यहाँ मुझे आखिरकार अनुकरण करना है:

• document ऑब्जेक्ट और DOM तत्व। इसके लिए, मैंने jsdom लिया;
• कुछ jsdom विधियाँ जिनमें क्रियान्वयन का अभाव है: HTMLMediaElement#play , HTMLCanvasElement#getContext और navigator.mediaDevices#getDisplayMedia ;
• समय। ऐसा करने के लिए, मैंने useFakeTimers लाइब्रेरी के उपयोग का उपयोग किया, जो हुड कॉल lolex तहत है। यह अपनी जगह को सेट करने के लिए सेट करता है requestAnimationFrame , requestAnimationFrame और कई अन्य कार्य जो समय के साथ काम करते हैं, और आपको इस नकली समय के प्रवाह को नियंत्रित करने की अनुमति भी देते हैं। लेकिन सावधान रहें: jsdom अपनी इनिशियलाइज़ेशन प्रक्रिया के एक स्थान पर समय बीतने का उपयोग करता है, और यदि आप पहले sinon चालू करते हैं, तो सब कुछ जम जाएगा।

मैंने सभी फ़ंक्शन स्टब्स के लिए साइनॉन का भी उपयोग किया, जिनकी निगरानी करने की आवश्यकता थी। बाकी खाली जेएस कार्यों द्वारा लागू किया गया था।

बेशक, आप उन उपकरणों को चुनने के लिए स्वतंत्र हैं जिनके साथ आप पहले से परिचित हैं। लेकिन, मुझे उम्मीद है कि यह सूची आपको इसे पहले से तैयार करने की अनुमति देगी, क्योंकि अब आप जानते हैं कि आपको क्या करना है।

अंतिम परिणाम पुस्तकालय के भंडार में देखा जा सकता है। यह बहुत सुंदर नहीं है, लेकिन यह काम करता है।

निष्कर्ष

समाधान लेख की शुरुआत में उल्लिखित पारदर्शी खिड़की के रूप में सुरुचिपूर्ण नहीं था, लेकिन शायद इस दिन वेब आएगा। कोई केवल यह आशा कर सकता है कि जब ब्राउज़र अपनी खिड़कियों के माध्यम से देखना सीखेंगे - इन क्षमताओं को हमारे द्वारा सख्ती से नियंत्रित किया जाएगा। इस बीच, याद रखें कि जब आप क्रोम में स्क्रीन को फुल करते हैं - तो इसे पार्स, रिकॉर्ड किया जा सकता है, आदि। इसलिए आवश्यकता से अधिक अफवाह न करें!

मुझे उम्मीद है कि इस लेख के बाद किसी ने खुद के लिए एक नई चाल सीखी है। यदि आपके पास इस विचार का उपयोग है कि इसका और क्या उपयोग किया जा सकता है, तो टिप्पणियों में लिखें। और जल्द ही मिलते हैं।