अपने कस्टम वेब रिसीवर में मुख्य सुविधाएं जोड़ें

इस पेज पर, कस्टम वेब रिसीवर ऐप्लिकेशन के लिए उपलब्ध सुविधाओं के कोड स्निपेट और उनके बारे में जानकारी दी गई है.

1. एक cast-media-player एलिमेंट, जो Web Receiver के साथ उपलब्ध कराए गए बिल्ट-इन प्लेयर यूज़र इंटरफ़ेस (यूआई) को दिखाता है.
2. cast-media-player एलिमेंट के लिए, सीएसएस जैसी कस्टम स्टाइलिंग. इससे background-image, splash-image, और font-family जैसे अलग-अलग यूज़र इंटरफ़ेस (यूआई) एलिमेंट को स्टाइल किया जा सकता है.
3. Web Receiver फ़्रेमवर्क को लोड करने के लिए स्क्रिप्ट एलिमेंट.
4. मैसेज को इंटरसेप्ट करने और इवेंट को हैंडल करने के लिए JavaScript कोड.
5. ऑटोप्ले के लिए कतार.
6. वीडियो चलाने की सुविधा को कॉन्फ़िगर करने के विकल्प.
7. वेब रिसीवर का कॉन्टेक्स्ट सेट करने के विकल्प.
8. Web Receiver ऐप्लिकेशन के साथ काम करने वाले निर्देश सेट करने के विकल्प.
9. वेब रिसीवर ऐप्लिकेशन को शुरू करने के लिए JavaScript कॉल.

ऐप्लिकेशन कॉन्फ़िगरेशन और विकल्प

ऐप्लिकेशन को कॉन्फ़िगर करना

CastReceiverContext डेवलपर के लिए सबसे बाहरी क्लास है. यह क्लास, बुनियादी लाइब्रेरी लोड करने और Web Receiver SDK को शुरू करने की प्रोसेस को मैनेज करता है. एसडीके, ऐसे एपीआई उपलब्ध कराता है जिनकी मदद से ऐप्लिकेशन डेवलपर, CastReceiverOptions के ज़रिए एसडीके को कॉन्फ़िगर कर सकते हैं. इन कॉन्फ़िगरेशन का आकलन, ऐप्लिकेशन लॉन्च होने पर एक बार किया जाता है. साथ ही, इन्हें SDK को तब पास किया जाता है, जब start को कॉल करने के दौरान, वैकल्पिक पैरामीटर सेट किया जाता है.

नीचे दिए गए उदाहरण में, यह पता लगाने के लिए डिफ़ॉल्ट तरीके को बदलने का तरीका बताया गया है कि क्या भेजने वाले का कनेक्शन अब भी चालू है. जब वेब रिसीवर, maxInactivity सेकंड तक भेजने वाले डिवाइस से कम्यूनिकेट नहीं कर पाता है, तब SENDER_DISCONNECTED इवेंट भेजा जाता है. नीचे दिया गया कॉन्फ़िगरेशन, इस टाइम आउट को बदल देता है. यह डीबग करने के दौरान काम आ सकता है. ऐसा इसलिए, क्योंकि यह वेब रिसीवर ऐप्लिकेशन को Chrome Remote Debugger सेशन बंद करने से रोकता है. ऐसा तब होता है, जब IDLE स्थिति में कनेक्ट किए गए सेंडर की संख्या शून्य होती है.

const context = cast.framework.CastReceiverContext.getInstance();
const options = new cast.framework.CastReceiverOptions();
options.maxInactivity = 3600; // Development only
context.start(options);

प्लेयर को कॉन्फ़िगर करना

कॉन्टेंट लोड करते समय, Web Receiver SDK टूल, cast.framework.PlaybackConfig का इस्तेमाल करके, प्लेबैक वैरिएबल कॉन्फ़िगर करने का तरीका उपलब्ध कराता है. जैसे, DRM की जानकारी, फिर से कोशिश करने के कॉन्फ़िगरेशन, और अनुरोध हैंडलर. इस जानकारी को PlayerManager मैनेज करता है. साथ ही, इसका आकलन तब किया जाता है, जब प्लेयर बनाए जाते हैं. Web Receiver SDK टूल को हर बार नया लोड पास करने पर, प्लेयर बनाए जाते हैं. खिलाड़ी बनाने के बाद, PlaybackConfig में किए गए बदलावों का आकलन अगले कॉन्टेंट लोड में किया जाता है. SDK टूल, PlaybackConfig में बदलाव करने के लिए ये तरीके उपलब्ध कराता है.

• CastReceiverOptions.playbackConfig का इस्तेमाल करके, CastReceiverContext को शुरू करते समय डिफ़ॉल्ट कॉन्फ़िगरेशन के विकल्पों को बदला जा सकता है.
• मौजूदा कॉन्फ़िगरेशन पाने के लिए, PlayerManager.getPlaybackConfig() पर क्लिक करें.
• मौजूदा कॉन्फ़िगरेशन को बदलने के लिए, PlayerManager.setPlaybackConfig() पर क्लिक करें. यह सेटिंग, इसके बाद के सभी लोड पर लागू होती है. ऐसा तब तक होता है, जब तक इसे फिर से बदल नहीं दिया जाता.
• PlayerManager.setMediaPlaybackInfoHandler() का इस्तेमाल करके, सिर्फ़ उस मीडिया आइटम के लिए अतिरिक्त कॉन्फ़िगरेशन लागू करें जिसे मौजूदा कॉन्फ़िगरेशन के ऊपर लोड किया जा रहा है. हैंडलर को प्लेयर बनाने से ठीक पहले कॉल किया जाता है. यहां किए गए बदलाव हमेशा के लिए नहीं होते. साथ ही, इन्हें getPlaybackConfig() से की गई क्वेरी में शामिल नहीं किया जाता. अगला मीडिया आइटम लोड होने पर, इस हैंडलर को फिर से कॉल किया जाता है.

यहां दिए गए उदाहरण में, PlaybackConfig को शुरू करते समय PlaybackConfig को सेट करने का तरीका बताया गया है.CastReceiverContext यह कॉन्फ़िगरेशन, मेनिफ़ेस्ट पाने के लिए किए गए आउटगोइंग अनुरोधों को बदल देता है. यह हैंडलर बताता है कि सीओआरएस Access-Control अनुरोध, कुकी या ऑथराइज़ेशन हेडर जैसे क्रेडेंशियल का इस्तेमाल करके किए जाने चाहिए.

const playbackConfig = new cast.framework.PlaybackConfig();
playbackConfig.manifestRequestHandler = requestInfo => {
  requestInfo.withCredentials = true;
};
context.start({playbackConfig: playbackConfig});

यहां दिए गए उदाहरण में, PlayerManager में दिए गए getter और setter का इस्तेमाल करके, PlaybackConfig को बदलने का तरीका बताया गया है. इस सेटिंग से, प्लेयर को यह कॉन्फ़िगर किया जाता है कि एक सेगमेंट लोड होने के बाद, कॉन्टेंट को फिर से चलाया जा सके.

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
const playbackConfig = (Object.assign(
            new cast.framework.PlaybackConfig(), playerManager.getPlaybackConfig()));
playbackConfig.autoResumeNumberOfSegments = 1;
playerManager.setPlaybackConfig(playbackConfig);

यहां दिए गए उदाहरण में, मीडिया प्लेबैक की जानकारी देने वाले हैंडलर का इस्तेमाल करके, किसी लोड अनुरोध के लिए PlaybackConfig को बदलने का तरीका बताया गया है. हैंडलर, ऐप्लिकेशन में लागू किए गए getLicenseUrlForMedia तरीके को कॉल करता है, ताकि मौजूदा आइटम के contentId से licenseUrl मिल सके.

playerManager.setMediaPlaybackInfoHandler((loadRequestData, playbackConfig) => {
  const mediaInformation = loadRequestData.media;
  playbackConfig.licenseUrl = getLicenseUrlForMedia(mediaInformation.contentId);

  return playbackConfig;
});

इवेंट लिसनर

Web Receiver SDK की मदद से, Web Receiver ऐप्लिकेशन को प्लेयर इवेंट मैनेज करने की अनुमति मिलती है. इवेंट लिसनर, cast.framework.events.EventType पैरामीटर (या इन पैरामीटर का ऐरे) लेता है. यह पैरामीटर उन इवेंट के बारे में बताता है जो लिसनर को ट्रिगर करते हैं. डीबग करने के लिए फ़ायदेमंद cast.framework.events.EventType के पहले से कॉन्फ़िगर किए गए ऐरे, cast.framework.events.category में देखे जा सकते हैं. इवेंट पैरामीटर, इवेंट के बारे में ज़्यादा जानकारी देता है.

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

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
playerManager.addEventListener(
    cast.framework.events.EventType.MEDIA_STATUS, (event) => {
      // Write your own event handling code, for example
      // using the event.mediaStatus value
});

मैसेज को बीच में ही रोक देना

Web Receiver SDK की मदद से, Web Receiver ऐप्लिकेशन को मैसेज इंटरसेप्ट करने और उन मैसेज पर कस्टम कोड चलाने की अनुमति मिलती है. मैसेज इंटरसेप्टर, cast.framework.messages.MessageType पैरामीटर लेता है. इससे यह तय होता है कि किस तरह के मैसेज को इंटरसेप्ट किया जाना चाहिए.

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

उदाहरण के लिए, अगर आपको लोड अनुरोध डेटा बदलना है, तो इसे रोकने और बदलने के लिए, इस लॉजिक का इस्तेमाल किया जा सकता है:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_FAILED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      if (!loadRequestData.media.entity) {
        return loadRequestData;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          if (!asset) {
            throw cast.framework.messages.ErrorReason.INVALID_REQUEST;
          }

          loadRequestData.media.contentUrl = asset.url;
          loadRequestData.media.metadata = asset.metadata;
          loadRequestData.media.tracks = asset.tracks;
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

context.start();

गड़बड़ी ठीक करना

मैसेज इंटरसेप्टर में गड़बड़ियां होने पर, आपके वेब रिसीवर ऐप्लिकेशन को सही cast.framework.messages.ErrorType और cast.framework.messages.ErrorReason दिखाना चाहिए.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_CANCELLED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      ...

      return fetchAssetAndAuth(loadRequestData.media.entity,
                               loadRequestData.credentials)
        .then(asset => {
          ...
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

मैसेज इंटरसेप्शन बनाम इवेंट लिसनर

मैसेज इंटरसेप्शन और इवेंट लिसनर के बीच कुछ मुख्य अंतर यहां दिए गए हैं:

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

playerManager.addEventListener(cast.framework.events.category.CORE,
    event => {
        console.log(event);
    });

• मैसेज इंटरसेप्ट करने की सुविधा की मदद से, किसी मैसेज को सुना जा सकता है, उसे इंटरसेप्ट किया जा सकता है, और अनुरोध के डेटा में बदलाव किया जा सकता है.
• मैसेज इंटरसेप्शन का इस्तेमाल, अनुरोध के डेटा से जुड़े कस्टम लॉजिक को मैनेज करने के लिए सबसे सही होता है.

मीडिया लोड हो रहा है

MediaInformation, cast.framework.messages.MessageType.LOAD मैसेज में मीडिया लोड करने के लिए कई प्रॉपर्टी उपलब्ध कराता है. इनमें entity, contentUrl, और contentId शामिल हैं.

• entity, सेंडर और रिसीवर, दोनों ऐप्लिकेशन के लिए लागू करने का सुझाव दिया गया है. यह प्रॉपर्टी, डीप लिंक यूआरएल है. यह प्लेलिस्ट या मीडिया कॉन्टेंट हो सकता है. आपके ऐप्लिकेशन को इस यूआरएल को पार्स करना चाहिए और कम से कम दो फ़ील्ड में से किसी एक में जानकारी भरनी चाहिए.
• contentUrl, उस चलाने लायक यूआरएल से मेल खाता है जिसका इस्तेमाल प्लेयर, कॉन्टेंट लोड करने के लिए करेगा. उदाहरण के लिए, यह यूआरएल किसी DASH मेनिफ़ेस्ट की ओर ले जा सकता है.
• contentId, चलाने लायक कॉन्टेंट का यूआरएल हो सकता है. यह contentUrl प्रॉपर्टी के यूआरएल जैसा ही होता है. इसके अलावा, यह लोड किए जा रहे कॉन्टेंट या प्लेलिस्ट का यूनीक आइडेंटिफ़ायर भी हो सकता है. अगर इस प्रॉपर्टी का इस्तेमाल आइडेंटिफ़ायर के तौर पर किया जा रहा है, तो आपके ऐप्लिकेशन को contentUrl में खेलने लायक यूआरएल डालना चाहिए.

हमारा सुझाव है कि असली आईडी या मुख्य पैरामीटर सेव करने के लिए entity का इस्तेमाल करें. साथ ही, मीडिया के यूआरएल के लिए contentUrl का इस्तेमाल करें. इसका एक उदाहरण यहां दिया गया है. इस स्निपेट में, entity, LOAD अनुरोध में मौजूद है और खेलने लायक contentUrl को वापस पाया गया है:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      ...

      if (!loadRequestData.media.entity) {
        // Copy the value from contentId for legacy reasons if needed
        loadRequestData.media.entity = loadRequestData.media.contentId;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          loadRequestData.media.contentUrl = asset.url;
          ...
          return loadRequestData;
        });
    });

डिवाइस की क्षमताएं

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

यह तरीका एक ऑब्जेक्ट दिखाता है. इस ऑब्जेक्ट के लिए क्वेरी की जा सकती है. इसके लिए, आपको बताए गए किसी एक enum को पास करना होगा, ताकि उस enum के लिए डिवाइस की क्षमता मिल सके. इन एनम को cast.framework.system.DeviceCapabilities में तय किया गया है.

इस उदाहरण में यह जांच की जाती है कि वेब रिसीवर डिवाइस, IS_HDR_SUPPORTED और IS_DV_SUPPORTED कुंजियों के साथ HDR और DolbyVision (DV) चला सकता है या नहीं.

const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
  const deviceCapabilities = context.getDeviceCapabilities();
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED] value
  }
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED] value
  }
});
context.start();

उपयोगकर्ता के इंटरैक्शन को मैनेज करना

कोई उपयोगकर्ता, इन तरीकों से आपके Web Receiver ऐप्लिकेशन के साथ इंटरैक्ट कर सकता है: सेंडर ऐप्लिकेशन (वेब, Android, और iOS), Assistant की सुविधा वाले डिवाइसों पर बोलकर दिए जाने वाले निर्देश, स्मार्ट डिसप्ले पर टच कंट्रोल, और Android TV डिवाइसों पर रिमोट कंट्रोल. Cast SDK, कई एपीआई उपलब्ध कराता है. इनकी मदद से, Web Receiver ऐप्लिकेशन इन इंटरैक्शन को मैनेज कर सकता है. साथ ही, उपयोगकर्ता की कार्रवाई की स्थितियों के ज़रिए ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को अपडेट कर सकता है. इसके अलावा, बदलावों को बैकएंड सेवाओं को अपडेट करने के लिए भी भेजा जा सकता है.

मीडिया के लिए उपलब्ध निर्देश

यूज़र इंटरफ़ेस (यूआई) कंट्रोल की स्थितियां, MediaStatus.supportedMediaCommands से तय होती हैं. यह iOS और Android पर मौजूद सेंडर ऐप्लिकेशन के बड़े कंट्रोलर, टच डिवाइसों पर चलने वाले रिसीवर और रिमोट कंट्रोल ऐप्लिकेशन, और Android TV डिवाइसों पर मौजूद रिसीवर ऐप्लिकेशन के लिए होता है. जब प्रॉपर्टी में कोई बिटवाइज़ Command चालू होता है, तो उस कार्रवाई से जुड़े बटन चालू हो जाते हैं. अगर वैल्यू सेट नहीं की जाती है, तो बटन बंद हो जाता है. इन वैल्यू को वेब रिसीवर पर बदला जा सकता है. इसके लिए:

1. Commands को सेट करने के लिए, PlayerManager.setSupportedMediaCommands का इस्तेमाल करना
2. addSupportedMediaCommands का इस्तेमाल करके नया निर्देश जोड़ना
3. removeSupportedMediaCommands का इस्तेमाल करके, किसी मौजूदा कमांड को हटाना.

playerManager.setSupportedMediaCommands(cast.framework.messages.Command.SEEK |
  cast.framework.messages.Command.PAUSE);

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

मीडिया कंट्रोल करने के लिए इस्तेमाल की जा सकने वाली कमांड और टच डिवाइसों के बारे में ज़्यादा जानने के लिए, Accessing UI controls गाइड देखें.

उपयोगकर्ता की कार्रवाई की स्थितियों को मैनेज करना

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

• मीडिया आइटम लोड करते समय, उपयोगकर्ता की प्राथमिकताओं के हिसाब से MediaInformation userActionStates सेट करें.
• USER_ACTION मैसेज को इंटरसेप्ट करता है और अनुरोध की गई कार्रवाई का पता लगाता है.
• यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, MediaInformation UserActionState को अपडेट करें.

यहां दिया गया स्निपेट, LOAD अनुरोध को इंटरसेप्ट करता है और LoadRequestData के MediaInformation को भरता है. इस मामले में, उपयोगकर्ता को लोड किया जा रहा कॉन्टेंट पसंद आता है.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
      const userActionLike = new cast.framework.messages.UserActionState(
          cast.framework.messages.UserAction.LIKE);
      loadRequestData.media.userActionStates = [userActionLike];

      return loadRequestData;
    });

यहां दिया गया स्निपेट, USER_ACTION मैसेज को इंटरसेप्ट करता है और अनुरोध किए गए बदलाव के साथ बैकएंड को कॉल करने की प्रोसेस को मैनेज करता है. इसके बाद, यह कॉल करके पैसे पाने वाले व्यक्ति के खाते में मौजूद UserActionState को अपडेट करता है.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.USER_ACTION,
  (userActionRequestData) => {
    // Obtain the media information of the current content to associate the action to.
    let mediaInfo = playerManager.getMediaInformation();

    // If there is no media info return an error and ignore the request.
    if (!mediaInfo) {
        console.error('Not playing media, user action is not supported');
        return new cast.framework.messages.ErrorData(messages.ErrorType.BAD_REQUEST);
    }

    // Reach out to backend services to store user action modifications. See sample below.
    return sendUserAction(userActionRequestData, mediaInfo)

    // Upon response from the backend, update the client's UserActionState.
    .then(backendResponse => updateUserActionStates(backendResponse))

    // If any errors occurred in the backend return them to the cast receiver.
    .catch((error) => {
      console.error(error);
      return error;
    });
});

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

function sendUserAction(userActionRequestData, mediaInfo) {
  return new Promise((resolve, reject) => {
    switch (userActionRequestData.userAction) {
      // Handle user action changes supported by the backend.
      case cast.framework.messages.UserAction.LIKE:
      case cast.framework.messages.UserAction.DISLIKE:
      case cast.framework.messages.UserAction.FOLLOW:
      case cast.framework.messages.UserAction.UNFOLLOW:
      case cast.framework.messages.UserAction.FLAG:
      case cast.framework.messages.UserAction.SKIP_AD:
        let backendResponse = {userActionRequestData: userActionRequestData, mediaInfo: mediaInfo};
        setTimeout(() => {resolve(backendResponse)}, 1000);
        break;
      // Reject all other user action changes.
      default:
        reject(
          new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType.INVALID_REQUEST));
    }
  });
}

नीचे दिए गए स्निपेट में, UserActionRequestData की वैल्यू ली जाती है. इसके बाद, MediaInformation में UserActionState की वैल्यू जोड़ी जाती है या हटाई जाती है. MediaInformation के UserActionState को अपडेट करने से, उस बटन की स्थिति बदल जाती है जो अनुरोध की गई कार्रवाई से जुड़ा होता है. यह बदलाव, स्मार्ट डिसप्ले के कंट्रोल यूज़र इंटरफ़ेस (यूआई), रिमोट कंट्रोल ऐप्लिकेशन, और Android TV के यूज़र इंटरफ़ेस (यूआई) में दिखता है. इसे आउटगोइंग MediaStatus मैसेज के ज़रिए भी ब्रॉडकास्ट किया जाता है, ताकि iOS और Android डिवाइसों से कॉन्टेंट भेजने वाले लोगों के लिए, बड़े किए गए कंट्रोलर के यूज़र इंटरफ़ेस (यूआई) को अपडेट किया जा सके.

function updateUserActionStates(backendResponse) {
  // Unwrap the backend response.
  let mediaInfo = backendResponse.mediaInfo;
  let userActionRequestData = backendResponse.userActionRequestData;

  // If the current item playing has changed, don't update the UserActionState for the current item.
  if (playerManager.getMediaInformation().entity !== mediaInfo.entity) {
    return;
  }

  // Check for existing userActionStates in the MediaInformation.
  // If none, initialize a new array to populate states with.
  let userActionStates = mediaInfo.userActionStates || [];

  // Locate the index of the UserActionState that will be updated in the userActionStates array.
  let index = userActionStates.findIndex((currUserActionState) => {
    return currUserActionState.userAction == userActionRequestData.userAction;
  });

  if (userActionRequestData.clear) {
    // Remove the user action state from the array if cleared.
    if (index >= 0) {
      userActionStates.splice(index, 1);
    }
    else {
      console.warn("Could not find UserActionState to remove in MediaInformation");
    }
  } else {
    // Add the UserActionState to the array if enabled.
    userActionStates.push(
      new cast.framework.messages.UserActionState(userActionRequestData.userAction));
  }

  // Update the UserActionState array and set the new MediaInformation
  mediaInfo.userActionStates = userActionStates;
  playerManager.setMediaInformation(mediaInfo, true);
  return;
}

बोलकर दिए जाने वाले निर्देश

फ़िलहाल, Web Receiver SDK में ये मीडिया कमांड काम करती हैं. ये कमांड, Assistant की सुविधा वाले डिवाइसों के लिए उपलब्ध हैं. इन निर्देशों को डिफ़ॉल्ट रूप से लागू करने के तरीके, cast.framework.PlayerManager में दिए गए हैं.

बोलकर दिए जाने वाले निर्देशों के साथ काम करने वाले मीडिया कमांड

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

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

यहाँ दिए गए उदाहरण में, CastReceiverContext शुरू करते समय CastReceiverOptions की जानकारी दी जा रही है. हमने PAUSE कमांड के लिए सहायता जोड़ी है और प्लेयर को सिर्फ़ उस कमांड का इस्तेमाल करने के लिए मजबूर किया है. अब अगर कोई आवाज़ से दिया गया निर्देश, SEEK जैसे किसी दूसरे ऑपरेशन का अनुरोध करता है, तो उसे अस्वीकार कर दिया जाएगा. उपयोगकर्ता को सूचना दी जाएगी कि फ़िलहाल इस निर्देश का इस्तेमाल नहीं किया जा सकता.

const context = cast.framework.CastReceiverContext.getInstance();

context.start({
  enforceSupportedCommands: true,
  supportedCommands: cast.framework.messages.Command.PAUSE
});

आपको जिस कमांड को सीमित करना है उसके लिए, अलग-अलग लॉजिक लागू किए जा सकते हैं. enforceSupportedCommands फ़्लैग हटाएं. साथ ही, जिस कमांड को प्रतिबंधित करना है उसके लिए, आने वाले मैसेज को इंटरसेप्ट किया जा सकता है. यहां हम एसडीके से मिले अनुरोध को इंटरसेप्ट करते हैं, ताकि Assistant की सुविधा वाले डिवाइसों को दी गई SEEK कमांड, आपके वेब रिसीवर ऐप्लिकेशन में सीक करने की सुविधा को ट्रिगर न करें.

जिन मीडिया कमांड के लिए आपका ऐप्लिकेशन काम नहीं करता उनके लिए, गड़बड़ी की वजह बताएं. जैसे, NOT_SUPPORTED.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.SEEK,
  seekData => {
    // Block seeking if the SEEK supported media command is disabled
    if (!(playerManager.getSupportedMediaCommands() & cast.framework.messages.Command.SEEK)) {
      let e = new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType
      .INVALID_REQUEST);
      e.reason = cast.framework.messages.ErrorReason.NOT_SUPPORTED;
      return e;
    }

    return seekData;
  });

आवाज़ की मदद से बैकग्राउंड में ले जाना

अगर Cast प्लैटफ़ॉर्म, Assistant की गतिविधि की वजह से आपके ऐप्लिकेशन की आवाज़ को बैकग्राउंड में चलाता है, तो गतिविधि शुरू होने पर वेब रिसीवर ऐप्लिकेशन को FocusState NOT_IN_FOCUS मैसेज भेजा जाता है. जैसे, उपयोगकर्ता की आवाज़ सुनना या जवाब देना. गतिविधि खत्म होने पर, IN_FOCUS के साथ एक और मैसेज भेजा जाता है. आपके ऐप्लिकेशन और चलाए जा रहे मीडिया के आधार पर, आपको FocusState के NOT_IN_FOCUS होने पर मीडिया को रोकना पड़ सकता है. इसके लिए, आपको FOCUS_STATE टाइप के मैसेज को इंटरसेप्ट करना होगा.

उदाहरण के लिए, अगर Assistant किसी उपयोगकर्ता की क्वेरी का जवाब दे रही है, तो ऑडियो बुक के चलने की सुविधा को रोकना, उपयोगकर्ता के लिए एक अच्छा अनुभव है.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.FOCUS_STATE,
  focusStateRequestData => {
    // Pause content when the app is out of focus. Resume when focus is restored.
    if (focusStateRequestData.state == cast.framework.messages.FocusState.NOT_IN_FOCUS) {
      playerManager.pause();
    } else {
      playerManager.play();
    }

    return focusStateRequestData;
  });

आवाज़ से बताई गई कैप्शन की भाषा

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

उदाहरण के लिए, "Ok Google, कैप्शन चालू करो" निर्देश के लिए, isSuggestedLanguage को true पर सेट किया गया है. ऐसा इसलिए, क्योंकि निर्देश में इस्तेमाल की गई भाषा से कैप्शन की भाषा का पता चला है. अगर भाषा के लिए साफ़ तौर पर अनुरोध किया जाता है, जैसे कि "OK Google, अंग्रेज़ी में कैप्शन चालू करो," तो isSuggestedLanguage को false पर सेट किया जाता है.

मेटाडेटा और वॉइस कास्टिंग

आवाज़ से दिए जाने वाले निर्देशों को डिफ़ॉल्ट रूप से वेब रिसीवर हैंडल करता है. हालांकि, आपको यह पक्का करना चाहिए कि आपके कॉन्टेंट का मेटाडेटा पूरा और सटीक हो. इससे यह पक्का होता है कि Assistant, आवाज़ से दिए गए निर्देशों को सही तरीके से हैंडल करे. साथ ही, मेटाडेटा को Google Home ऐप्लिकेशन और Google Home Hub जैसे स्मार्ट डिसप्ले जैसे नए इंटरफ़ेस पर सही तरीके से दिखाया जाए.

स्ट्रीम ट्रांसफ़र करना

सेशन की स्थिति को बनाए रखना, स्ट्रीम ट्रांसफ़र की बुनियादी शर्त है. इसकी मदद से लोग, आवाज़ के निर्देश, Google Home ऐप्लिकेशन या स्मार्ट डिसप्ले का इस्तेमाल करके, मौजूदा ऑडियो और वीडियो स्ट्रीम को अलग-अलग डिवाइसों पर ट्रांसफ़र कर सकते हैं. मीडिया, एक डिवाइस (सोर्स) पर चलना बंद हो जाता है और दूसरे डिवाइस (डेस्टिनेशन) पर चलना जारी रहता है. कास्ट करने की सुविधा वाले किसी भी डिवाइस को, स्ट्रीम ट्रांसफ़र के दौरान सोर्स या डेस्टिनेशन के तौर पर इस्तेमाल किया जा सकता है. इसके लिए, डिवाइस में फ़र्मवेयर का नया वर्शन होना चाहिए.

स्ट्रीम ट्रांसफ़र के लिए इवेंट फ़्लो यह है:

1. सोर्स डिवाइस पर:
   1. मीडिया चलना बंद हो जाता है.
   2. वेब रिसीवर ऐप्लिकेशन को मौजूदा मीडिया की स्थिति सेव करने का निर्देश मिलता है.
   3. वेब रिसीवर ऐप्लिकेशन बंद हो गया है.
2. डेस्टिनेशन डिवाइस पर:
   1. वेब रिसीवर ऐप्लिकेशन लोड हो गया है.
   2. वेब रिसीवर ऐप्लिकेशन को सेव किए गए मीडिया की स्थिति को वापस लाने का निर्देश मिलता है.
   3. मीडिया फिर से चलने लगता है.

मीडिया की स्थिति के इन एलिमेंट में ये शामिल हैं:

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

संगीत को दूसरे स्पीकर पर चलाने की सुविधा चालू करना

अपने वेब रिसीवर के लिए स्ट्रीम ट्रांसफ़र की सुविधा लागू करने के लिए:

1. STREAM_TRANSFER कमांड का इस्तेमाल करके, supportedMediaCommands को अपडेट करें:

   playerManager.addSupportedMediaCommands(
   cast.framework.messages.Command.STREAM_TRANSFER, true);

2. सेशन की स्थिति बनाए रखना लेख में बताए गए तरीके से, SESSION_STATE और RESUME_SESSION मैसेज इंटरसेप्टर को चाहें, तो बदलें. इन कुकी को सिर्फ़ तब बदलें, जब कस्टम डेटा को सेशन स्नैपशॉट के हिस्से के तौर पर सेव करना हो. ऐसा न होने पर, सेशन की स्थितियों को बनाए रखने के लिए डिफ़ॉल्ट रूप से लागू किया गया तरीका, स्ट्रीम ट्रांसफ़र की सुविधा के साथ काम करेगा.

सेशन की स्थिति बनाए रखना

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

अगर ज़रूरी हो, तो वेब रिसीवर से जनरेट किए गए लोड अनुरोध को SESSION_STATE मैसेज इंटरसेप्टर में बदला जा सकता है. अगर आपको लोड करने के अनुरोध में कस्टम डेटा जोड़ना है, तो हमारा सुझाव है कि आप उन्हें loadRequestData.customData में रखें.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SESSION_STATE,
    function (sessionState) {
        // Override sessionState.loadRequestData if needed.
        const newCredentials = updateCredentials_(sessionState.loadRequestData.credentials);
        sessionState.loadRequestData.credentials = newCredentials;

        // Add custom data if needed.
        sessionState.loadRequestData.customData = {
            'membership': 'PREMIUM'
        };

        return sessionState;
    });

कस्टम डेटा को RESUME_SESSION मैसेज इंटरसेप्टर में मौजूद loadRequestData.customData से वापस पाया जा सकता है.

let cred_ = null;
let membership_ = null;

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.RESUME_SESSION,
    function (resumeSessionRequest) {
        let sessionState = resumeSessionRequest.sessionState;

        // Modify sessionState.loadRequestData if needed.
        cred_ = sessionState.loadRequestData.credentials;

        // Retrieve custom data.
        membership_ = sessionState.loadRequestData.customData.membership;

        return resumeSessionRequest;
    });

कॉन्टेंट को पहले से लोड करना

वेब रिसीवर, मीडिया आइटम को पहले से लोड करने की सुविधा देता है. ऐसा, कतार में मौजूद मौजूदा आइटम के चलने के बाद किया जाता है.

प्रीलोड करने की सुविधा, आने वाले आइटम के कई सेगमेंट को पहले से डाउनलोड कर लेती है. यह जानकारी, QueueItem ऑब्जेक्ट में मौजूद preloadTime वैल्यू के आधार पर तय की जाती है. अगर यह वैल्यू नहीं दी जाती है, तो डिफ़ॉल्ट रूप से 20 सेकंड का समय तय किया जाता है. समय को सेकंड में दिखाया जाता है. यह समय, मौजूदा समय में चल रहे आइटम के खत्म होने के समय के हिसाब से होता है. सिर्फ़ पॉज़िटिव वैल्यू मान्य होती हैं. उदाहरण के लिए, अगर वैल्यू 10 सेकंड है, तो यह आइटम पिछले आइटम के खत्म होने से 10 सेकंड पहले प्रीलोड हो जाएगा. अगर प्रीलोड होने में लगने वाला समय, currentItem पर बचे हुए समय से ज़्यादा है, तो प्रीलोडिंग की प्रोसेस जल्द से जल्द शुरू हो जाएगी. इसलिए, अगर queueItem पर प्रीलोड की बहुत बड़ी वैल्यू तय की जाती है, तो इसका मतलब यह होगा कि जब भी हम मौजूदा आइटम चला रहे हैं, तब हम अगले आइटम को पहले से ही प्रीलोड कर रहे हैं. हालांकि, हम इस सेटिंग और विकल्प को डेवलपर के लिए छोड़ देते हैं, क्योंकि इस वैल्यू से, मौजूदा आइटम के बैंडविड्थ और स्ट्रीमिंग की परफ़ॉर्मेंस पर असर पड़ सकता है.

पहले से लोड करने की सुविधा, डिफ़ॉल्ट रूप से एचएलएस, डैश, और स्मूथ स्ट्रीमिंग वाले कॉन्टेंट के लिए काम करेगी.

MP4 वीडियो और MP3 जैसी ऑडियो फ़ाइलों को पहले से लोड नहीं किया जाएगा, क्योंकि Cast डिवाइस सिर्फ़ एक मीडिया एलिमेंट के साथ काम करते हैं. साथ ही, किसी कॉन्टेंट आइटम के चलने के दौरान, इनका इस्तेमाल पहले से लोड करने के लिए नहीं किया जा सकता.

पसंद के मुताबिक बनाए गए मैसेज

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

भेजने वाला व्यक्ति, Web Receiver को मैसेज भेजता है. इसके लिए, वह उस प्लैटफ़ॉर्म के लिए उपलब्ध Sender API का इस्तेमाल करता है जिस पर वह ऐप्लिकेशन चला रहा है. जैसे, Android, iOS या वेब. इवेंट लिसनर को पास किए गए इवेंट ऑब्जेक्ट (जो मैसेज का मेनिफ़ेस्टेशन है) में एक डेटा एलिमेंट (event.data) होता है. इसमें डेटा, इवेंट टाइप की प्रॉपर्टी लेता है.

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

सभी नेमस्पेस को एक स्ट्रिंग से तय किया जाता है. साथ ही, इनकी शुरुआत "urn:x-cast:" से होनी चाहिए. इसके बाद, कोई भी स्ट्रिंग हो सकती है. उदाहरण के लिए, "urn:x-cast:com.example.cast.mynamespace".

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

const context = cast.framework.CastReceiverContext.getInstance();

const CUSTOM_CHANNEL = 'urn:x-cast:com.example.cast.mynamespace';
context.addCustomMessageListener(CUSTOM_CHANNEL, function(customEvent) {
  // handle customEvent.
});

context.start();

इसी तरह, वेब रिसीवर ऐप्लिकेशन, कनेक्ट किए गए सेंडर को मैसेज भेजकर, वेब रिसीवर की स्थिति के बारे में जानकारी दे सकते हैं. वेब रिसीवर ऐप्लिकेशन, CastReceiverContext पर sendCustomMessage(namespace, senderId, message) का इस्तेमाल करके मैसेज भेज सकता है. वेब रिसीवर, मैसेज भेजने वाले किसी व्यक्ति को मैसेज भेज सकता है. ऐसा, उसे मिले मैसेज के जवाब में या ऐप्लिकेशन की स्थिति में बदलाव होने की वजह से किया जा सकता है. पॉइंट-टू-पॉइंट मैसेजिंग (64 केबी की सीमा के साथ) के अलावा, वेब रिसीवर कनेक्ट किए गए सभी सेंडर को मैसेज ब्रॉडकास्ट भी कर सकता है.

ऑडियो डिवाइसों पर कास्ट करना

सिर्फ़ ऑडियो चलाने की सुविधा के बारे में जानने के लिए, ऑडियो डिवाइसों के लिए Google Cast की गाइड देखें.

Android TV

इस सेक्शन में बताया गया है कि Google Web Receiver, आपके इनपुट का इस्तेमाल प्लेबैक के तौर पर कैसे करता है. साथ ही, इसमें Android TV के साथ काम करने की सुविधा के बारे में भी बताया गया है.

अपने ऐप्लिकेशन को रिमोट कंट्रोल के साथ इंटिग्रेट करना

Android TV डिवाइस पर चल रहा Google Web Receiver, डिवाइस के कंट्रोल इनपुट (जैसे, हाथ में पकड़कर इस्तेमाल किया जाने वाला रिमोट कंट्रोल) से मिले इनपुट को urn:x-cast:com.google.cast.media नेमस्पेस के लिए तय किए गए मीडिया प्लेबैक मैसेज के तौर पर ट्रांसलेट करता है. इसके बारे में मीडिया प्लेबैक मैसेज में बताया गया है. आपके ऐप्लिकेशन में इन मैसेज के लिए सहायता उपलब्ध होनी चाहिए, ताकि ऐप्लिकेशन में मीडिया प्लेबैक को कंट्रोल किया जा सके. इससे Android TV के कंट्रोल इनपुट से, बुनियादी प्लेबैक कंट्रोल की अनुमति दी जा सकेगी.

Android TV के साथ काम करने से जुड़े दिशा-निर्देश

यहां कुछ सुझाव दिए गए हैं. साथ ही, कुछ ऐसी सामान्य गलतियों के बारे में बताया गया है जिनसे बचने पर, यह पक्का किया जा सकता है कि आपका ऐप्लिकेशन Android TV के साथ काम करता हो:

• ध्यान दें कि उपयोगकर्ता-एजेंट स्ट्रिंग में "Android" और "CrKey", दोनों शामिल हैं. कुछ साइटें, "Android" लेबल का पता लगाने के बाद, सिर्फ़ मोबाइल साइट पर रीडायरेक्ट कर सकती हैं. यह न मान लें कि उपयोगकर्ता-एजेंट स्ट्रिंग में "Android" का मतलब हमेशा मोबाइल उपयोगकर्ता होता है.
• Android का मीडिया स्टैक, डेटा फ़ेच करने के लिए पारदर्शी GZIP का इस्तेमाल कर सकता है. पक्का करें कि आपका मीडिया डेटा, Accept-Encoding: gzip के अनुरोधों का जवाब दे सकता हो.
• Android TV पर HTML5 मीडिया इवेंट, Chromecast की तुलना में अलग-अलग समय पर ट्रिगर हो सकते हैं. इससे ऐसी समस्याएं सामने आ सकती हैं जो Chromecast पर नहीं दिखती थीं.
• मीडिया अपडेट करते समय, <audio>/<video> एलिमेंट से फ़ायर किए गए मीडिया से जुड़े इवेंट का इस्तेमाल करें. जैसे, timeupdate, pause, और waiting. नेटवर्किंग से जुड़े इवेंट, जैसे कि progress, suspend, और stalled का इस्तेमाल न करें. ऐसा इसलिए, क्योंकि ये इवेंट प्लैटफ़ॉर्म पर निर्भर होते हैं. अपने रिसीवर में मीडिया इवेंट मैनेज करने के बारे में ज़्यादा जानने के लिए, मीडिया इवेंट देखें.
• एचटीटीपीएस सर्टिफ़िकेट कॉन्फ़िगर करते समय, इंटरमीडिएट सीए सर्टिफ़िकेट शामिल करना न भूलें. यह पुष्टि करने के लिए कि आपकी साइट के लिए भरोसेमंद सर्टिफ़िकेशन पाथ में, “extra download” लेबल वाला CA सर्टिफ़िकेट शामिल है या नहीं, Qualsys SSL टेस्ट पेज देखें. अगर ऐसा है, तो हो सकता है कि यह Android पर काम करने वाले प्लैटफ़ॉर्म पर लोड न हो.
• Chromecast, रिसीवर पेज को 720 पिक्सल के ग्राफ़िक्स प्लेन पर दिखाता है. वहीं, Android TV जैसे अन्य Cast प्लैटफ़ॉर्म, पेज को 1080 पिक्सल तक दिखा सकते हैं. पक्का करें कि आपका रिसीवर पेज, अलग-अलग रिज़ॉल्यूशन पर अच्छी तरह से काम करता हो.