🙎🏾 🤲 🈶 एक ब्राउज़र में पोस्ट-प्रोसेसिंग वीडियो की संभावना का मूल्यांकन 🏒 🌚 💸

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

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

यह पोस्ट इस क्षेत्र में मेरे शोध की एक संक्षिप्त रिपोर्ट है, जहां अंतिम लक्ष्य 1920x1080 के न्यूनतम रिज़ॉल्यूशन पर वास्तविक समय को छानने की संभावना का आकलन करना था।

टिप्पणी

एक लेख पढ़ते समय, आपको विचार करना चाहिए:

दिखाए गए सभी डेमो लूप विशेषता सेट के साथ html5 वीडियो पर आधारित हैं। इन ब्राउज़रों की गलती के कारण , कुछ ब्राउज़रों में वीडियो की शुरुआत में स्विच करने के दौरान यह वीडियो बहुत बुरी तरह से झटका दे सकता है । मैंने इस समस्या के संभावित समाधान के लिए कोड को फिर से करने की कोशिश नहीं की।
यदि दोहराया गया वीडियो आपको परेशान करता है, तो आप GET अनुरोध पैरामीटर में लूप = गलत जोड़ सकते हैं।
डेमो का परीक्षण केवल क्रोम, लोमड़ी और IE11 में किया गया था, अन्य ब्राउज़रों में यह काम नहीं कर सकता है।
सभी डेमो का स्रोत कोड सीधे निर्भर HTML पृष्ठों के अंदर है, निर्भरता के बिना।
पाठ में कई विकृत अंग्रेजी शब्द और अनाड़ी अनुवाद हैं। मैं रूसी शब्दावली में निपुण हूं, सुधारों का स्वागत है।
हम CORS, फ्लैश-वीडियो का उपयोग करने वाली साइटों आदि के साथ संभावित समस्याओं के लिए एक आँख बंद कर लेते हैं। वैक्यूम में केवल गोलाकार परीक्षण।
मैं जावास्क्रिप्ट के माध्यम से गुजर रहा हूँ, इसलिए बहुत नीचे पाठ पर भरोसा मत करो। अधिक निश्चितता के लिए, आप दिए गए समय को 2 से विभाजित कर सकते हैं। मुझे टिप्पणियों में सुधार और सुझाव देखने की उम्मीद है।

कार्यान्वयन के सिद्धांत

एकमात्र विकल्प जो सभी लक्ष्य ब्राउज़रों के लिए एक कोर की अनुमति देगा (क्रोम और फ़ायरफ़ॉक्स पहली जगह में) एक ब्राउज़र एक्सटेंशन है। Google Chrome मूल ग्राहक के रूप में विकल्प, अचानक, केवल Chrome में काम करता है, और मोज़िला फ़ायरफ़ॉक्स में NaCl का समर्थन करने वाला नहीं है। इसके अलावा, मैंने पृष्ठ पर NaCl के तत्वों तक पहुँचने की संभावना का अध्ययन नहीं किया है - यह अच्छी तरह से पता लगा सकता है कि हमारे उद्देश्यों के लिए यह काम नहीं करेगा।

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

विस्तार के साथ वास्तविक समस्या कार्यान्वयन भाषा है - व्याख्या की गई जावास्क्रिप्ट, और जैसा कि हम जानते हैं, व्याख्या की गई भाषा गंभीर गणना के लिए उपयुक्त नहीं हैं। लेकिन इससे कोई फर्क नहीं पड़ता! जावास्क्रिप्ट हाल ही में बहुत अधिक प्यार और अनुकूलन प्राप्त कर रहा है, और काफी संख्या में प्रोग्रामर हैं जो मानते हैं कि जेएस किसी भी एप्लिकेशन को लिखने के लिए उपयुक्त भाषा है और सब कुछ वेब पर चलना चाहिए। इसके अलावा, कई नई तकनीकें उपलब्ध हैं, जैसे कि asm.js, SIMD.js, WebGL और WebCL, जो कि सिद्धांत रूप में, आपको अपनी दिल की इच्छाओं को लागू करने की अनुमति देते हैं, जो केवल मूल से थोड़ी कम गति पर है। तो हमें ब्राउज़र में फ़िल्टर का एक सेट लिखने में कोई गंभीर समस्या नहीं होनी चाहिए?

वास्तव में नहीं।

शुद्ध जावास्क्रिप्ट

शुद्ध JS में फ़िल्टर करना निम्नानुसार काम करता है:

हम दोनों आवश्यक तत्व प्राप्त करते हैं - एक छिपा हुआ वीडियो और कैनवास, इसके शीर्ष पर स्थित।
context.drawImage(video, 0, 0)

का उपयोग करके कैनवास पर वीडियो से एक फ्रेम बनाएं। context.drawImage(video, 0, 0)

, जहां संदर्भ कैनवास से प्राप्त 2d संदर्भ है।
हम context.getImageData(0, 0, width, height)

माध्यम से फ्रेम बफ़र (रंग बाइट्स की एक सरणी) प्राप्त करते हैं। context.getImageData(0, 0, width, height)

।
हम आवश्यक फिल्टर के साथ बफर को संसाधित करते हैं।
हमने प्रोसेस्ड ऐरे को context.putImageData(imageData, 0, 0)

जरिए वापस भेज दिया है। context.putImageData(imageData, 0, 0)

।

यह एल्गोरिथ्म काम करता है और शुद्ध जावास्क्रिप्ट में वास्तविक वीडियो फिल्टरिंग की अनुमति देता है, जिसमें सी के समान कोड की न्यूनतम राशि होती है। यह इनवर्टर फिल्टर के मूल (अनुकूलित नहीं) कार्यान्वयन की तरह दिखेगा, जो फ्रेम के प्रत्येक पिक्सेल में RGB बाइट्स को सम्मिलित करता है:

 outputContext.drawImage(video, 0, 0); var imageData = outputContext.getImageData(0, 0, width, height); var source = imageData.data; var length = source.length; for (var i = 0; i < length; i += 4) { source[i ] = 255 - source[i]; source[i+1] = 255 - source[i+1]; source[i+2] = 255 - source[i+2]; //   } outputContext.putImageData(imageData, 0, 0);

और यद्यपि यह विधि डेमो और सरल चित्रों के लिए काम करती है, यह बहुत जल्दी उच्च संकल्प पर "उड़ा" जाती है। हालाँकि, drawImage

कॉल 1080p पर भी बहुत तेज़ है , getImageData

और putImageData

को जोड़ने के बाद , निष्पादन का समय 20-30 मिलीसेकेंड प्रति पुनरावृत्ति हो जाता है । ऊपर पूर्ण कोड पहले से ही 35-40ms में निष्पादित किया गया है , जो कि PAL वीडियो (25 फ्रेम प्रति सेकंड, 40ms प्रति फ्रेम) के लिए अधिकतम गति है। सभी माप 4770k पर लिए गए थे, जो इस समय सबसे शक्तिशाली होम प्रोसेसर में से एक है। इसका मतलब यह है कि प्रोसेसर की पिछली पीढ़ियों पर किसी भी अधिक या कम जटिल फ़िल्टर का कार्यान्वयन असंभव है , चाहे जावास्क्रिप्ट के प्रदर्शन की परवाह किए बिना । कोई भी, यहां तक कि बहुत तेज़ कोड, कैनवास के भयानक प्रदर्शन पर ही आराम करेगा।

लेकिन जावास्क्रिप्ट अपने आप में बहुत तेज नहीं है। यद्यपि LUT के माध्यम से इनवर्टिंग या रनिंग जैसे सामान्य ऑपरेशन उचित समय में किए जा सकते हैं, किसी भी अधिक या कम जटिल फिल्टर के कारण भयानक लताड़ होती है। शोर जोड़ने वाले फिल्टर का एक सरल कार्यान्वयन (मैथ। आयामी () * प्रत्येक पिक्सेल के लिए 10) पहले से ही 55 मिलीसेकंड की आवश्यकता होती है, और ब्ल्यूअर के लिए 3x3 कोर , नीचे दिए गए कोड में कार्यान्वित, 400ms या 2.5 फ्रेम प्रति सेकंड लेता है।

 function blur(source, width, height) { function blur_core(ptr, offset, stride) { return (ptr[offset - stride - 4] + ptr[offset - stride] + ptr[offset - stride + 4] + ptr[offset - 4] + ptr[offset] + ptr[offset + 4] + ptr[offset + stride - 4] + ptr[offset + stride] + ptr[offset + stride + 4] ) / 9; } var stride = width * 4; for (var y = 1; y < (height - 1); ++y) { var offset = y * stride; for (var x = 1; x < stride - 4; x += 4) { source[offset] = blur_core(source, offset, stride); source[offset + 1] = blur_core(source, offset + 1, stride); source[offset + 2] = blur_core(source, offset + 2, stride); offset += 4; } } }

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

asm.js

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

दुर्भाग्य से, मुझे चयनित कार्यों को asm.js- अनुकूलित कोड में संकलित करने का सरल तरीका नहीं मिला। Emscripten एक सरल दो-लाइन फ़ंक्शन को संकलित करते समय कोड की लगभग 4.5 हजार लाइनें उत्पन्न करता है, और मुझे समझ में नहीं आया कि उचित समय में इसमें से केवल आवश्यक कोड कैसे निकाला जाए। अपने हाथों से asm.js लिखना अभी भी एक खुशी है । किसी भी स्थिति में, asm.js शुद्ध जावास्क्रिप्ट के समान 2d कैनवास संदर्भ के प्रदर्शन में चलेगा।

SIMD.js

SIMD.js जेएस-अनुप्रयोगों के मैनुअल अनुकूलन के लिए एक बहुत ही नई तकनीक है, जो वर्तमान में केवल फ़ायरफ़ॉक्स नाइटली में "समर्थित" है, लेकिन बहुत जल्द सभी लक्ष्य ब्राउज़रों के लिए समर्थन प्राप्त कर सकते हैं । दुर्भाग्य से, API अब केवल दो डेटा प्रकारों के साथ काम करता है , float32x4 और uint32x4, जो पूरे विचार को सबसे वास्तविक 8-बिट फ़िल्टर के लिए बेकार बनाता है। इसके अलावा, Int32x4Array प्रकार अभी तक नाइटली में भी लागू नहीं किया गया है, इसलिए मेमोरी से डेटा का कोई भी लेखन और पढ़ना धीमा और डरावना होगा (जब इस तरह से लागू किया जाता है )। हालाँकि, मैं एक पारंपरिक उलटा फ़िल्टर (इस समय XOR के माध्यम से काम कर रहा) के लिए एक कार्यान्वयन कोड दूंगा:

 function invert_frame_simd(source) { var fff = SIMD.int32x4.splat(0x00FFFFFF); var length = source.length / 4; var int32 = new Uint32Array(source.buffer); for (var i = 0; i < length; i += 4) { var src = SIMD.int32x4(int32[i], int32[i+1], int32[i+2], int32[i+3]); var dst = SIMD.int32x4.xor(src, fff); int32[i+0] = dst.x; int32[i+1] = dst.y; int32[i+2] = dst.z; int32[i+3] = dst.w; } }

फिलहाल, उपरोक्त कोड शुद्ध JS - 1600ms / pass (Nighly उपयोगकर्ता एक और डेमो की कोशिश कर सकते हैं) की तुलना में बहुत धीमी गति से चलाता है। ऐसा लगता है कि आपको इस तकनीक के साथ कम से कम कुछ उपयोगी करने से पहले पर्याप्त समय इंतजार करना होगा। दुर्भाग्य से, यह स्पष्ट नहीं है कि 256-बिट YMM रजिस्टरों के लिए समर्थन कैसे लागू किया जाएगा (int32x4 SSE2 से सामान्य 128-बिट xmm है), और क्या SSSE3 जैसी नई तकनीकों के निर्देश उपलब्ध होंगे। वैसे, SIMD.js आपको धीमे कैनवास से नहीं बचाता है। लेकिन SIMD प्रशंसकों को पहले से ही ब्राउज़र में कुछ परिचित कीड़े मिल सकते हैं!

WebGL

फ़िल्टर लागू करने का एक पूरी तरह से अलग तरीका है WebGL । अपनी सबसे बुनियादी समझ में, WebGL देशी OpenGL तकनीक के लिए JS इंटरफ़ेस है, जो आपको GPU पर कई प्रकार के कोड निष्पादित करने की अनुमति देता है। आमतौर पर इसका उपयोग गेम आदि में ग्राफिक्स के लिए किया जाता है, लेकिन कोई भी इसकी मदद से चित्रों या वीडियो को संसाधित करने के लिए परेशान नहीं करता है। WebGL को भी getImageData के लिए कॉल की आवश्यकता नहीं होती है, जो सिद्धांत में विशिष्ट 20ms अंतराल से बचा जाता है।

लेकिन मुफ्त में कुछ भी नहीं होता है - वेबजीएल एक सामान्य उद्देश्य उपकरण नहीं है और इस एपीआई का उपयोग गैर-ग्राफिकल कोड के लिए एक भयानक दर्द है। आपको बेकार के कोने (जो हमेशा पूरे फ्रेम को कवर करेंगे) की पहचान करने की आवश्यकता होगी, सही ढंग से बनावट (जो पूरे फ्रेम को कवर करेगी) को स्थिति दें, और फिर बनावट के रूप में वीडियो का उपयोग करें । सौभाग्य से, वेबजीएल एक वीडियो से स्वचालित रूप से सही फ़्रेम का अनुरोध करने के लिए पर्याप्त स्मार्ट है। कम से कम क्रोम और लोमड़ी में। IE11 WEBGL11072: INVALID_VALUE: texImage2D: This texture source is not supported

त्रुटि के WEBGL11072: INVALID_VALUE: texImage2D: This texture source is not supported

जाएगा WEBGL11072: INVALID_VALUE: texImage2D: This texture source is not supported

।

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

 float core1[9]; core1[0] = 1.0; core1[1] = 1.0; core1[2] = 0.0; core1[3] = 1.0; core1[4] = 0.0; core1[5] = -1.0; core1[6] = 0.0; core1[7] = -1.0; core1[8] = -1.0;

इसके लिए यह भी आवश्यक है कि पिक्सेल shader एक एकल मान लौटाए - वर्तमान पिक्सेल का रंग, जो प्रति पिक्सेल कई पिक्सेल को संसाधित करने के लिए कुछ फिल्टर के विशिष्ट कार्यान्वयन के लिए असंभव बनाता है (एक ही अवरुद्ध दमन)। इस तरह के फिल्टर को अलग से फिर से लागू और कार्यान्वित करना होगा।

सामान्य तौर पर, CUDA और OpenCL जैसी तकनीकों का आविष्कार अच्छे जीवन से नहीं हुआ था।

WebGL को सही ठहराने के लिए, इसमें वास्तव में अद्भुत वेब प्रदर्शन है ( जिसे आप माप नहीं सकते हैं )। कम से कम, यह प्रीविट फिल्टर को मास्कटूल (चार 3x3 कोर के अधिकतम मूल्य का चयन) से वास्तविक समय में 1080p और उससे अधिक की प्रक्रिया कर सकता है। यदि आप खुद से नफरत करते हैं और थोड़ा असमर्थित कोड प्राप्त करने से डरते नहीं हैं, तो WebGL आपको वीडियो के साथ काफी दिलचस्प चीजें करने की अनुमति देता है। गंभीरता से .js लाइब्रेरी का उपयोग करना अधिक उचित हो सकता है, जो टेम्पलेट WebGL कोड के भाग को छुपाता है, लेकिन यह वीडियो रिज़ॉल्यूशन परिवर्तनों को संभालने या अस्थायी फ़िल्टर को लागू करने के लिए पर्याप्त उन्नत नहीं हो सकता है।

यदि आप खुद से प्यार करते हैं, तो सबसे अधिक संभावना है कि आप WebCL जैसी किसी चीज का उपयोग करना चाहेंगे।

WebCL

लेकिन यह काम नहीं करेगा। विकिपीडिया का कहना है कि इस वर्ष की 19 मार्च को वेबसीएल 1.0 को अंतिम रूप दिया गया था, जिससे तकनीक पूरी सूची में सबसे छोटी थी, यहां तक कि SIMD.js. और, SIMD.js के विपरीत, निकट भविष्य में फ़ायरफ़ॉक्स में इसका समर्थन नहीं किया जाएगा । मैंने क्रोम के लिए इसी तरह के समाधान के बारे में कहीं पढ़ा, लेकिन लिंक खो दिया। इसलिए WebCL वर्तमान में एक स्पष्ट भविष्य के बिना एक मृत तकनीक है।

निष्कर्ष

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

एक ब्राउज़र में पोस्ट-प्रोसेसिंग वीडियो की संभावना का मूल्यांकन