1. खास जानकारी
यह कोडलैब आपको कास्ट डीबग लॉगर को, मौजूदा कस्टम वेब रिसीवर ऐप्लिकेशन में जोड़ने के तरीके के बारे में बताएगा.
Google Cast क्या है?
Google Cast SDK टूल की मदद से, आपके ऐप्लिकेशन को Google Cast की सुविधा वाले डिवाइसों पर कॉन्टेंट चलाने और उन पर वीडियो को कंट्रोल करने की सुविधा मिलती है. यह आपको Google Cast डिज़ाइन चेकलिस्ट के आधार पर ज़रूरी यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट देता है.
Google Cast डिज़ाइन चेकलिस्ट इसलिए दी गई है, ताकि Cast के साथ काम करने वाले सभी प्लैटफ़ॉर्म पर, कास्ट करने वालों के अनुभव को आसान बनाया जा सके और उनका अनुमान लगाया जा सके.
हम क्या बनाने जा रहे हैं?
इस कोडलैब को पूरा करने के बाद, आपके पास कस्टम वेब रिसीवर होगा, जिसे कास्ट डीबग लॉगर के साथ इंटिग्रेट किया जाएगा.
ज़्यादा जानकारी और ज़्यादा जानकारी के लिए, कास्ट डीबग लॉगर गाइड देखें.
आप इन चीज़ों के बारे में जानेंगे
- वेब रिसीवर डेवलपमेंट के लिए अपना एनवायरमेंट कैसे सेट अप करें.
- डीबग लॉगर को अपने कास्ट रिसीवर में इंटिग्रेट करने का तरीका जानें.
आपको इनकी ज़रूरत होगी
- Google Chrome का नया ब्राउज़र.
- एचटीटीपीएस होस्टिंग की सेवा, जैसे कि Firebase होस्टिंग या ngrok.
- Google Cast डिवाइस, जैसे कि Chromecast या Android TV, जिसे इंटरनेट ऐक्सेस के साथ कॉन्फ़िगर किया गया हो.
- एचडीएमआई इनपुट वाला टीवी या मॉनिटर.
अनुभव
- आपके पास कास्ट करने का पहले का अनुभव होना चाहिए. साथ ही, आपको पता होना चाहिए कि कास्ट करने वाला वेब रिसीवर कैसे काम करता है.
- आपके पास वेब डेवलपमेंट की पहले से जानकारी होनी चाहिए.
- इसके लिए, आपके पास टीवी देखने के बारे में पहले से जानकारी भी होनी चाहिए :)
आपको इस ट्यूटोरियल का इस्तेमाल कैसे करना है?
वेब ऐप्लिकेशन बनाने के अपने अनुभव के लिए आपकी रेटिंग क्या होगी?
आपके हिसाब से टीवी देखने का अनुभव कैसा रहा?
2. सैंपल कोड पाएं
अपने कंप्यूटर पर सभी सैंपल कोड डाउनलोड किए जा सकते हैं...
और डाउनलोड की गई ZIP फ़ाइल को अनपैक करें.
3. रिसीवर को स्थानीय तौर पर डिप्लॉय किया जा रहा है
कास्ट डिवाइस के साथ वेब रिसीवर का इस्तेमाल करने के लिए, इसे किसी ऐसी जगह पर होस्ट करना होगा जहां आपका कास्ट डिवाइस इसे ऐक्सेस कर सके. अगर आपके पास ऐसा सर्वर पहले से मौजूद है जिस पर https काम करता है, तो नीचे दिए गए निर्देशों को छोड़ दें और यूआरएल को नोट कर लें, क्योंकि आपको अगले सेक्शन में इसकी ज़रूरत पड़ेगी.
अगर आपके पास इस्तेमाल के लिए कोई सर्वर नहीं है, तो Firebase होस्टिंग या ngrok का इस्तेमाल किया जा सकता है.
सर्वर चलाएं
अपनी पसंद की सेवा सेट अप करने के बाद, app-start
पर जाएं और सर्वर चालू करें.
अपने होस्ट किए गए रिसीवर के यूआरएल को नोट कर लें. इसका इस्तेमाल अगले सेक्शन में किया जाएगा.
4. Cast Developer Console में ऐप्लिकेशन रजिस्टर करना
Chromecast डिवाइसों पर, इस कोडलैब में मौजूद कस्टम वेब रिसीवर को चलाने के लिए, अपना ऐप्लिकेशन रजिस्टर करना ज़रूरी है. ऐप्लिकेशन रजिस्टर करने के बाद, आपको एक ऐप्लिकेशन आईडी मिलेगा. इस आईडी का इस्तेमाल करके, भेजने वाले के ऐप्लिकेशन को एपीआई कॉल करना होगा. उदाहरण के लिए, रिसीवर ऐप्लिकेशन को लॉन्च करने के लिए.
"नया ऐप्लिकेशन जोड़ें" पर क्लिक करें
"कस्टम रिसीवर" चुनें. हम इसे बना रहे हैं.
पैसे पाने वाले नए व्यक्ति की जानकारी डालें. पक्का करें कि आप आखिरी सेक्शन के यूआरएल का इस्तेमाल कर रहे हों. जिस नए व्यक्ति ने आपका ऐप्लिकेशन पाने वाले व्यक्ति को असाइन किया है वह ऐप्लिकेशन आईडी नोट कर लें.
आपको अपने Google Cast डिवाइस को भी रजिस्टर करना होगा, ताकि इसे पब्लिश करने से पहले ही वह आपके रिसीवर ऐप्लिकेशन को ऐक्सेस कर सके. रिसीवर ऐप्लिकेशन को पब्लिश करने के बाद, यह Google Cast की सुविधा वाले सभी डिवाइसों पर उपलब्ध होगा. इस कोडलैब के लिए, हमारा सुझाव है कि रिसीवर के ऐसे ऐप्लिकेशन के साथ काम करें जिसे अभी तक पब्लिश नहीं किया गया है.
"नया डिवाइस जोड़ें" पर क्लिक करें
अपने कास्ट डिवाइस के पीछे प्रिंट किया गया सीरियल नंबर डालें और उसे कोई जानकारी देने वाला नाम दें. Google Cast SDK डेवलपर कंसोल को ऐक्सेस करते समय, Chrome में अपनी स्क्रीन को कास्ट करके भी अपना सीरियल नंबर मिल सकता है
आपके रिसीवर और डिवाइस को टेस्ट के लिए तैयार होने में 5-15 मिनट लगेंगे. 5 से 15 मिनट इंतज़ार करने के बाद, आपको अपना कास्ट डिवाइस फिर से चालू करना होगा.
5. सैंपल ऐप्लिकेशन चलाएं
जब तक हम अपने नए वेब रिसीवर के टेस्टिंग के लिए तैयार होने का इंतज़ार करते हैं, तब तक हम देखते हैं कि पूरा हो चुका वेब रिसीवर ऐप्लिकेशन कैसा दिखता है. हम जो रिसीवर बनाएंगे उसमें अडैप्टिव बिटरेट स्ट्रीमिंग की मदद से मीडिया चलाया जा सकता है.
- अपने ब्राउज़र में, कमांड और कंट्रोल (सीएसी) टूल खोलें.
- डिफ़ॉल्ट
CC1AD845
रिसीवर आईडी का इस्तेमाल करें औरSET APP ID
बटन पर क्लिक करें. - सबसे ऊपर बाईं ओर मौजूद 'कास्ट करें' बटन पर क्लिक करें और उस डिवाइस को चुनें जिस पर Google Cast चालू है.
- सबसे ऊपर मौजूद
LOAD MEDIA
टैब पर जाएं.
- अनुरोध के टाइप वाले रेडियो बटन को बदलकर
LOAD
करें. - सैंपल वीडियो चलाने के लिए,
SEND REQUEST
बटन पर क्लिक करें. - वीडियो आपके Google Cast वाले डिवाइस पर चलना शुरू हो जाएगा, ताकि यह दिखाया जा सके कि डिफ़ॉल्ट रिसीवर के साथ रिसीवर की बुनियादी सुविधाएं कैसी दिखती हैं.
6. शुरुआती प्रोजेक्ट तैयार करना
आपके डाउनलोड किए गए स्टार्ट ऐप्लिकेशन के लिए, हमें Google Cast के लिए सहायता जोड़नी होगी. यहां Google Cast की कुछ शब्दावली दी गई है, जिनका इस्तेमाल हम इस कोडलैब में करेंगे:
- भेजने वाला ऐप्लिकेशन, मोबाइल डिवाइस या लैपटॉप पर चलता है,
- रिसीवर ऐप्लिकेशन, Google Cast या Android TV डिवाइस पर काम करता है.
अब आप अपने पसंदीदा टेक्स्ट एडिटर का इस्तेमाल करके, स्टार्टर प्रोजेक्ट पर काम करने के लिए तैयार हैं:
- सैंपल कोड डाउनलोड करने के लिए,
app-start
डायरेक्ट्री चुनें. js/receiver.js
औरindex.html
खोलें
ध्यान दें, इस कोडलैब के लिए काम करते समय, http-server
को वे बदलाव दिखेंगे जो आपने किए हैं. अगर ऐसा नहीं होता है, तो http-server
को बंद करें और रीस्टार्ट करके देखें.
ऐप्लिकेशन डिज़ाइन
रिसीवर ऐप्लिकेशन, कास्ट सेशन शुरू करता है और तब तक स्टैंडबाय मोड में रहता है, जब तक कोई भेजने वाले व्यक्ति से लोड करने का अनुरोध (जैसे, मीडिया चलाने के लिए निर्देश) नहीं आता.
इस ऐप्लिकेशन में एक मुख्य व्यू होता है, जो index.html
में तय किया जाता है. साथ ही, इसमें js/receiver.js
नाम की एक JavaScript फ़ाइल होती है, जिसमें वह सभी लॉजिक होते हैं जिनसे रिसीवर को काम करने में मदद मिलती है.
index.html
इस एचटीएमएल फ़ाइल में, हमारे रिसीवर ऐप्लिकेशन के सभी यूज़र इंटरफ़ेस (यूआई) शामिल हैं.
receiver.js
यह स्क्रिप्ट हमारे रिसीवर ऐप्लिकेशन के लिए सारे लॉजिक को मैनेज करती है.
अक्सर पूछे जाने वाले सवाल
7. CastDebugLogger API को इंटिग्रेट करने का तरीका
कास्ट पाने वाले का SDK टूल, डेवलपर को CastDebugLogger API का इस्तेमाल करके, आपके रिसीवर ऐप्लिकेशन को आसानी से डीबग करने का एक और विकल्प देता है.
ज़्यादा जानकारी और ज़्यादा जानकारी के लिए, कास्ट डीबग लॉगर गाइड देखें.
डेटा लेयर में इवेंट बनाने की प्रोसेस
इस स्क्रिप्ट को index.html
में, वेब रिसीवर SDK टूल स्क्रिप्ट के ठीक बाद <head>
टैग में शामिल करें:
<head>
...
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<!-- Cast Debug Logger -->
<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>
js/receiver.js
में, फ़ाइल में सबसे ऊपर और playerManager
के नीचे, CastDebugLogger
इंस्टेंस पाएं और READY
इवेंट लिसनर में लॉगर को चालू करें:
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
}
});
डीबग लॉगर के चालू होने पर, रिसीवर पर DEBUG MODE
का ओवरले दिखता है.
खिलाड़ी इवेंट लॉग करें
CastDebugLogger
का इस्तेमाल करके, कास्ट वेब रिसीवर के SDK टूल से ट्रिगर किए गए प्लेयर इवेंट को आसानी से लॉग किया जा सकता है. साथ ही, इवेंट डेटा को लॉग करने के लिए अलग-अलग लॉगर लेवल का इस्तेमाल किया जा सकता है. loggerLevelByEvents
कॉन्फ़िगरेशन में, cast.framework.events.EventType
और cast.framework.events.category
के बाद, लॉग किए जाने वाले इवेंट की जानकारी दी जाती है.
प्लेयर के CORE
इवेंट ट्रिगर होने या mediaStatus
का कोई बदलाव ब्रॉडकास्ट होने पर, लॉग करने के लिए READY
इवेंट लिसनर के नीचे इन चीज़ों को जोड़ें:
...
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};
लॉग मैसेज और कस्टम टैग
CastDebugLogger API से, आपको ऐसे लॉग मैसेज बनाने में मदद मिलती है जो रिसीवर के डीबग ओवरले में अलग-अलग रंगों में दिखते हैं. सबसे ज़्यादा से सबसे कम प्राथमिकता के क्रम में, सूची में दिए गए लॉग के इन तरीकों का इस्तेमाल करें:
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
लॉग के हर तरीके के लिए, पहला पैरामीटर कस्टम टैग होना चाहिए और दूसरा पैरामीटर लॉग मैसेज होना चाहिए. टैग कोई भी ऐसी स्ट्रिंग हो सकती है जो आपके लिए काम की हो.
लॉग को दिखाते समय, अपने LOAD
इंटरसेप्टर में लॉग जोड़ें.
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
loadRequestData => {
// Listed in order from highest to lowest priority.
castDebugLogger.error(LOG_TAG, 'Test error log');
castDebugLogger.warn(LOG_TAG, 'Test warn log');
castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);
castDebugLogger.debug(LOG_TAG, 'Test debug log');
return loadRequestData;
}
);
हर कस्टम टैग के लिए, loggerLevelByTags
में लॉग लेवल सेट करके, यह कंट्रोल किया जा सकता है कि डीबग ओवरले पर कौनसे मैसेज दिखें. उदाहरण के लिए, लॉग लेवल cast.framework.LoggerLevel.DEBUG
वाले कस्टम टैग को चालू करने पर, गड़बड़ी, चेतावनी, जानकारी, और डीबग लॉग मैसेज के साथ जोड़े गए सभी मैसेज दिखेंगे. दूसरा उदाहरण यह है कि WARNING
लेवल वाले कस्टम टैग को चालू करने से, सिर्फ़ गड़बड़ी दिखेगी और लॉग मैसेज चेतावनी भी मिलेंगे.
loggerLevelByTags
कॉन्फ़िगरेशन ज़रूरी नहीं है. अगर किसी कस्टम टैग को लॉगर लेवल के लिए कॉन्फ़िगर नहीं किया गया है, तो सभी लॉग मैसेज, डीबग ओवरले पर दिखेंगे.
loggerLevelByEvents
कॉल के नीचे यह जोड़ें:
...
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};
...
8. डीबग ओवरले का इस्तेमाल करना
कास्ट डीबग लॉगर, आपके कस्टम लॉग मैसेज दिखाने के लिए, रिसीवर पर डीबग ओवरले उपलब्ध कराता है. डीबग ओवरले को टॉगल करने के लिए showDebugLogs
का इस्तेमाल करें और ओवरले से लॉग मैसेज मिटाने के लिए clearDebugLogs
का इस्तेमाल करें.
अपने रिसीवर पर डीबग ओवरले की झलक देखने के लिए, READY
इवेंट लिसनर में इन चीज़ों को जोड़ें:
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
// Show debug overlay.
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay.
castDebugLogger.clearDebugLogs();
}
});
9. कमांड और कंट्रोल (CaC) टूल का इस्तेमाल करना
खास जानकारी
कमांड और कंट्रोल (CaC) टूल आपके लॉग कैप्चर करता है और डीबग ओवरले को कंट्रोल करता है.
रिसीवर को CaC टूल से कनेक्ट करने के दो तरीके हैं:
नया कास्ट कनेक्शन शुरू करें:
- CaC टूल खोलें, रिसीवर का ऐप्लिकेशन आईडी सेट करें, और रिसीवर पर कास्ट करने के लिए 'कास्ट करें' बटन पर क्लिक करें.
- उसी डिवाइस पर, एक ही रिसीवर के ऐप्लिकेशन आईडी से भेजने वाले का अलग ऐप्लिकेशन कास्ट करें.
- भेजने वाले ऐप्लिकेशन से मीडिया लोड करें और टूल पर लॉग मैसेज दिखेंगे.
किसी मौजूदा कास्ट सेशन में शामिल हों:
- पाने वाले के SDK टूल या भेजने वाले के SDK टूल का इस्तेमाल करके, चालू कास्ट सेशन आईडी पाएं. Chrome रिमोट डीबगर कंसोल में सेशन आईडी पाने के लिए, रिसीवर की ओर से यह डालें:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
इसके अलावा, कनेक्ट किए गए वेब भेजने वाले से सेशन आईडी मिल सकता है. इसके लिए, नीचे दिए गए तरीके का इस्तेमाल करें:
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- CaC टूल पर सेशन आईडी डालें और
RESUME
बटन पर क्लिक करें. - कास्ट बटन कनेक्ट होना चाहिए और टूल पर लॉग मैसेज दिखाना शुरू करना चाहिए.
इन तरीकों को आज़माएं
इसके बाद, हम CAC टूल का इस्तेमाल करके, सैंपल पाने वाले आपके डेटा के लॉग देखेंगे.
- CaC टूल खोलें.
- अपने सैंपल ऐप्लिकेशन के रिसीवर का ऐप्लिकेशन आईडी डालें और
SET APP ID
बटन पर क्लिक करें. - स्क्रीन पर सबसे ऊपर बाईं ओर मौजूद, 'कास्ट करें' बटन पर क्लिक करें और उस डिवाइस को चुनें जिस पर Google Cast चालू है. इसके बाद, रिसीवर को खोलें.
- सबसे ऊपर मौजूद
LOAD MEDIA
टैब पर जाएं.
- अनुरोध के टाइप वाले रेडियो बटन को बदलकर
LOAD
करें. - सैंपल वीडियो चलाने के लिए,
SEND REQUEST
बटन पर क्लिक करें.
- अब आपके डिवाइस पर एक सैंपल वीडियो चलने लगेगा. टूल के सबसे नीचे मौजूद "मैसेज लॉग करें" टैब में, आपको पिछले चरणों से लॉग दिखने लगेंगे.
लॉग की जांच करने और रिसीवर को कंट्रोल करने के लिए, इन सुविधाओं को एक्सप्लोर करें:
- मीडिया की जानकारी और मीडिया की स्थिति देखने के लिए,
MEDIA INFO
याMEDIA STATUS
टैब पर क्लिक करें. - रिसीवर पर डीबग ओवरले देखने के लिए
SHOW OVERLAY
बटन पर क्लिक करें. - रिसीवर ऐप्लिकेशन को फिर से लोड करने और फिर से कास्ट करने के लिए,
CLEAR CACHE AND STOP
बटन का इस्तेमाल करें.
10. बधाई हो
अब आपको पता है कि नए कास्ट पाने वाले SDK टूल का इस्तेमाल करके, कास्ट करने की सुविधा वाले वेब रिसीवर के ऐप्लिकेशन में कास्ट डीबग लॉगर कैसे जोड़ा जा सकता है.
ज़्यादा जानकारी के लिए, कास्ट डीबग लॉगर और कमांड और कंट्रोल (CaC) टूल की डेवलपर गाइड देखें.