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

François Beaufort
François Beaufort
GitHub

ב-Chrome 66, דפי אינטרנט יכולים להשתמש במסך מצורף משני באמצעות Presentation API, ולשלוט בתוכן שלו באמצעות Presentation Receiver 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);
  });
}

חיבור שמקבל הודעה מפעיל אירוע מסוג 'message' שאפשר להאזין לו. ההודעה יכולה להיות מחרוזת, 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 שבה השתמשנו במאמר הזה.

מומלץ גם לנסות את הדמו של גלריית התמונות האינטראקטיבית. אפליקציית האינטרנט הזו מאפשרת לכמה אנשים להציג שיתוף פעולה של מצגת תמונות במסך שיתוף. הקוד זמין בכתובת https://github.com/GoogleChromeLabs/presentation-api-samples.

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

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

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

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

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

משאבים