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

François Beaufort
François Beaufort
GitHub

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

1/2. המשתמש בוחר מסך מצורף משני
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);
  });
}

הרשימה שמוצגת למשתמש עשויה לכלול גם נקודות קצה (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.

צילום מסך להדגמה של חומת התמונה
תמונה מאת חוסה לואיס מיאזה / CC BY-NC-SA 2.0

עוד דבר אחד

ב-Chrome יש תפריט דפדפן עם 'העברה (cast)' שמשתמשים יכולים להפעיל בכל שלב כשהם מבקרים באתר. כדי לשלוט במצגת ברירת המחדל של התפריט הזה, צריך להקצות את navigator.presentation.defaultRequest לאובייקט presentationRequest בהתאמה אישית שנוצר קודם לכן.

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

טיפים למפתחים

כדי לבדוק את הדף של המקבל ולנפות באגים, עוברים לדף chrome://inspect הפנימי, בוחרים באפשרות 'Other' ולוחצים על הקישור 'בדיקה' לצד כתובת ה-URL הנוכחית שמוצגת.

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

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

מה עושים אחר כך

החל מגרסה 66 של Chrome, יש תמיכה בפלטפורמות ChromeOS, Linux ו-Windows. התמיכה ב-Mac תגיע בהמשך.

מקורות מידע