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 ऑब्जेक्ट यूआरएल पर मौजूद वेब पेज
चुने हुए डिसप्ले पर दिखाया जाएगा. क्या बात है!
अब हम आगे जाकर, "बंद करें" पर नज़र रख सकते हैं और "बंद करो" इवेंट जैसा दिखाया गया है
देखें. ध्यान दें कि किसी "बंद" से फिर से कनेक्ट करना संभव है
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);
});
}
मैसेज पाने वाला कनेक्शन "मैसेज" ट्रिगर करता है ऐसा इवेंट जिसे सुना जा सकता है.
मैसेज कोई स्ट्रिंग, ब्लॉब, 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 में "कास्ट करें" चालू होता है उपयोगकर्ता किसी भी समय ब्राउज़र मेन्यू इस्तेमाल करके,
वेबसाइट. अगर आपको इस मेन्यू के डिफ़ॉल्ट प्रज़ेंटेशन को कंट्रोल करना है, तो
किसी कस्टम इकाई को 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 सहायता बाद में मिलेगी.
संसाधन
- Chrome की सुविधा की स्थिति: https://www.chromestatus.com/features#presentation%20api
- लागू करने से जुड़ी गड़बड़ियां: https://crbug.com/?q=component:Blink>PresentationAPI
- प्रज़ेंटेशन एपीआई की खास जानकारी: https://w3c.github.io/presentation-api/
- खास जानकारी से जुड़ी समस्याएं: https://github.com/w3c/presentation-api/issues