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

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

Google Cast का लोगो

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

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 डिवाइसों पर, इस कोडलैब में मौजूद कस्टम वेब रिसीवर को चलाने के लिए, अपना ऐप्लिकेशन रजिस्टर करना ज़रूरी है. ऐप्लिकेशन रजिस्टर करने के बाद, आपको एक ऐप्लिकेशन आईडी मिलेगा. इस आईडी का इस्तेमाल करके, भेजने वाले के ऐप्लिकेशन को एपीआई कॉल करना होगा. उदाहरण के लिए, रिसीवर ऐप्लिकेशन को लॉन्च करने के लिए.

Cast Developer Console की इमेज, जिसमें 'नया ऐप्लिकेशन जोड़ें' बटन को हाइलाइट किया गया है

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

'नए ऐप्लिकेशन पाने वाले का ऐप्लिकेशन' स्क्रीन की इमेज, जिसमें 'पसंद के मुताबिक पाने वाला' विकल्प हाइलाइट किया गया है

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

'नया कस्टम रिसीवर' डायलॉग पर, 'पाने वाला ऐप्लिकेशन यूआरएल' फ़ील्ड की इमेज

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

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

Google Cast SDK डेवलपर कंसोल की इमेज, जिसमें 'नया डिवाइस जोड़ें' बटन को हाइलाइट किया गया है

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

'कास्ट रिसीवर डिवाइस जोड़ें' डायलॉग की इमेज

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

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

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

Google Chrome का लोगो

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

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

कमांड और कंट्रोल (CaC) टूल के 'कास्ट कनेक्ट और लॉगर कंट्रोल' टैब की इमेज

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

कमांड और कंट्रोल (CaC) टूल के 'कास्ट कनेक्ट और लॉगर कंट्रोल' टैब की इमेज. इससे पता चलता है कि इस डिवाइस को रिसीवर ऐप्लिकेशन से कनेक्ट किया गया है

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

कमांड और कंट्रोल (CaC) टूल के 'मीडिया लोड करें' टैब की इमेज

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

6. शुरुआती प्रोजेक्ट तैयार करना

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

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

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

  1. सैंपल कोड डाउनलोड करने के लिए, फ़ोल्डर का आइकॉनapp-start डायरेक्ट्री चुनें.
  2. 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 का ओवरले दिखता है.

फ़्रेम के ऊपरी बाएं कोने में लाल रंग के बैकग्राउंड पर, &#39;डीबग मोड&#39; मैसेज के साथ चल रहे वीडियो की इमेज

खिलाड़ी इवेंट लॉग करें

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 टूल से कनेक्ट करने के दो तरीके हैं:

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

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

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

  1. पाने वाले के SDK टूल या भेजने वाले के SDK टूल का इस्तेमाल करके, चालू कास्ट सेशन आईडी पाएं. Chrome रिमोट डीबगर कंसोल में सेशन आईडी पाने के लिए, रिसीवर की ओर से यह डालें:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

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

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

सेशन को फिर से शुरू करने के लिए, कमांड और कंट्रोल (CaC) टूल के &#39;कास्ट कनेक्ट और लॉगर कंट्रोल&#39; टैब की इमेज

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

इन तरीकों को आज़माएं

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

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

कमांड और कंट्रोल (CaC) टूल के &#39;कास्ट कनेक्ट और लॉगर कंट्रोल&#39; टैब की इमेज

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

कमांड और कंट्रोल (CaC) टूल के &#39;कास्ट कनेक्ट और लॉगर कंट्रोल&#39; टैब की इमेज. इससे पता चलता है कि इस डिवाइस को रिसीवर ऐप्लिकेशन से कनेक्ट किया गया है

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

कमांड और कंट्रोल (CaC) टूल के &#39;मीडिया लोड करें&#39; टैब की इमेज

  1. अनुरोध के टाइप वाले रेडियो बटन को बदलकर LOAD करें.
  2. सैंपल वीडियो चलाने के लिए, SEND REQUEST बटन पर क्लिक करें.

कमांड और कंट्रोल (CaC) टूल के &#39;कास्ट कनेक्ट और लॉगर कंट्रोल&#39; टैब की इमेज. इसमें लॉग मैसेज दिख रहे हैं, जो सबसे नीचे वाले पैनल में दिख रहे हैं

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

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

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

10. बधाई हो

अब आपको पता है कि नए कास्ट पाने वाले SDK टूल का इस्तेमाल करके, कास्ट करने की सुविधा वाले वेब रिसीवर के ऐप्लिकेशन में कास्ट डीबग लॉगर कैसे जोड़ा जा सकता है.

ज़्यादा जानकारी के लिए, कास्ट डीबग लॉगर और कमांड और कंट्रोल (CaC) टूल की डेवलपर गाइड देखें.