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

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

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

Google Cast क्या है?

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

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

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

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

ज़्यादा जानकारी और जानकारी के लिए, कास्ट डीबग लॉग करने की गाइड देखें.

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

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

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

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

अनुभव

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

क्या आपको नेटवर्किंग में समस्याएं आ रही हैं?

अगर आप किसी ऐसी जगह पर हैं जहां वाई-फ़ाई नेटवर्क भरोसेमंद नहीं है, तो Chromecast या Chromecast with Google TV के लिए ईथरनेट अडैप्टर का इस्तेमाल करके, Chromecast डिवाइस को वायर किया जा सकता है.

इस ट्यूटोरियल का इस्तेमाल कैसे किया जाएगा?

इसे सिर्फ़ पढ़ें इसे पढ़ें और कसरतों को पूरा करें

वेब ऐप्लिकेशन बनाने के अपने अनुभव को आप कितनी रेटिंग देंगे?

शुरुआती इंटरमीडिएट कुशल

टीवी देखने के अपने अनुभव को आप कितनी रेटिंग देंगे/देंगी?

शुरुआती इंटरमीडिएट कुशल

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

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

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

और डाउनलोड की गई ZIP फ़ाइल को अनपैक करें.

Cast डीबग Logger कोडलैब रिपॉज़िटरी में दो सैंपल प्रोजेक्ट शामिल होते हैं:

• ऐप्लिकेशन-स्टार्ट—यह शुरुआती कोड है, जिसे इस कोडलैब में बनाया जाएगा.
• ऐप्लिकेशन हो गया—तैयार वीडियो ऐप्लिकेशन के सैंपल के लिए पूरा कोड.

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

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

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

सर्वर चलाएं

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

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

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

क्या आपके पास Cast डेवलपर खाता नहीं है?

Google Cast SDK डेवलपर कंसोल पर किसी खाते के लिए साइन अप करें और रजिस्ट्रेशन शुल्क का पेमेंट करें.

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

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

"कस्टम प्राप्तकर्ता" चुनें, हम यही बना रहे हैं.

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

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

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

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

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

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

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

1. अपने ब्राउज़र में, Command and Control (CaC) टूल खोलें.

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 को बंद करके रीस्टार्ट करें.

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

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

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

index.html

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

receiver.js

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

क्या आपको कास्ट करने के लिए दस्तावेज़ चाहिए?

रिसीवर, iOS, Android, और Chrome पर ईमेल भेजने वालों के लिए, हमारे पास ज़्यादा दस्तावेज़ हैं.

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

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

7. CastDebugLogger एपीआई के साथ इंटिग्रेट करें

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

ज़्यादा जानकारी और जानकारी के लिए, कास्ट डीबग लॉग करने की गाइड देखें.

★ ध्यान दें:

CastDebugLogger API का इस्तेमाल करने के लिए, आपको Google Cast SDK Developer Console पर अपना कास्ट डिवाइस रजिस्टर करना होगा. साथ ही, डिवाइस के फ़र्मवेयर का 1.44 या इसके बाद का वर्शन इस्तेमाल करना होगा.

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

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>

फ़ाइल में सबसे ऊपर और playerManager के नीचे, js/receiver.js में 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);
  }
});

चेतावनी: प्रोडक्शन रिसीवर के लिए, setEnabled को 'गलत' पर सेट करना न भूलें.

डीबग लॉगर चालू होने पर, रिसीवर पर DEBUG MODE का ओवरले दिखता है.

प्लेयर इवेंट लॉग करें

CastDebugLogger का इस्तेमाल करके, Cast वेब रिसीवर 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
};

मैसेज और कस्टम टैग को लॉग करें

Cast डीबगLogger 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();

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 रिसीवर SDK टूल का इस्तेमाल करके, Cast की सुविधा वाले वेब रिसीवर ऐप्लिकेशन में, कास्ट डीबग लॉगर जोड़ने का तरीका पता चल गया है.

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

क्या आपको और कास्ट करना है?

अन्य कास्ट कोडलैब और GitHub पर हमारे सैंपल ऐप्लिकेशन देखें.