הצגת דפי אינטרנט במסכים מצורפים משניים

פרנסואה בופורט
פרנסואה בופורט
GitHub

ב-Chrome 66 דפי אינטרנט יכולים להשתמש במסך מצורף משני דרך presentation API ולשלוט בתוכן שלו דרך presentation Receiver API.

2/1. המשתמש בוחר מסך מצורף משני
1/2. המשתמש בוחר מסך משני מצורף
2/2. דף אינטרנט מוצג באופן אוטומטי במסך שנבחר קודם לכן
2/2. דף אינטרנט מוצג באופן אוטומטי במסך שנבחר לפני כן

רקע

עד עכשיו, מפתחי אתרים יכלו ליצור חוויות שמאפשרות למשתמשים לראות תוכן מקומי ב-Chrome השונה מהתוכן שהם היו רואים במסך מרוחק, ועדיין הייתה להם אפשרות לשלוט בחוויה הזו באופן מקומי. לדוגמה, ניהול תור להפעלה ב-youtube.com בזמן שסרטונים מופעלים בטלוויזיה, או צפייה בסרט שקפים עם הערות הדובר במחשב נייד, בזמן שהמצגת מוצגת במסך מלא בסשן של Hangout.

עם זאת, יש תרחישים שבהם המשתמשים פשוט ירצו להציג תוכן במסך נוסף. לדוגמה, נניח שמשתמש בחדר ישיבות עם מקרן שמחובר אליו באמצעות כבל 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);
  });
}

יכול להיות שהרשימה שתוצג למשתמש תכלול גם נקודות קצה מרוחקות, כמו מכשירי 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);
  });
}

חיבור שמקבל הודעה מפעיל אירוע מסוג 'הודעה' שאפשר להאזין לו. ההודעה יכולה להיות מחרוזת, Blueob, 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
תמונה מאת José Luis Mieza / 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 הפנימי, בוחרים באפשרות 'אחר' ולוחצים על הקישור 'בדיקה' ליד כתובת ה-URL שמוצגת כרגע.

בדיקה של דפי המקבל של המצגת
בדיקה של הדפים של מקלטי מצגות

מומלץ גם להיכנס לדף הפנימי chrome://media-router-internals כדי להתעמק בתהליכי הגילוי/זמינות הפנימיים.

המאמרים הבאים

החל מ-Chrome 66, ChromeOS, Linux ו-Windows נתמכים. התמיכה ב-Mac תהיה זמינה בהמשך.

מקורות מידע