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

फ्रांकोइस ब्यूफ़ोर्ट
फ्रांकोइस ब्यूफ़ोर्ट
GitHub

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

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

बैकग्राउंड

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

अब हम आगे जाकर "बंद करें" और "खत्म करें" इवेंट को मॉनिटर कर सकते हैं, जैसा कि नीचे दिखाया गया है. ध्यान दें कि "बंद" presentationConnection से presentationRequest.reconnect(presentationId) के साथ फिर से कनेक्ट किया जा सकता है, जहां 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);
  });
}

मैसेज पाने वाला कनेक्शन, एक "मैसेज" इवेंट ट्रिगर करता है, जिसे आप सुन सकते हैं. मैसेज, स्ट्रिंग, Blob, 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 में एक "कास्ट" ब्राउज़र मेन्यू है. उपयोगकर्ता इसे जब चाहें, तब इस्तेमाल कर सकते हैं. अगर आपको इस मेन्यू के लिए डिफ़ॉल्ट प्रज़ेंटेशन को कंट्रोल करना है, तो navigator.presentation.defaultRequest को पहले बनाए गए कस्टम presentationRequest ऑब्जेक्ट के लिए असाइन करें.

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

रिसॉर्स