Chrome वीडियो में अल्फ़ा ट्रांसपेरंसी (पारदर्शिता)

सैम डटन
फ्रांकोइस ब्यूफ़ोर्ट
फ्रांकोइस ब्यूफ़ोर्ट
GitHub

Chrome वीडियो में अल्फ़ा पारदर्शिता

Chrome 31 अब WebM में वीडियो ऐल्फ़ा पारदर्शिता का समर्थन करता है.

दूसरे शब्दों में, किसी ऐल्फ़ा चैनल के साथ WebM (VP8 और VP9) में एन्कोड किए गए 'ग्रीन स्क्रीन' वीडियो चलाते समय Chrome, ऐल्फ़ा चैनल को ध्यान में रखता है. इसका मतलब है कि वेब पेजों, इमेज या दूसरे वीडियो पर, पारदर्शी बैकग्राउंड के साथ वीडियो चलाए जा सकते हैं.

SIMpl.info/videoalpha पर एक डेमो मौजूद है. कुछ हद तक असली है और किनारों से थोड़ा मोटे तौर पर पता चलता है (असल में), लेकिन आपको समझ आ गया होगा!

ऐल्फ़ा वीडियो बनाने का तरीका

हमने जिस तरीके के बारे में बताया है उसमें ओपन सोर्स टूल ब्लेंडर और ffmpeg का इस्तेमाल किया जाता है:

  1. किसी एक ही रंग के बैकग्राउंड, जैसे कि चमकदार हरे रंग के पर्दे के सामने अपने सब्जेक्ट का वीडियो बनाएं.
  2. पारदर्शिता डेटा के साथ PNG स्टिल इमेज की कैटगरी बनाने के लिए, वीडियो को प्रोसेस करें.
  3. वीडियो फ़ॉर्मैट में कोड बदलें (इस मामले में, WebM).

इस काम को करने के लिए मालिकाना हक वाले टूल भी मौजूद हैं, जैसे कि Adobe Afterparty, जो आपको आसान लग सकता है.

1. ग्रीन स्क्रीन पर वीडियो बनाएं

सबसे पहले, आपको अपने सब्जेक्ट को इस तरह से रिकॉर्ड करना होगा कि बाद में प्रोसेस करके, बैकग्राउंड में मौजूद हर चीज़ 'हटाया' (पारदर्शी बनाया जा सके).

इसका सबसे आसान तरीका यह है कि एक ही रंग के बैकग्राउंड, जैसे स्क्रीन या पर्दे के सामने शूट करें. आम तौर पर, हरे या नीले रंग का इस्तेमाल किया जाता है. इसकी वजह यह है कि उनकी त्वचा का रंग अलग-अलग होता है.

ग्रीन स्क्रीन वाले वीडियो (जिसे क्रोमा की के नाम से भी जाना जाता है) बनाने के लिए, कई गाइड ऑनलाइन हैं. साथ ही, ग्रीन और ब्लू स्क्रीन बैकग्राउंड खरीदने के लिए कई जगहें इस्तेमाल की जा सकती हैं. इसके अलावा, क्रोमा की-पेंट से बैकग्राउंड भी पेंट किया जा सकता है.

द ग्रेट गैट्सबी वीएफ़एक्स रील में ग्रीन स्क्रीन की मदद से बहुत कुछ देखा जा सकता है.

वीडियो रिकॉर्ड करने से जुड़ी कुछ सलाह:

  • पक्का करें कि आपके सब्जेक्ट में ऐसे कपड़े या चीज़ें न हों जिनका रंग बैकड्रॉप से मिलता-जुलता हो. ऐसा न होने पर, वे फ़ाइनल वीडियो में 'छेद' के तौर पर दिखेंगे. छोटे लोगो या गहनों से भी परेशानी हो सकती है.
  • एक जैसी रोशनी का इस्तेमाल करें, और परछाई से बचें: बैकग्राउंड में रंगों की सबसे छोटी रेंज होनी चाहिए, जिसे बाद में पारदर्शी बनाना ज़रूरी हो.
  • कई बिखरे हुई लाइटों का इस्तेमाल करने से, परछाई और बैकग्राउंड के रंग में होने वाले उतार-चढ़ाव से बचा जा सकता है.
  • चमकीली बैकग्राउंड से बचें: मैट सतह पर रोशनी बेहतर तरीके से फैलती है.

2. ग्रीन स्क्रीन वीडियो से, रॉ ऐल्फ़ा वीडियो बनाएं

यहां दिया गया तरीका, ग्रीन स्क्रीन वीडियो से रॉ ऐल्फ़ा वीडियो बनाने का एक तरीका बताता है:

  1. ग्रीन स्क्रीन पर वीडियो शूट करने के बाद, वीडियो को ऐल्फ़ा डेटा वाली PNG फ़ाइलों के कलेक्शन में बदलने के लिए, ब्लेंडर जैसे ओपन सोर्स टूल का इस्तेमाल किया जा सकता है. ग्रीन स्क्रीन को हटाने और उसे पारदर्शी बनाने के लिए, ब्लेंडर की कलर कीिंग का इस्तेमाल करें. (ध्यान दें कि PNG ज़रूरी नहीं है: ऐल्फ़ा चैनल का डेटा सुरक्षित रखने वाला कोई भी फ़ॉर्मैट सही है.)

  2. ffmpeg जैसे किसी ओपन सोर्स टूल का इस्तेमाल करके PNG फ़ाइलों के अरे को किसी रॉ YUVA वीडियो में बदलें:

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    इसके अलावा, इस तरह के fmpeg कमांड का इस्तेमाल करके, फ़ाइलों को सीधे WebM में कोड में बदला जा सकता है:

    ffmpeg -i image%04d.png output.webm

अगर आपको कोई ऑडियो जोड़ना है, तो उसे म्यूट करने के लिए ffmpeg का इस्तेमाल करें. ऐसा करने के लिए, इस तरह से निर्देश दें:

ffmpeg -i image%04d.png -i audio.wav output.webm

3. ऐल्फ़ा वीडियो को WebM में एन्कोड करें

रॉ ऐल्फ़ा वीडियो, WebM में दो तरीकों से कोड में बदले जा सकते हैं.

  1. ffmpeg के साथ: हमने WebM ऐल्फ़ा वीडियो को कोड में बदलने के लिए ffmpeg में सहायता जोड़ी है.

    ऐल्फ़ा डेटा वाले किसी इनपुट वीडियो के साथ ffmpeg का इस्तेमाल करें, आउटपुट फ़ॉर्मैट कोWebM पर सेट करें, और निर्देशों के मुताबिक, कोड में बदलने का तरीका अपने-आप सही फ़ॉर्मैट में हो जाएगा. (ध्यान दें: यह सुविधा काम करे, इसके लिए आपको फ़िलहाल git ट्री से ffmpeg का सबसे नया वर्शन पाना होगा.)

    निर्देश का उदाहरण:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. webm-टूल का इस्तेमाल करके:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools, WebM से जुड़े आसान ओपन सोर्स टूल का एक सेट है, जिसे WebM प्रोजेक्ट के लेखक मैनेज करते हैं. इनमें ऐल्फ़ा पारदर्शिता के साथ WebM वीडियो बनाने के लिए एक टूल शामिल है.

    Alphabet_encoder के साथ काम करने वाले विकल्पों की सूची देखने के लिए, --help के साथ बाइनरी चलाएं.

4. Chrome में वीडियो चलाना

कोड में बदली गई WebM फ़ाइल को Chrome में चलाने के लिए, बस फ़ाइल को वीडियो एलिमेंट के सोर्स के तौर पर सेट करें.

उन्होंने यह कैसे किया?

हमने Google के इंजीनियर विग्नेश वेंकटसुब्रमण्यम से इस प्रोजेक्ट पर उनके काम के बारे में बात की. उन्होंने इसमें शामिल मुख्य चुनौतियों के बारे में जानकारी दी:

  • VP8 बिटस्ट्रीम, ऐल्फ़ा चैनल के लिए काम नहीं करती थी. इसलिए हमें VP8 बिटस्ट्रीम को नुकसान पहुंचाए बिना और मौजूदा प्लेयर को नुकसान पहुंचाए बिना ऐल्फ़ा को शामिल करना पड़ा.
  • Chrome का रेंडरर, वीडियो को ऐल्फ़ा वर्शन में रेंडर नहीं कर सकता था.
  • Chrome में कई हार्डवेयर/GPU डिवाइसों के लिए कई रेंडरिंग पाथ होते हैं. ऐल्फ़ा वीडियो को रेंडर करने के लिए हर रेंडरिंग पाथ को बदलना पड़ा.

हम वीडियो ऐल्फ़ा ट्रांसपेरेंसी के लिए बहुत सारे दिलचस्प इस्तेमाल के बारे में सोच सकते हैं: गेम, इंटरैक्टिव वीडियो, मिलकर कहानी सुनाने की कला (बैकग्राउंड वीडियो/इमेज में अपना वीडियो जोड़ना), वैकल्पिक किरदारों या प्लॉट वाले वीडियो, ऐसे वेब ऐप्लिकेशन जिनमें ओवरले वीडियो कॉम्पोनेंट का इस्तेमाल किया गया हो.

फ़िल्म बनाते रहें! अगर आप ऐल्फ़ा पारदर्शिता के साथ कुछ शानदार बनाते हैं, तो हमें बताएं.

मददगार संसाधन