ב-Chrome 66 אפשר להשתמש בדפי אינטרנט במסך מצורף משני דרך presentation API וכדי לשלוט בתוכן שלו באמצעות המצגת Gettingr API.
רקע
עד עכשיו, מפתחי אתרים יכלו ליצור חוויות שבהן משתמשים יראו תוכן ב-Chrome ששונה מהתוכן שהם רואים בשלט הרחוק ועדיין לשלוט בחוויה באופן מקומי. דוגמאות כוללים ניהול של תור ההפעלה באתר youtube.com בזמן שהסרטונים בטלוויזיה, או לראות אוסף סרטונים של הערות עם הערות דובר במחשב נייד בזמן שמוצג במסך מלא שיתוף המסך מוצג בפעילות ב-Hangouts.
יש תרחישים שבהם משתמשים פשוט ירצו להציג תוכן מסך נוסף שמצורף אליו. לדוגמה, נניח שמשתמש בחדר ישיבות שיש בהם מקרן שאליו מחוברים כבל HDMI. במקום לשקף את המצגת בנקודת קצה מרוחקת, המשתמש רוצה מאוד להציג את השקפים במסך מלא במקרן, ולהשאיר את יש מסך של מחשב נייד שזמין להערות דובר ולבקרת שקף. כשהאתר המחבר יכול לתמוך בכך באופן בסיסי מאוד (למשל, הקפצה של חלון, שאותו המשתמש צריך לגרור באופן ידני לתצוגה המשנית למקסם למסך מלא), זה דבר מסורבל ומספק בין תצוגה מקומית לבין מצגת מרחוק.
הצגת דף
אסביר לך איך להשתמש ב-presentation API כדי להציג דף אינטרנט במסך המשני המצורף. התוצאה הסופית זמינה בכתובת https://googlechrome.github.io/samples/presentation-api/.
קודם כול, ניצור אובייקט PresentationRequest
חדש שמכיל את
כתובת ה-URL שאנחנו רוצים להציג בתצוגה המשנית המצורפת.
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);
});
}
הרשימה שמוצגת למשתמש עשויה לכלול גם נקודות קצה (endpoint) מרוחקות כמו מכשירי Chromecast, אם אתם מחוברים לרשת שמפרסמת אותם. שימו לב מסכים משוכפלים לא מופיעים ברשימה. פרטים נוספים זמינים בכתובת http://crbug.com/840466.
כשההבטחה נסגרת, דף האינטרנט בכתובת ה-URL של האובייקט PresentationRequest
יוצגו במסך שנבחר. Et voilà!
עכשיו אנחנו יכולים להמשיך יותר ולעקוב אחרי "סגירה" ו"סיום" אירועים כפי שמוצגים
שלמטה. שים לב שאפשר להתחבר מחדש למכשיר 'סגור'
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.
עוד דבר אחד
Chrome כולל 'העברה (cast)' שמשתמשים בתפריט הדפדפן יכולים להפעיל בכל שלב כשהם מבקרים
האתר. אם ברצונך לשלוט במצגת המוגדרת כברירת המחדל בתפריט הזה,
הקצאה של navigator.presentation.defaultRequest
להתאמה אישית
האובייקט presentationRequest
נוצר מוקדם יותר.
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
טיפים למפתחים
כדי לבדוק את הדף המקבל ולנפות באגים, צריך לעבור אל
chrome://inspect
, בוחרים באפשרות 'אחר' ולוחצים על הקישור 'בדיקה' לצד
את כתובת ה-URL הנוכחית שמוצגת.
כדאי גם לבדוק את chrome://media-router-internals
הפנימי
כדי להתעמק בתהליכי הגילוי/הזמינות הפנימיים.
המאמרים הבאים
החל מגרסה 66 של Chrome, יש תמיכה בפלטפורמות ChromeOS, Linux ו-Windows. Mac תהיה תמיכה בהמשך.
משאבים
- סטטוס תכונות Chrome: https://www.chromestatus.com/features#presentation%20api
- באגים בהטמעה: https://crbug.com/?q=component:Blink>PresentationAPI
- מפרט ה-API למצגות: https://w3c.github.io/presentation-api/
- בעיות במפרטים: https://github.com/w3c/presentation-api/issues