Chromecast तैयार के लिए Android विकास

1. Chromecast क्या है और यह कैसे काम करता है?

Chromecast एक ऐसा गैजेट है जो उपयोगकर्ताओं को मोबाइल डिवाइस से मीडिया सामग्री को टीवी पर स्थानांतरित करने की अनुमति देता है।

24 जुलाई, 2013 को $ 35 के एक उपकरण की घोषणा की गई और टाइम के 2013 के अनुसार वर्ष के गैजेट का नाम दिया गया। सबसे पहले, यह फोन, टैबलेट या लैपटॉप से ​​मीडिया सामग्री को टीवी जैसे बड़े स्क्रीन डिवाइस में स्थानांतरित करने के लिए एक तकनीक है।


घोषणा के तुरंत बाद, क्रोमकास्ट एसडीके बीटा परीक्षण में था, जिसने इसके व्यावहारिक उपयोग को सीमित कर दिया था। लेकिन 3 फरवरी 2014 को, Google ने एसडीके का अंतिम संस्करण जारी किया।

अब Chromecast का समर्थन करने वाले अनुप्रयोगों की संख्या तेजी से बढ़ रही है, इसलिए हमने Android के लिए Chromecast तैयार अनुप्रयोगों को विकसित करने में अपने अनुभव का वर्णन करने का निर्णय लिया। यह लेख क्रोमकास्ट तैयार अनुप्रयोग के विकास के विषय को कवर करता है: नीचे आपको डेवलपर्स के लिए कुछ नोट्स, टिप्पणियां और सिफारिशें और साथ ही हमारे आवेदन के उदाहरण और स्रोत कोड मिलेंगे।

यह कैसे काम करता है?

क्रोमकास्ट डिवाइस क्रोम ब्राउज़र का एक विशेष संस्करण चलाता है जो विशेष वेब एप्लिकेशन (जिसे "रिसीवर" एप्लिकेशन कहा जाता है) प्रदर्शित कर सकता है। इन एप्लिकेशन का तात्कालिक लक्ष्य उपयोगकर्ताओं को समाप्त करने के लिए मीडिया सामग्री प्रदर्शित करना है। लेकिन Chromecast डिवाइस में कोई प्रत्यक्ष नियंत्रण लीवर नहीं है, इसलिए स्पष्ट रूप से कुछ बाहरी नियंत्रण मौजूद होने चाहिए, और जैसा कि पहले उल्लेख किया गया है, यह या तो एक मोबाइल एप्लिकेशन या वेब एप्लिकेशन हो सकता है (जिसे "प्रेषक" एप्लिकेशन कहा जाता है)।

इस प्रकार, प्रेषक अनुप्रयोगों का उपयोग करके, हम Chromecast डिवाइस को नियंत्रित कर सकते हैं। लेकिन वास्तव में ऐसा कैसे होता है?

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

2. अनुप्रयोग विकास

सामान्य तौर पर, Chromecast के अनुप्रयोग विकास में प्रेषक और रिसीवर अनुप्रयोगों का विकास शामिल है। जैसा कि पहले उल्लेख किया गया है, एक प्रेषक आवेदन एक मोबाइल या वेब अनुप्रयोग हो सकता है, हालांकि यह एक सीमा नहीं है। रिसीवर एप्लिकेशन एक विशेष वेब एप्लिकेशन है जिसे क्रोमकास्ट डिवाइस पर चलाया जा सकता है।

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

लेकिन इससे पहले कि हम शुरुआत करें, हमें एक Chromecast डिवाइस सेट करने और अपने एप्लिकेशन को पंजीकृत करने की आवश्यकता है।

2.1। Chromecast डिवाइस सेटअप

प्रक्रिया यहाँ वर्णित है ।

2.2। आवेदन पंजीकरण

एप्लिकेशन आईडी प्राप्त करने के लिए आपको अपना आवेदन पंजीकृत करना होगा (जिसका उपयोग "प्रेषक" और "रिसीवर" अनुप्रयोगों दोनों में किया जाएगा)।

पंजीकरण प्रक्रिया यहाँ वर्णित है ।

2.3। एक "प्रेषक" अनुप्रयोग का विकास करना

अब हम "प्रेषक" आवेदन की विकास प्रक्रिया पर चर्चा करेंगे। यद्यपि कार्यात्मक होने के लिए, "प्रेषक" एप्लिकेशन को एक कार्यशील "रिसीवर" एप्लिकेशन की आवश्यकता होती है। इसलिए हम केवल "रिसीवर" एप्लिकेशन को विकसित करने के बाद परिणामों की जांच कर सकते हैं।

इसके अलावा, एंड्रॉइड के लिए "प्रेषक" एप्लिकेशन का विकास यहां वर्णित है ।

हमारे मामले में, "प्रेषक" एप्लिकेशन एक एंड्रॉइड एप्लिकेशन है जो "रिसीवर" एप्लिकेशन के साथ संचार करने के लिए प्रौद्योगिकियों और पुस्तकालयों के एक सेट का उपयोग करता है।

2.3.1। आवश्यक शर्तें:

• Android एप्लिकेशन विकास के लिए IDE (उदा। ग्रहण)
• Android एसडीके
• Google Play सेवाएँ SDK संस्करण 15 या उच्चतर
• Android सहायता लाइब्रेरी से appcompat और मीडिया राउटर लाइब्रेरी

2.3.2। कंकाल निर्माण

एक रिक्त Android एप्लिकेशन बनाएं और निम्नलिखित लाइब्रेरी और निर्भरताएं जोड़ें:

• android-sdk \ extras \ android \ support \ v7 \ appcompat
• android-sdk \ extras \ android \ support \ v7 \ mediarouter
• android-sdk \ extras \ google \ google_play_services \ libproject \ google-play-services_lib

Android का न्यूनतम संस्करण, अनुमतियाँ और अन्य आवश्यक डेटा निर्दिष्ट करें:

<uses-sdk android:minSdkVersion="9" android:targetSdkVersion="19" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <application android:label="@string/app_name" android:icon="@drawable/ic_launcher" android:theme="@style/Theme.AppCompat.Light.DarkActionBar"> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> </application> 

अब ActionBarActivity का विस्तार करने वाली गतिविधि बनाएं।

2.3.3। कार्यान्वयन

आवेदन में कई महत्वपूर्ण शर्तें हैं:

• डिवाइस की खोज
• सत्र के साथ काम करें
• प्रेषक और रिसीवर अनुप्रयोगों के बीच संदेश

आइए प्रत्येक राज्य का अधिक विस्तार से वर्णन करें:

1) डिवाइस की खोज:

"कास्ट" बटन दबाकर डिटेक्शन को ट्रिगर किया जा सकता है। इस बटन को प्रदर्शित करने के कई तरीके हैं, लेकिन हम MediaRouter ActionBar प्रदाता का उपयोग करेंगे।

अपने मेनू में निम्नलिखित जोड़ें:

 <item android:id="@+id/media_route_menu_item" android:title="Route" app:actionProviderClass="android.support.v7.app.MediaRouteActionProvider" app:showAsAction="always"/> 

निम्नलिखित क्षेत्र प्रक्रिया में शामिल हैं:

 private final MediaRouter.Callback mediaRouterCallback = new MediaRouter.Callback() { @Override public void onRouteSelected(MediaRouter router, MediaRouter.RouteInfo route) { CastDevice device = CastDevice.getFromBundle(route.getExtras()); //setSelectedDevice(device); } @Override public void onRouteUnselected(MediaRouter router, MediaRouter.RouteInfo route) { //setSelectedDevice(null); } }; private MediaRouter mediaRouter; private MediaRouteSelector mediaRouteSelector; 

प्रारंभिक राउटर विधि में मीडिया राउटर और मीडियारूटसेलेक्टर को प्रारंभ करें:

 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mediaRouter = MediaRouter.getInstance(getApplicationContext()); mediaRouteSelector = new MediaRouteSelector.Builder().addControlCategory(CastMediaControlIntent.categoryForCast(APP_ID)).build(); } 

कार्रवाई प्रदाता कॉन्फ़िगर करें:

 @Override public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); getMenuInflater().inflate(R.menu.main, menu); MenuItem mediaRouteMenuItem = menu.findItem(R.id.media_route_menu_item); MediaRouteActionProvider mediaRouteActionProvider = (MediaRouteActionProvider) MenuItemCompat.getActionProvider(mediaRouteMenuItem); mediaRouteActionProvider.setRouteSelector(mediaRouteSelector); return true; } 

और onStart और onStop विधियों में कॉलबैक पंजीकृत करें:

 @Override protected void onStart() { super.onStart(); mediaRouter.addCallback(mediaRouteSelector, mediaRouterCallback, MediaRouter.CALLBACK_FLAG_PERFORM_ACTIVE_SCAN); } @Override protected void onStop() { //setSelectedDevice(null); mediaRouter.removeCallback(mediaRouterCallback); super.onStop(); } 

APP_ID भाग 2.2 में आवेदन को पंजीकृत करते समय प्राप्त आवेदन पहचानकर्ता के साथ एक स्ट्रिंग है

अब एंड्रॉइड डिवाइस को क्रोमकास्ट डिवाइस के साथ साझा किए गए वाईफाई नेटवर्क से कनेक्ट करें और एप्लिकेशन लॉन्च करें (ध्यान दें कि रिसीवर एप्लिकेशन पहले से ही उपलब्ध होना चाहिए। यह हमारे मामले में बहुत सरल है ताकि हम इसे स्रोत कोड से ले सकें। हम इसके बाद वापस आ जाएंगे)।

यदि सभी शर्तें पूरी होती हैं, तो प्रसारण आइकन ऊपरी दाएं कोने में दिखाई देगा। इस पर क्लिक करने से उपलब्ध उपकरणों की सूची खुल जाएगी, जिससे आप उनमें से किसी एक से जुड़ सकते हैं। कनेक्ट करने के बाद, आइकन नीला हो जाएगा, यह दर्शाता है कि कनेक्शन स्थापित है। इसे फिर से क्लिक करने से एक और डायलॉग खुलेगा जिससे आप Chromecast डिवाइस पर वॉल्यूम बदल सकते हैं या इससे डिस्कनेक्ट कर सकते हैं:

2) सत्र प्रबंधन:

सत्र का प्रबंधन करने के लिए, हम कई क्षेत्रों और विधियों को जोड़ेंगे:

 @Override protected void onStart() { super.onStart(); mediaRouter.addCallback(mediaRouteSelector, mediaRouterCallback, MediaRouter.CALLBACK_FLAG_PERFORM_ACTIVE_SCAN); } @Override protected void onStop() { //setSelectedDevice(null); mediaRouter.removeCallback(mediaRouterCallback); super.onStop(); } 

और कई श्रोता:

 private CastDevice selectedDevice; private GoogleApiClient apiClient; private boolean applicationStarted; private void setSelectedDevice(CastDevice device) { Log.d(TAG, "setSelectedDevice: " + device); selectedDevice = device; if (selectedDevice != null) { try { stopApplication(); disconnectApiClient(); connectApiClient(); } catch (IllegalStateException e) { Log.w(TAG, "Exception while connecting API client", e); disconnectApiClient(); } } else { if (apiClient != null) { disconnectApiClient(); } mediaRouter.selectRoute(mediaRouter.getDefaultRoute()); } } private void connectApiClient() { Cast.CastOptions apiOptions = Cast.CastOptions.builder(selectedDevice, castClientListener).build(); apiClient = new GoogleApiClient.Builder(this) .addApi(Cast.API, apiOptions) .addConnectionCallbacks(connectionCallback) .addOnConnectionFailedListener(connectionFailedListener) .build(); apiClient.connect(); } private void disconnectApiClient() { if (apiClient != null) { apiClient.disconnect(); apiClient = null; } } private void stopApplication() { if (apiClient == null) return; if (applicationStarted) { Cast.CastApi.stopApplication(apiClient); applicationStarted = false; } } 

अब यदि आप Chromecast से जुड़ते हैं, तो "रिसीवर" एप्लिकेशन सक्रिय हो जाएगा और आपको डिबगिंग की कुछ जानकारी दिखाई देगी। संदेश के विषय पर विस्तार करें।

3) प्रेषक और रिसीवर अनुप्रयोगों के बीच मैसेजिंग।

निम्न विधि का उपयोग करके आउटगोइंग संदेश भेजे जाते हैं:

 private void sendMessage(String message) { if (apiClient != null) { try { Cast.CastApi.sendMessage(apiClient, NAMESPACE, message) .setResultCallback(new ResultCallback<Status>() { @Override public void onResult(Status result) { if (!result.isSuccess()) { Log.e(TAG, "Sending message failed"); } } }); } catch (Exception e) { Log.e(TAG, "Exception while sending message", e); } } } 

हमारे मामले में, NAMESPACE स्ट्रिंग "कलश: x- कास्ट: com.ls.cast.sample" है। इसका उपयोग हमारे चैनल को दूसरों से अलग करने के लिए किया जाता है। रिसीवर कनेक्टिविटी में उसी कनेक्टिविटी का उपयोग किया जाना चाहिए।

आने वाले संदेशों को संसाधित करने के लिए, हमें Cast.essageReceivedCallback को संदेशों के प्राप्तकर्ता के रूप में पंजीकृत करना होगा। हम इसे कनेक्शन में करेंगे। कॉलबैक:

 @Override public void onResult(Cast.ApplicationConnectionResult result) { Status status = result.getStatus(); if (status.isSuccess()) { applicationStarted = true; try { Cast.CastApi.setMessageReceivedCallbacks(apiClient, NAMESPACE, incomingMsgHandler); } catch (IOException e) { Log.e(TAG, "Exception while creating channel", e); } } } public final Cast.MessageReceivedCallback incomingMsgHandler = new Cast.MessageReceivedCallback() { @Override public void onMessageReceived(CastDevice castDevice, String namespace, String message) { } }; 

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

2.4। एक रिसीवर अनुप्रयोग का विकास करना

"रिसीवर" एप्लिकेशन एक विशेष वेब एप्लिकेशन है जो क्रोमकास्ट डिवाइस पर चल सकता है।

आवेदन का अंतिम लक्ष्य उपयोगकर्ता को उपयोगी जानकारी दिखाना है और उसे "प्रेषक" आवेदन के माध्यम से इस जानकारी के साथ बातचीत करने की अनुमति देना है।

वेब एप्लिकेशन के लिए जानकारी प्रदर्शित करने का पहला काम आम है और यह बहुत अलग हो सकता है: यह YouTube जैसे मीडिया एप्लिकेशन या मीडिया प्लेयर जैसी कोई चीज़ हो सकती है, या यह कुछ हेवीवेट UI एप्लिकेशन हो सकता है, जैसे Google मैप्स अतिरिक्त परतों के साथ, या यह हो सकता है कुछ आंकड़ों को प्रदर्शित करने वाला एक सरल HTML पृष्ठ हो।

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

सबसे पहले, ध्यान रखें कि आवेदन को पंजीकृत होना चाहिए जैसा कि खंड 2.2 में वर्णित है। पंजीकरण करते समय, आपको एक URL प्रदान करना होगा। इस URL का उपयोग आपके रिसीवर एप्लिकेशन को होस्ट करने के लिए किया जाएगा। एक रिसीवर अनुप्रयोग के विकास में निम्नलिखित चरण होते हैं:
1) स्थानीय रूप से अनुप्रयोग विकास;

2) इसे निर्दिष्ट URL पर रखना;

3) एक विशेष यूआरएल के माध्यम से आवेदन की सक्रियता और डिबगिंग। एप्लिकेशन को सक्रिय करने के लिए, बस प्रेषक एप्लिकेशन लॉन्च करें और डिवाइस से कनेक्ट करें। "रिसीवर" एप्लिकेशन को डीबग करने के लिए, अपने पीसी पर निम्न लिंक खोलें: http: // CHROMECAST_IP: 9222 , जहां CHROMECAST_IP Chromecast डिवाइस का IP पता है। डिवाइस का आईपी पता प्राप्त करने के लिए, पीसी के लिए या मोबाइल उपकरणों के लिए क्रोमकास्ट सेटिंग्स यूटिलिटी चलाएं। कृपया ध्यान दें कि कॉन्फ़िगरेशन के लिए उपयोग किए जाने वाले उपकरणों में Chromecast डिवाइस के साथ एक सीधा वाईफाई कनेक्शन होना चाहिए (इस प्रकार, आपके पीसी के पास वाईफाई एडाप्टर होना चाहिए यदि आप इसे कॉन्फ़िगरेशन के लिए चुनते हैं):


यह भी नोट करें कि "अपडेट के लिए जाँच करते समय" इस Chromecast के सीरियल नंबर को भेजें "डिबगिंग को सक्षम करने के लिए सक्षम होना चाहिए। ब्राउज़र द्वारा पाया गया पता खुलने के बाद, आप निम्नलिखित देखेंगे:


हाइलाइट किया गया लिंक निष्पादन एप्लिकेशन को संदर्भित करता है। यदि आप इस पर क्लिक करते हैं, तो क्रोम डेवलपर टूल वाला एक नया पृष्ठ खुल जाएगा। स्थानीय डेवलपर टूल के साथ गड़बड़ न करें - वास्तव में, वे दूरस्थ हैं और आपके Chromecast डिवाइस से संबंधित हैं:


अब हम अंततः एप्लिकेशन विकसित करने के लिए तैयार हैं।

सबसे पहले, Chromecast समर्थन स्क्रिप्ट सक्षम करें:

 <script src="https://www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"> 

उसके बाद, हमें एक cast.receiver.CastReceiverManager उदाहरण की जरूरत है, onSenderConnected, onSenderDisconnected और onMessage श्रोताओं को कनेक्ट करें और संदेश प्रारंभ करें। हम इसे onLad श्रोता में कर सकते हैं:

 window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance(); window.castReceiverManager.onSenderConnected = onChannelOpened; window.castReceiverManager.onSenderDisconnected = onChannelClosed; window.customMessageBus = window.castReceiverManager.getCastMessageBus(namespace); window.customMessageBus.onMessage = onMessage; window.castReceiverManager.start(); 

आने वाले संदेशों को संसाधित करने के लिए निम्न विधि का उपयोग किया जा सकता है:

 function onMessage(event) { var message = event.data; var senderId = event.senderId; log("message from: " + senderId + " message: " + message); } 

निवर्तमान संदेश भेजने के लिए निम्न विधि का उपयोग किया जाएगा:

 function broadcast(message) { window.customMessageBus.broadcast(message); } 

कृपया ध्यान दें कि कई प्रेषक अनुप्रयोग एक ही समय में एक रिसीवर आवेदन से जुड़ सकते हैं। इसलिए, हम सभी जुड़े प्रेषक अनुप्रयोगों को संदेश भेजने के लिए प्रसारण विधि का उपयोग करते हैं।

हमारे डेमो एप्लिकेशन में, हम प्रदर्शन उद्देश्यों के लिए टाइमर संदेश भेजते हैं।

और कुछ और टिप्पणियां। पाठ का रंग डिफ़ॉल्ट रूप से काला है, इसलिए कुछ देखने के लिए इसे CSS के माध्यम से फिर से परिभाषित करना होगा। यह भी ध्यान दें कि Chromecast डिवाइस पर स्क्रीन रिज़ॉल्यूशन 1280x720 पिक्सल है।

Fuuh। हमने कस्टम प्रेषक और रिसीवर एप्लिकेशन बनाए हैं जो दोनों दिशाओं में संदेशों का आदान-प्रदान करने में सक्षम हैं। यह क्रोमकास्ट डिवाइस की पूरी शक्ति को समझने और उपयोग करने के लिए पर्याप्त होना चाहिए।

पूर्ण स्रोत कोड यहां डाउनलोड किया जा सकता है ।

PS वास्तव में, मैं लेख का लेखक भी हूं, इसलिए मैं तकनीकी सवालों के जवाब दे सकता हूं।