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

François Beaufort
François Beaufort
GitHub

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

1/2. उपयोगकर्ता, अटैच किया गया दूसरा डिसप्ले चुनता है
1/2. उपयोगकर्ता, अटैच किया गया दूसरा डिसप्ले चुनता है
2/2. पहले से चुने गए डिसप्ले में, वेब पेज अपने-आप दिखाया जाता है
2/2. चुने गए डिसप्ले में वेब पेज अपने-आप दिखाया जाता है

बैकग्राउंड

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

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

पेज दिखाना

चलिए, हम आपको यह जानकारी देते हैं कि अटैच किए गए दूसरे डिसप्ले पर वेब पेज दिखाने के लिए, presentation API का इस्तेमाल कैसे किया जा सकता है. आखिरी नतीजा 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 ऑब्जेक्ट यूआरएल पर मौजूद वेब पेज को चुने गए डिसप्ले में दिखाया जाता है. क्या बात है!

अब हम आगे जाकर, "बंद करें" और "बंद करें" इवेंट पर नज़र रख सकते हैं जैसा कि नीचे दिखाया गया है. ध्यान दें कि 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 पर उपलब्ध है.

Photowall डेमो का स्क्रीनशॉट
फ़ोटो होसे लुइस मिएज़ा ने / CC BY-NC-SA 2.0

एक और बात

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 सहायता बाद में मिलेगी.

संसाधन