कास्ट रिसीवर ऐप्लिकेशन डीबग करना

1. खास जानकारी

इस कोडलैब में, आपको अपने मौजूदा कस्टम वेब रिसीवर ऐप्लिकेशन में Cast Debug Logger जोड़ने का तरीका बताया जाएगा.

Google Cast क्या है?

Google Cast SDK की मदद से, आपका ऐप्लिकेशन Google Cast की सुविधा वाले डिवाइसों पर कॉन्टेंट चला सकता है और उसे कंट्रोल कर सकता है. यह आपको Google Cast के डिज़ाइन की चेकलिस्ट के आधार पर, ज़रूरी यूज़र इंटरफ़ेस कॉम्पोनेंट उपलब्ध कराता है.

Google Cast की डिज़ाइन चेकलिस्ट इसलिए दी गई है, ताकि Cast की सुविधा इस्तेमाल करने वाले लोगों को सभी प्लैटफ़ॉर्म पर एक जैसा और आसान अनुभव मिल सके.

हम क्या बनाने जा रहे हैं?

इस कोडलैब को पूरा करने के बाद, आपके पास Cast Debug Logger के साथ इंटिग्रेट किया गया कस्टम वेब रिसीवर होगा.

ज़्यादा जानकारी के लिए, Cast Debug Logger गाइड देखें.

आपको क्या सीखने को मिलेगा

• वेब रिसीवर डेवलपमेंट के लिए एनवायरमेंट सेट अप करने का तरीका.
• अपने Cast Receiver में Debug Logger को इंटिग्रेट करने का तरीका.

आपको किन चीज़ों की ज़रूरत होगी

• Google Chrome ब्राउज़र का नया वर्शन.
• HTTPS होस्टिंग सेवा, जैसे कि Firebase Hosting या ngrok.
• Google Cast की सुविधा वाला कोई डिवाइस, जैसे कि Chromecast या Android TV. इस डिवाइस में इंटरनेट ऐक्सेस की सुविधा कॉन्फ़िगर की गई हो.
• एचडीएमआई इनपुट वाला टीवी या मॉनिटर.

अनुभव

• आपके पास पहले से कास्ट करने का अनुभव होना चाहिए. साथ ही, आपको यह पता होना चाहिए कि कास्ट वेब रिसीवर कैसे काम करता है.
• इसके लिए, आपको वेब डेवलपमेंट के बारे में पहले से जानकारी होनी चाहिए.
• आपको टीवी देखने का तरीका भी पता होना चाहिए :)

2. सैंपल कोड पाना

अपने कंप्यूटर पर सभी सैंपल कोड डाउनलोड किए जा सकते हैं...

file_downloadसोर्स डाउनलोड करें

इसके बाद, डाउनलोड की गई zip फ़ाइल को अनपैक करें.

3. अपने रिसीवर को स्थानीय तौर पर डिप्लॉय करना

वेब रिसीवर को Cast डिवाइस के साथ इस्तेमाल करने के लिए, उसे किसी ऐसी जगह पर होस्ट करना होगा जहां Cast डिवाइस उस तक पहुंच सके. अगर आपके पास पहले से ही कोई ऐसा सर्वर है जो एचटीटीपीएस के साथ काम करता है, तो यहां दिए गए निर्देशों को अनदेखा करें. साथ ही, यूआरएल को लिखकर रखें, क्योंकि आपको इसकी ज़रूरत अगले सेक्शन में पड़ेगी.

अगर आपके पास इस्तेमाल करने के लिए कोई सर्वर उपलब्ध नहीं है, तो Firebase होस्टिंग या ngrok का इस्तेमाल किया जा सकता है.

सर्वर चलाना

अपनी पसंद की सेवा सेट अप करने के बाद, app-start पर जाएं और अपना सर्वर शुरू करें.

होस्ट किए गए रिसीवर के यूआरएल को नोट करें. इसका इस्तेमाल अगले सेक्शन में किया जाएगा.

4. Cast Developer Console में कोई ऐप्लिकेशन रजिस्टर करना

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

"नया ऐप्लिकेशन जोड़ें" पर क्लिक करें

"कस्टम रिसीवर" चुनें. हम यही बना रहे हैं.

पैसे पाने वाले नए व्यक्ति की जानकारी डालें. साथ ही, पक्का करें कि आपने पिछले सेक्शन में दिए गए यूआरएल का इस्तेमाल किया हो. अपने नए रिसीवर को असाइन किया गया ऐप्लिकेशन आईडी नोट करें.

आपको अपने Google Cast डिवाइस को रजिस्टर करना होगा, ताकि वह आपके ऐप्लिकेशन को पब्लिश करने से पहले उसे ऐक्सेस कर सके. रिसीवर ऐप्लिकेशन पब्लिश करने के बाद, यह Google Cast की सुविधा वाले सभी डिवाइसों पर उपलब्ध होगा. इस कोडलैब के लिए, यह सलाह दी जाती है कि आप ऐसे रिसीवर ऐप्लिकेशन का इस्तेमाल करें जिसे पब्लिश न किया गया हो.

"नया डिवाइस जोड़ें" पर क्लिक करें

अपने Cast डिवाइस के पीछे प्रिंट किया गया सीरियल नंबर डालें और उसे जानकारी देने वाला नाम दें. Google Cast SDK डेवलपर कंसोल को ऐक्सेस करते समय, Chrome में अपनी स्क्रीन कास्ट करके भी सीरियल नंबर देखा जा सकता है

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

5. सैंपल ऐप्लिकेशन चलाना

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

1. अपने ब्राउज़र में, कमांड और कंट्रोल (सीएसी) टूल खोलें.

2. डिफ़ॉल्ट CC1AD845 रिसीवर आईडी का इस्तेमाल करें और SET APP ID बटन पर क्लिक करें.
3. सबसे ऊपर बाईं ओर मौजूद, कास्ट करें बटन पर क्लिक करें. इसके बाद, Google Cast की सुविधा वाला डिवाइस चुनें.

4. सबसे ऊपर मौजूद LOAD MEDIA टैब पर जाएं.

5. अनुरोध के टाइप वाले रेडियो बटन को LOAD पर सेट करें.
6. नमूना वीडियो चलाने के लिए, SEND REQUEST बटन पर क्लिक करें.
7. आपके Google Cast की सुविधा वाले डिवाइस पर वीडियो चलना शुरू हो जाएगा. इससे आपको यह पता चलेगा कि डिफ़ॉल्ट रिसीवर का इस्तेमाल करके, रिसीवर की बुनियादी सुविधाएं कैसी दिखती हैं.

6. स्टार्ट प्रोजेक्ट तैयार करना

हमने जो ऐप्लिकेशन डाउनलोड किया है उसमें Google Cast की सुविधा जोड़ने की ज़रूरत है. इस कोडलैब में, हम Google Cast से जुड़े कुछ शब्दों का इस्तेमाल करेंगे:

• सेंडर ऐप्लिकेशन, मोबाइल डिवाइस या लैपटॉप पर चलता है,
• रिसीवर ऐप्लिकेशन, Google Cast या Android TV डिवाइस पर चलता है.

अब अपने पसंदीदा टेक्स्ट एडिटर का इस्तेमाल करके, स्टार्टर प्रोजेक्ट पर काम किया जा सकता है:

1. सैंपल कोड डाउनलोड करने के बाद, app-start डायरेक्ट्री चुनें.
2. js/receiver.js और index.html खोलें

ध्यान दें कि इस कोडलैब पर काम करते समय, http-server को आपके किए गए बदलावों के बारे में पता चलना चाहिए. अगर ऐसा नहीं होता है, तो http-server को बंद करके फिर से चालू करें.

ऐप्लिकेशन डिज़ाइन

रिसीवर ऐप्लिकेशन, Cast सेशन शुरू करता है. यह तब तक स्टैंडबाय मोड में रहता है, जब तक सेंडर से LOAD अनुरोध (जैसे कि मीडिया चलाने का निर्देश) नहीं मिलता.

ऐप्लिकेशन में एक मुख्य व्यू होता है, जिसे index.html में तय किया जाता है. साथ ही, इसमें js/receiver.js नाम की एक JavaScript फ़ाइल होती है. इसमें रिसीवर को काम करने के लिए ज़रूरी सभी लॉजिक शामिल होते हैं.

index.html

इस एचटीएमएल फ़ाइल में, हमारे रिसीवर ऐप्लिकेशन के लिए पूरा यूज़र इंटरफ़ेस (यूआई) मौजूद होता है.

receiver.js

यह स्क्रिप्ट, हमारे रिसीवर ऐप्लिकेशन के सभी लॉजिक को मैनेज करती है.

अक्सर पूछे जाने वाले सवाल

• Google Cast क्या है?
• मैं Google Cast डेवलपर कैसे बनूं?

7. CastDebugLogger API के साथ इंटिग्रेट करना

Cast Receiver SDK, डेवलपर को एक और विकल्प देता है. इसकी मदद से, डेवलपर CastDebugLogger API का इस्तेमाल करके, आसानी से अपने रिसीवर ऐप्लिकेशन को डीबग कर सकते हैं.

ज़्यादा जानकारी के लिए, Cast Debug Logger गाइड देखें.

डेटा लेयर में इवेंट बनाने की प्रोसेस

अपने रिसीवर ऐप्लिकेशन के <head> टैग में, Web Receiver SDK स्क्रिप्ट के ठीक बाद, index.html में यहां दी गई स्क्रिप्ट शामिल करें:

<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 का इस्तेमाल करके, Cast Web Receiver 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. डीबग ओवरले का इस्तेमाल करना

Cast Debug Logger, कस्टम लॉग मैसेज दिखाने के लिए रिसीवर पर डीबग ओवरले उपलब्ध कराता है. डीबग ओवरले को टॉगल करने के लिए 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 टूल से अपने रिसीवर को कनेक्ट करने के दो तरीके हैं:

कास्ट करने के लिए नया कनेक्शन शुरू करें:

1. CaC टूल खोलें, रिसीवर ऐप्लिकेशन का आईडी सेट करें, और रिसीवर पर कास्ट करने के लिए, कास्ट करें बटन पर क्लिक करें.
2. एक ही डिवाइस पर, एक ही रिसीवर ऐप्लिकेशन आईडी का इस्तेमाल करके, किसी दूसरे सेंडर ऐप्लिकेशन को कास्ट करें.
3. भेजने वाले ऐप्लिकेशन से मीडिया लोड करें. साथ ही, लॉग मैसेज टूल पर दिखेंगे.

किसी मौजूदा कास्ट सेशन में शामिल होने के लिए:

1. Receiver SDK या Sender SDK का इस्तेमाल करके, चालू Cast सेशन का आईडी पाएं. रिसीवर की ओर से, Chrome Remote Debugger कंसोल में सेशन आईडी पाने के लिए, यह डालें:

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

इसके अलावा, कनेक्ट किए गए वेब सेंडर से सेशन आईडी भी पाया जा सकता है. इसके लिए, यह तरीका अपनाएं:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

2. CaC टूल में सेशन आईडी डालें और RESUME बटन पर क्लिक करें.
3. कास्ट बटन कनेक्ट होना चाहिए और टूल पर लॉग मैसेज दिखने चाहिए.

ये काम करके देखें

इसके बाद, हम CaC टूल का इस्तेमाल करके, आपके सैंपल रिसीवर पर लॉग देखेंगे.

1. CaC टूल खोलें.

2. अपने सैंपल ऐप्लिकेशन का रिसीवर ऐप्लिकेशन आईडी डालें और SET APP ID बटन पर क्लिक करें.
3. सबसे ऊपर बाईं ओर मौजूद, कास्ट करें बटन पर क्लिक करें. इसके बाद, Google Cast की सुविधा वाला वह डिवाइस चुनें जिस पर आपको कॉन्टेंट देखना है.

4. सबसे ऊपर मौजूद LOAD MEDIA टैब पर जाएं.

5. अनुरोध के टाइप वाले रेडियो बटन को LOAD पर सेट करें.
6. नमूना वीडियो चलाने के लिए, SEND REQUEST बटन पर क्लिक करें.

7. अब आपके डिवाइस पर एक सैंपल वीडियो चलना चाहिए. आपको टूल में सबसे नीचे मौजूद "लॉग मैसेज" टैब में, पिछले चरणों के लॉग दिखने लगेंगे.

लॉग की जांच करने और रिसीवर को कंट्रोल करने के लिए, इन सुविधाओं को आज़माएं:

• मीडिया की जानकारी और मीडिया का स्टेटस देखने के लिए, MEDIA INFO या MEDIA STATUS टैब पर क्लिक करें.
• रिसीवर पर डीबग ओवरले देखने के लिए, SHOW OVERLAY बटन पर क्लिक करें.
• रिसीवर ऐप्लिकेशन को फिर से लोड करने और फिर से कास्ट करने के लिए, CLEAR CACHE AND STOP बटन का इस्तेमाल करें.

10. बधाई हो

अब आपको पता चल गया है कि Cast Receiver SDK के नए वर्शन का इस्तेमाल करके, Cast की सुविधा वाले वेब रिसीवर ऐप्लिकेशन में Cast Debug Logger को कैसे जोड़ा जाता है.

ज़्यादा जानकारी के लिए, Cast Debug Logger और Command and Control (CaC) Tool की डेवलपर गाइड देखें.