HTML + JS ग्राहक लाइन निगरानी प्रणाली के लिए

Geektimes में, मैं अक्सर DIY श्रृंखला से पोस्ट पढ़ने और मिलने का आनंद लेता हूं। यहां एकत्र हुए मूल्यवान अनुभव के खजाने में एक छोटा सा योगदान करने का निर्णय लेने के बाद, मैं विस्तार से वर्णन करने जा रहा हूं कि लाइन सर्वर पर आधारित वेब के लिए एक क्लाइंट बनाने की प्रक्रिया।

लाइन निगरानी प्रणाली एक खुला एपीआई प्रदान करती है, और डेवलपर्स का कहना है कि वीडियो संग्रह और कैमरों को ऑनलाइन देखने के लिए इसके आधार पर अपने स्वयं के क्लाइंट को लिखना संभव है। इसके अलावा, यदि वांछित है, तो आप वीडियो के शीर्ष पर ओएसडी को ओवरलेइंग करते हुए संग्रह में घटनाओं को जोड़ने जैसे कार्यों को लागू कर सकते हैं। आधिकारिक वेबसाइट पर विनिर्देश में सभी विशेषताओं का विवरण प्रस्तुत किया गया है।

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

इनपुट डेटा

लेखक एक एचटीएमएल क्लाइंट के विकास में एक शुरुआत है, और लाइन वीडियो निगरानी प्रणाली के विकास में शामिल है।
जेएस, एचटीएमएल के ज्ञान का स्तर - प्रारंभिक।
कार्य साइट से विनिर्देश का उपयोग करके लाइन सॉफ़्टवेयर के आधार पर उपकरणों के साथ काम करने के लिए एक HTML क्लाइंट लिखना है।

मैं अभी मुख्य साज़िश का खुलासा करूँगा - मैं दो निष्कर्षों पर आया:

1. विनिर्देश वास्तविक है, यह काफी स्पष्ट रूप से वर्णित है, आप C ++, PHP का उपयोग करके एक क्लाइंट लिख सकते हैं।
2. आप केवल जेएस का उपयोग करके एक पूर्ण HTML क्लाइंट नहीं लिख सकते हैं - RPC से पहले विनिर्देश के अनुसार केवल ऑनलाइन मॉनिटरिंग।

पहला निष्कर्ष काफी तार्किक है, बड़ी संख्या में तीसरे पक्ष के कार्यक्रमों के साथ एकीकरण। वे सभी साइट पर वर्णित हैं: एक्सेस कंट्रोल सिस्टम , वजन , पीओएस सिस्टम , कार नंबर और 1 सी निर्धारित करने के लिए कार्यक्रम हैं।

दूसरा निष्कर्ष अधिक दिलचस्प है, इसे नीचे पर विचार करें।

आप HTML + JS में पूर्ण ग्राहक क्यों नहीं बना सकते?

उत्तर: क्रॉस-डोमेन अनुरोध।

फिलहाल, लाइन का वेब सर्वर सीमित है, और केवल www फ़ोल्डर में कोड कॉपी करके, एक्सेस प्राप्त नहीं किया जा सकता है। हालांकि, डेवलपर्स का वादा है कि लिनक्स के लिए नए संस्करण में और "लाइन 8.0" में वेब सर्वर मानक के रूप में काम करेगा: अनुरोध के मामले में, अगर कोई फ़ाइल है, तो वह इसे वापस कर देगा।

अब एक नया प्रोजेक्ट बनाएं और कोडिंग शुरू करें। वेब के लिए प्रोग्रामिंग करने वाले सभी नवागंतुकों की तरह, यह निर्दिष्ट करते हुए कि एक्सेस-कंट्रोल-एलायेंस-ओरिजिन हेडर में "लाइन्स" सर्वर उत्तर "*" देता है, मैंने फ़ायरफ़ॉक्स 57.0.4 (64-बिट) पर परिणाम की जाँच करते हुए कोड पर कड़ी मेहनत करना शुरू कर दिया। सर्वर के अनुरोध XMLHttpRequest द्वारा भेजे गए थे।

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

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

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

एक वैकल्पिक विधि पहले से ही विनिर्देश में वर्णित की गई है, यह "लाइन्स" के कार्यक्रम विभाग के साथ कुछ समय के पत्राचार को खर्च करने के लिए बनी रही। चूंकि ऐसी कठिनाइयाँ पहली बार नहीं आती हैं, इसलिए प्राधिकरण के लिए पहले से ही एक बैसाखी है, और यह विनिर्देश में भी वर्णित है:

क्लाइंट पर जहां मानक साधनों (HTTP डाइजेस्ट / बेसिक ऑथेंटिकेशन) का उपयोग करके अनुरोध को अधिकृत करना असंभव है, उदाहरण के लिए, प्राधिकरण हेडर को अनुरोध पैरामीटर में से एक का उपयोग करके भेजा जा सकता है।
/kfd3ado1sdrms/streaming/main.flv?authorization=Basic%20d2ViOg==

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

अनुरोध कोड:

function get_request_url(method,current_server_data, resource, additional){ var request = current_server_data.server_ip + ':' +current_server_data.port +resource+'?authorization=Basic '+ utf8_to_b64(current_server_data.user+':'+current_server_data.password); if (additional != '' && typeof additional != "undefined") { request += '&' + additional; } return request; } function http_request_of_resource (server_index , resource, auth_attempt) { var request = get_request_url('GET', servers_array[server_index], resource,''); var req_ = new XMLHttpRequest(); req_.open('GET', 'http://'+ request, true); //req_.timeout = 9000; //  ,    req_.onreadystatechange = function() { if (this.readyState == 2) { if (this.status == 401) { //console.log('---unauthorized'); hideModal(); update_nessecary_structure(resource, 'unauthorized', server_index); } } else if (this.readyState === 4) { if (this.status === 0) { hideModal(); update_nessecary_structure(resource, 'server_down',server_index) } if (this.status == 200) { if (auth_attempt) hideModal(); else resource =(resource =='/cameras') ? resource+'_update_info': resource; //console.log('200' + this.responseText); update_nessecary_structure(resource, this.responseText, server_index); } else if (this.status == 404) { //console.log('404'); update_nessecary_structure(resource, '404', server_index); } } }; //   req_.setRequestHeader('Content-type', 'text/plain; charset=utf-8'); req_.setRequestHeader('Accept', 'application/json'); req_.send(); } 

हम संसाधन को उसी के अनुसार बदलते हैं जिसे हमें विनिर्देश के अनुसार चाहिए और यह या वह डेटा मिलता है। यदि आवश्यक हो तो अतिरिक्त चर में अनुरोध के लिए अतिरिक्त पैरामीटर हैं। इस पर, जीईटी अनुरोधों के माध्यम से पाठ डेटा की रसीद / भेजने, विनिर्देश के पहले छमाही के विकास को बंद माना जा सकता है।

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

RPC विनिर्देशन

हमें JSON (सर्वर "लाइन्स 7.1.1" और उच्चतर) या MessagePack (संस्करण "लाइन 7.0" और उच्चतर) का डेटा भेजने और प्राप्त करने के लिए आमंत्रित किया जाता है। यह उल्लेख किया गया है कि MessagePack का वजन कम है और तेजी से काम करता है, लेकिन ईमानदार होने के लिए, मैं JSON (यह जेएस में पहले से ही बनाया गया है) चुनूंगा, अगर एक चीज के लिए नहीं, लेकिन विनिर्देश में: संग्रह से फ़्रेम प्राप्त करना केवल MessagePack में संभव है। मुझे उनकी आधिकारिक वेबसाइट पर जाना था और जेएस फाइल को डाउनलोड करना था, जिसमें बोर्ड पर एनकोड और डिकोड विधियां हैं।

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

मैंने कार्यक्रम विभाग को एक अनुरोध भेजा, और चर्चा के बाद, उन्होंने मेरे लिए एक बैसाखी जोड़ दी, जैसा कि प्राधिकरण के मामले में, - उर अनुरोध में सामग्री-प्रकार प्रेषित किया जाएगा:

 function rpc_request_of_resource (current_server_data , rpc_method, rpc_request) { var request = get_request_url('POST', current_server_data, '/rpc',''); //console.log("i'm here request = " + request + ' '+ current_server_data.user); request += "&content-type='application/x-msgpack'"; var req_ = new XMLHttpRequest(); req_.open('POST', 'http://'+ request, true); //  ,    req_.responseType = 'arraybuffer'; req_.onreadystatechange = function() { if (this.readyState == 2) { if (this.status == 401) { //console.log('401' + this.getAllResponseHeaders()); console.log('unauthorized'); } } else if (this.readyState == 4) { if (this.status == 200) { //if (auth_attempt) hideModal(); //console.log('200' + this.responseText); rpc_update_nessecary_method(rpc_method, this.response); } else if (this.status == 404) { console.log('404'); } else if (this.status == 500) { //console.log('500'); rpc_update_nessecary_method(rpc_method, '500'); } } }; //   //req_.setRequestHeader('Content-type', 'text/plain; charset=utf-8'); //req_.setRequestHeader('Content-type', 'application/x-msgpack'); req_.setRequestHeader('Accept', 'application/x-msgpack'); req_.send(rpc_request); } 

यह परिवर्तन "लाइन 7.4.1" और उच्चतर संस्करण के साथ काम करेगा। इस संस्करण के नीचे के सभी सर्वरों के लिए, / rpc संसाधन के साथ काम उपलब्ध नहीं होगा।

अंत में, मैं उन सभी ग्राहकों को धन्यवाद देना चाहता हूं जिन्होंने हमें हमारे एपीआई के आधार पर आवेदनों के कार्यान्वयन से संबंधित प्रश्न / इच्छाएं भेजीं। आपके लिए धन्यवाद, एक अध्ययन आयोजित किया गया था, जिसके ढांचे में कुछ कमियों की पहचान की गई और उन्हें ठीक किया गया।

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