एक हजार और एक gif

सभी को नमस्कार!
मैं आपको HTML5 और JS का उपयोग करके वेबकैम से gif'ok रिकॉर्डिंग के लिए एक साधारण मनोरंजन सेवा के निर्माण की कहानी बताना चाहूंगा। रात में खुले स्रोत के समाधान के आधार पर घुटने पर समाधान कैसे उत्पन्न होता है, भले ही छोटा हो, लेकिन उस लहर की लोकप्रियता में वृद्धि जिससे पिछले छह महीनों के लिए इस सेवा से लाभ उठाने वाले आगंतुकों की एक छोटी संख्या आई।

यह सब अभी शुरू हुआ

गर्मियों के अंत में, एक सामान्य कामकाजी दिन पर, गीथहब के विस्तार की जुताई करते हुए, मैं देशी जेएस और एचटीएमएल 5 में एक दिलचस्प स्क्रिप्ट ( फेसटोगिफ़ ) भर में आया था जो आपको वेबकैम से जीआईएफ एनीमेशन में वीडियो रिकॉर्ड करने की अनुमति देता है। यहां तक ​​कि एक कामकाजी डेमो जोड़ा गया था , तैयार वीडियो को imgur सेवा पर अपलोड करने या आपको सीधे उन्हें अपनी हार्ड ड्राइव पर सहेजने की अनुमति देता है।
यह विचार मुझे बहुत दिलचस्प लगा और मैंने इसे एक स्वतंत्र सेवा के रूप में थोड़े परिवर्तन के साथ लागू करने का निर्णय लिया।
जल्दी से नहीं कहा। उस शाम मैंने रिपॉजिटरी को forked किया, VGIF.RF डोमेन को पंजीकृत किया, DigitalOcean पर VPS ($ 5 के लिए सबसे सस्ती कीमत) उठाया और एक साधारण php स्क्रिप्ट लिखी, जो सर्वर पर वहीं वीडियो स्टोर करती है।
सर्वर पर संसाधनों को बचाने के लिए, मैंने केवल Nginx और PHP-FPM स्थापित किया है।



साइट का पहला संस्करण

अगली सुबह, मैंने एक बंद समुदाय के दोस्तों को नई सेवा का लिंक साझा किया। और सेवा अच्छी तरह से मिली =) धीरे-धीरे, काम के बीच में, मैंने छोटे ट्वीक्स - वीके और ट्विटर पर साझाकरण बटन जोड़े, और जेएस को भी संपादित किया ताकि केवल एक आकार की क्लिप (एकीकरण के लिए) बनाई जा सके। उसी दिन की रात, मुझे एहसास हुआ कि रूसी संघ के क्षेत्र में एक डोमेन एक बुरा विचार है और एक अधिक सुंदर और दिलचस्प togif.me डोमेन पंजीकृत है, जिस पर यह सेवा आज भी बनी हुई है।
लंबे समय से प्रतीक्षित शनिवार आया था, और सुबह मैंने साइट को लेने का फैसला किया। शुरुआत करने के लिए, मैंने चित्रों के साथ और खुद को मुख्य भूमिका में एक बड़ा और सुंदर मैनुअल बनाया, और फिर इसे पीकाबू मनोरंजन स्थल पर पोस्ट किया और मीनारों की प्रतीक्षा करने लगा (रेडिट और हैबर के समान रेटिंग सिस्टम है)। और यहां एक के बाद एक टिप्पणियां दिखाई देने लगीं, प्लसस मीनारों के साथ चले गए, और फिर मैंने देखा कि वीपीएस पर मुक्त स्थान धीरे-धीरे कम होने लगा। देर से उसने यैंडेक्स से पेंच लड़ाया। मित्रीका। देर शाम तंग आकर उसने लगभग 700 अद्वितीय आगंतुकों को दिखाया। उस समय, Picabu पर पोस्ट पर पहले से ही लगभग 500 टिप्पणियां थीं। खैर, तब किसी ने जोय्रेक्टर पर पोस्ट में सेवा के लिए एक लिंक पोस्ट किया और फिर से ट्रैफ़िक बढ़ गया! रविवार को, मीट्रिक काउंटर ने लगभग 8 हजार आगंतुकों और 12 हजार विचारों को देखा!

तकनीकी विवरण

और तब मुझे एहसास हुआ कि मैंने एक कष्टप्रद गलती की है। वीडियो को डाउनलोड या डाउनलोड किया जा सकता है, लेकिन जब उपयोगकर्ता को डाउनलोड किया गया था तो उसे केवल एक उबाऊ प्रत्यक्ष लिंक दिया गया था gif फ़ाइल। डाउनलोड किए गए वीडियो की पर्याप्त सूची नहीं थी ताकि आप न केवल अपने रिकॉर्ड कर सकें, बल्कि साइट पर अन्य आगंतुकों को भी देख सकें!
यह "सेवा" को फिर से लिखने का समय है जिसमें 1 स्थिर HTML पृष्ठ, 1 खुला स्रोत js और upload.php स्क्रिप्ट शामिल है।

विकल्प 1

चूंकि आगंतुकों का प्रवाह बाधित नहीं हुआ था, और मुझे यहां कैटलॉग चाहिए था और अब, मैंने एक साधारण MySQL डेटाबेस स्कीमा में रखा, Idiorm को OOP स्टाइल डेटाबेस से कनेक्ट किया, कैटलॉग पृष्ठों और चित्रों को स्वयं प्रदर्शित करने के लिए सरल मार्ग लिखे, और प्रत्येक क्लिप पर टिप्पणी करने की अनुमति देने के लिए Disqus भी जोड़ा। ।
कहीं उसी अवधि में मैंने रोलर्स के संपीड़न के साथ प्रयोग करना शुरू किया और यह पता चला कि इमेजमैजिक उनमें से प्रत्येक को कम से कम 30%, या यहां तक ​​कि 70% =) से संकुचित करता है।
यह इस तथ्य के कारण है कि वीडियो ब्राउज़र में जेएस के माध्यम से उत्पन्न होते हैं जब प्रत्येक फ्रेम को अलग से हटा दिया जाता है और फिर उन्हें वीडियो में जोड़ा जाता है। इस दृष्टिकोण के साथ, फ्रेम के समान भागों को प्रत्येक फ्रेम में दोहराया जाता है।

इस समय के दौरान, आगंतुकों की संख्या धीरे-धीरे पिघल गई (सितंबर के दौरान 1000 अद्वितीय से 300 तक), लेकिन यह मुझे बहुत परेशान नहीं करता था। यह सेवा विशुद्ध रूप से मेरी खुशी के लिए बनाई गई थी और मुझे खुशी थी कि हर नए रिकॉर्ड किए गए वीडियो को। यह महसूस करना बहुत सुखद है कि मैंने कुछ बहुत ही सरल किया और पूरी तरह से अपना नहीं, बल्कि उपयोगी था।

इसके बाद, मैंने Yii फ्रेमवर्क पर सब कुछ फिर से लिखने का फैसला किया और यह निकला:

विकल्प 2

नवाचार:

• "गैर-सार्वजनिक" क्लिप (कैटलॉग में प्रदर्शित नहीं) के लिए चेकमार्क - चयनकर्ता भंडारण में नए डाउनलोड किए गए क्लिप का भंडारण
• थंबनेल छवि के साथ थंबनेल पीढ़ी
• साइट के लिंक के साथ रोलर्स पर वॉटरमार्क का अनुप्रयोग (रिकॉर्डिंग के दौरान सही)
• एफएक्यू के साथ अलग पेज
• प्रत्येक वीडियो के विचारों की संख्या की गिनती
• वर्णों की एक यादृच्छिक संख्या के साथ सुरक्षित लिंक उत्पन्न करना और दिनांक जोड़ना (/image/4r32njfi3.gif के बजाय यह बन गया / 2014/04 / 5e7eaed8bd.gif)
• रिकॉर्डिंग "दर्पण" करने की क्षमता

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

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

function recorder_fn(ctx, gif, frames) { var coords = facetogif.recorderFrame(), drawW = facetogif.gifSettings.w, drawH = facetogif.gifSettings.h; if(facetogif.p_flag==0 && facetogif.scale==1) { ctx.translate(coords.w, 0); ctx.scale(-1, 1); } return function () { if (facetogif.video.src) { ctx.drawImage(facetogif.video, coords.x,coords.y, coords.w,coords.h); if (facetogif.scale==1) { //    =) ctx.translate(coords.w, 0); ctx.scale(-1, 1); ctx.fillStyle = "white"; ctx.font = "normal 20px Arial"; ctx.textBaseline = 'top'; ctx.fillText("ToGIF.me", 220, 220); ctx.translate(coords.w, 0); ctx.scale(-1, 1); } else { //  begin ctx.fillStyle = "white"; ctx.font = "normal 20px Arial"; ctx.textBaseline = 'top'; ctx.fillText("ToGIF.me", 220, 220); //  end } var frame = ctx.getImageData(0,0, drawW,drawH); frames.push(frame); gif.addFrame(frame, {delay: facetogif.gifSettings.ms}); } else { clearInterval(recorder.interval); facetogif.recIndicator.classList.remove('on'); recorder.state = recorder.states.IDLE; } } } 

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

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

इस समय के दौरान, मुख्य साइट VPS से DigitalOcean में क्लाउड वर्चुअल मशीन के लिए चयनकर्ता में स्थानांतरित होने में कामयाब रही, और पुराने वीडियो यथावत बने रहे और स्वत: रीडायरेक्ट करने के लिए old.togif.me/image/xxx togif.me/image/xxx.gif जैसे लिंक का काम करने लगे .gif

फिर, प्रशंसक के लिए साइट के लिए महत्वपूर्ण फायदे और समाधान की उच्च लागत ($ 5 + 300 रूबल + 150 रूबल प्रत्येक माह) के अभाव में, बचत शुरू करने का निर्णय लिया गया।

नए कॉन्फ़िगरेशन में शामिल हैं - सर्वर पर एक शक्तिशाली साझा होस्टिंग, नए वीडियो के लिए एक बाल्टी और चयन भंडारण। 10Gb gif के प्रत्येक भाग के लिए, मैंने एक अलग उपडोमेन बनाने का निर्णय लिया और, इस मात्रा के सेट के आधार पर, मैंने उन्हें साझा होस्टिंग के रूप में हस्तांतरित करना शुरू किया बहुत जगह है, ट्रैफ़िक सीमित नहीं है और वापसी की गति इतनी महत्वपूर्ण नहीं है क्योंकि वीडियो नए नहीं हैं।
उच्च गति वाले क्लाउड स्टोरेज केवल नए वीडियो के लिए बने हुए हैं जो उच्च गति पर दिए और संग्रहीत किए गए हैं। अब साइट की लागत लगभग 200 रूबल है। प्रति माह, जो मूल रूप से सहनीय है।

वर्तमान प्रौद्योगिकी ढेर:
नेग्नेक्स, इमेजमेगिक, एचटीएमएल 5, जेएस, पीएचपी, वाईआईआई, माईएसक्यूएल

अनारक्षित समस्याएँ:

• सफारी में वीडियो रिकॉर्ड करना काम नहीं करता है
• क्लिप की रिकॉर्डिंग Iphone, Ipad में काम नहीं करती है

कुछ आँकड़े:

• सेवा का शुभारंभ - 08.22.13
• इस अवधि के लिए ट्रैफ़िक - ~ 1 टीबी
• अपलोड किए गए वीडियो - ~ 15000
• अद्वितीय आगंतुक - ~ 80 000

निष्कर्ष:

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

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