वेब पेजों को अटैच किए गए दूसरे डिसप्ले पर प्रज़ेंट करना

François Beaufort

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

बैकग्राउंड

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

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

पेज दिखाना

आइए, हम आपको प्रज़ेंटेशन एपीआई का इस्तेमाल करके, अटैच किए गए सेकंडरी डिसप्ले पर वेब पेज दिखाने का तरीका बताते हैं. आखिरी नतीजा https://googlechrome.github.io/samples/presentation-api/ पर उपलब्ध है.

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

const presentationRequest = new PresentationRequest('receiver.html');

In this article, I won’t cover use cases where the parameter passed to
`PresentationRequest` can be an array like `['cast://foo’, 'apple://foo',
'https://example.com']` as this is not relevant there.

We can now monitor presentation display availability and toggle a "Present"
button visibility based on presentation displays availability. Note that we can
also decide to always show this button.

<aside class="caution"><b>Caution:</b> The browser may use more energy while the <code>availability</code> object is alive
and actively listening for presentation display availability changes. Please
use it with caution in order to save energy on mobile.</aside>

```js
presentationRequest.getAvailability()
  .then(availability => {
    console.log('Available presentation displays: ' + availability.value);
    availability.addEventListener('change', function() {
      console.log('> Available presentation displays: ' + availability.value);
    });
  })
  .catch(error => {
    console.log('Presentation availability not supported, ' + error.name + ': ' +
        error.message);
  });

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

function onPresentButtonClick() {
  presentationRequest.start()
  .then(connection => {
    console.log('Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    console.log(error);
  });
}

उपयोगकर्ता को दिखाई गई सूची में, रिमोट एंडपॉइंट भी शामिल हो सकते हैं. जैसे, Chromecast डिवाइस, अगर आपने उनका विज्ञापन दिखाने वाले नेटवर्क से कनेक्ट किया है. ध्यान दें कि सूची में डुप्लीकेट डिसप्ले शामिल नहीं हैं. http://crbug.com/840466 देखें.

जब वादा पूरा हो जाता है, तो चुने गए डिसप्ले पर PresentationRequest ऑब्जेक्ट यूआरएल का वेब पेज दिखाया जाता है. Et voilà!

अब हम आगे जाकर, "बंद करें" और "बंद करें" इवेंट पर नज़र रख सकते हैं जैसा कि नीचे दिखाया गया है. ध्यान दें कि presentationRequest.reconnect(presentationId) के साथ "बंद"presentationConnection से फिर से कनेक्ट किया जा सकता है, जहां presentationId पिछले presentationRequest ऑब्जेक्ट का आईडी है.

function onCloseButtonClick() {
  // Disconnect presentation connection but will allow reconnection.
  presentationConnection.close();
}

presentationConnection.addEventListener('close', function() {
  console.log('Connection closed.');
});


function onTerminateButtonClick() {
  // Stop presentation connection for good.
  presentationConnection.terminate();
}

presentationConnection.addEventListener('terminate', function() {
  console.log('Connection terminated.');
});

पेज के साथ बातचीत करना

अब आप सोच रहे होंगे कि यह तो अच्छा है, लेकिन मैं अपने कंट्रोलर पेज (जिस पेज को हमने अभी बनाया है) और रिसीवर पेज (जिस पेज को हमने PresentationRequest ऑब्जेक्ट को पास किया है) के बीच मैसेज कैसे भेजूं?

सबसे पहले, navigator.presentation.receiver.connectionList का इस्तेमाल करके, रिसीवर पेज पर मौजूदा कनेक्शन वापस पाएं और नीचे दिखाए गए तरीके से इनकमिंग कनेक्शन सुनें.

// Receiver page

navigator.presentation.receiver.connectionList
.then(list => {
  list.connections.map(connection => addConnection(connection));
  list.addEventListener('connectionavailable', function(event) {
    addConnection(event.connection);
  });
});

function addConnection(connection) {

  connection.addEventListener('message', function(event) {
    console.log('Message: ' + event.data);
    connection.send('Hey controller! I just received a message.');
  });

  connection.addEventListener('close', function(event) {
    console.log('Connection closed!', event.reason);
  });
}

मैसेज पाने वाला कनेक्शन, "मैसेज" इवेंट को ट्रिगर करता है. इस इवेंट को सुना जा सकता है. मैसेज कोई स्ट्रिंग, ब्लॉब, ArrayBuffer या ArrayBufferView हो सकता है. इसे भेजना उतना ही आसान है जितना कि कंट्रोलर पेज या रिसीवर पेज से connection.send(message) को कॉल करना.

// Controller page

function onSendMessageButtonClick() {
  presentationConnection.send('Hello!');
}

presentationConnection.addEventListener('message', function(event) {
  console.log('I just received ' + event.data + ' from the receiver.');
});

https://googlechrome.github.io/samples/presentation-api/ पर सैंपल के साथ प्रयोग करके, जानें कि यह कैसे काम करता है. हमें यकीन है कि आपको भी यह उतना ही पसंद आएगा जितना हमें.

सैंपल और डेमो

वह आधिकारिक Chrome नमूना देखें जिसका इस्तेमाल हमने इस लेख के लिए किया है.

साथ ही, हमारा सुझाव है कि आप इंटरैक्टिव Photowall डेमो का भी इस्तेमाल करें. इस वेब ऐप्लिकेशन की मदद से, एक से ज़्यादा कंट्रोलर एक साथ मिलकर, प्रज़ेंटेशन डिसप्ले पर फ़ोटो स्लाइड शो दिखा सकते हैं. कोड https://github.com/GoogleChromeLabs/presentation-api-samples पर उपलब्ध है.

एक और बात

Chrome में "कास्ट" ब्राउज़र मेन्यू होता है. उपयोगकर्ता किसी वेबसाइट पर जाते समय, इसे कभी भी चालू कर सकते हैं. अगर आपको इस मेन्यू के लिए डिफ़ॉल्ट प्रज़ेंटेशन कंट्रोल करना है, तो पहले से बनाए गए कस्टम presentationRequest ऑब्जेक्ट को navigator.presentation.defaultRequest असाइन करें.

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

डेवलपर के लिए सलाह

रिसीवर पेज की जांच करने और उसे डीबग करने के लिए, इंटरनल chrome://inspect पेज पर जाएं. इसके बाद, “अन्य” चुनें और फ़िलहाल दिखाए जा रहे यूआरएल के बगल में मौजूद “जांच करें” लिंक पर क्लिक करें.

डिस्कवरी/उपलब्धता की इंटरनल प्रोसेस के बारे में जानने के लिए, इंटरनल chrome://media-router-internals पेज भी देखा जा सकता है.

आगे क्या करना है

Chrome 66 से, यह सुविधा ChromeOS, Linux, और Windows प्लैटफ़ॉर्म पर काम करती है. Mac सहायता बाद में मिलेगी.

संसाधन

• Chrome की सुविधा की स्थिति: https://www.chromestatus.com/features#presentation%20api
• लागू करने से जुड़ी गड़बड़ियां: https://crbug.com/?q=component:Blink>PresentationAPI
• Presentation API स्पेसिफ़िकेशन: https://w3c.github.io/presentation-api/
• खास समस्याएं: https://github.com/w3c/presentation-api/issues