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

Sam Dutton
François Beaufort
François Beaufort
GitHub

Chrome वीडियो में ऐल्फ़ा ट्रांसपेरेंसी

Chrome 31 में अब WebM फ़ॉर्मैट में वीडियो के अल्फा ट्रांसपेरेंसी की सुविधा काम करती है.

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

simpl.info/videoalpha पर इसका डेमो उपलब्ध है. यह थोड़ा-बहुत असली नहीं है और किनारों पर थोड़ा-बहुत खराब है (सचमुच), लेकिन आपको इसका आइडिया मिल गया है!

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

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

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

Adobe After Effects जैसे मालिकाना टूल का इस्तेमाल करके भी, वीडियो में बदलाव किए जा सकते हैं. ये टूल इस्तेमाल करना आसान होते हैं.

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

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

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

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

'द ग्रेट गैट्सबी' के वीएफ़एक्स रील से पता चलता है कि ग्रीन स्क्रीन की मदद से कितनी बेहतरीन चीज़ें की जा सकती हैं.

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

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

2. ग्रीन स्क्रीन वीडियो से रॉ अल्फा वीडियो बनाना

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

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

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

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

    इसके अलावा, फ़ाइलों को सीधे WebM में एन्कोड करने के लिए, ffmpeg कमांड का इस्तेमाल करें. जैसे:

    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-tools का इस्तेमाल करके:

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

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

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

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

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

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

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

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

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

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

काम के संसाधन