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

François Beaufort

ב-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