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

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

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

Google Cast क्या है?

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

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

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

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

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

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

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

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

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

अनुभव

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

क्या आपको नेटवर्क से जुड़ी समस्याएं आ रही हैं?

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

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

सिर्फ़ इसे पढ़ें इसे पढ़ें और इसमें दिए गए अभ्यास पूरे करें

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

नौसिखिया मध्यम प्रवीण

टीवी देखने के अनुभव को क्या रेटिंग दी जा सकती है?

नौसिखिया मध्यम प्रवीण

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

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

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

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

Cast Debug Logger codelab के रिपॉज़िटरी में दो सैंपल प्रोजेक्ट हैं:

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

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

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

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

सर्वर चलाना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. अपने ब्राउज़र में, कमांड और कंट्रोल (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 को बंद करके रीस्टार्ट करें.

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

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

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

index.html

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

receiver.js

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

क्या दस्तावेज़ कास्ट किए जा सकते हैं?

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

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

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

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

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

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

★ ध्यान दें:

CastDebugLogger API का इस्तेमाल करने के लिए, आपको Google Cast SDK डेवलपर कंसोल पर अपना Cast डिवाइस रजिस्टर करना होगा. साथ ही, डिवाइस के फ़र्मवेयर का वर्शन 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>

फ़ाइल में सबसे ऊपर 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);
  }
});

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

डीबग लॉगर चालू होने पर, रिसीवर पर 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) टूल आपके लॉग कैप्चर करता है और डीबग ओवरले को कंट्रोल करता है.

अपने रिसीवर को CaC टूल से कनेक्ट करने के दो तरीके हैं:

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

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

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

1. रिसीवर SDK टूल या भेजने वाले के SDK टूल का इस्तेमाल करके, मौजूदा Cast सेशन आईडी पाएं. 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 की सुविधा वाले वेब रिसीवर ऐप्लिकेशन में, Cast Receiver SDK टूल के नए वर्शन का इस्तेमाल करके, Cast Debug Logger जोड़ने का तरीका पता है.

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

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

Cast के लिए उपलब्ध अन्य कोडलैब और GitHub पर मौजूद हमारे सैंपल ऐप्लिकेशन देखें.