הוספת תמיכה בזמן אמת למקלט העברה (cast)

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

1. סקירה כללית

הלוגו של Google Cast

ב-Codelab הזה תלמדו איך לבנות אפליקציה מותאמת אישית למקלט אינטרנט שמשתמשת ב-Cast Live Breaks API.

מה זה Google Cast?

Google Cast מאפשר למשתמשים להעביר תוכן מהנייד לטלוויזיה. לאחר מכן, המשתמשים יוכלו להשתמש במכשיר הנייד שלהם כשלט רחוק להפעלת מדיה בטלוויזיה.

ה-SDK של Google Cast מאפשר לך להרחיב את האפליקציה כדי לשלוט בטלוויזיה או במערכת אודיו. ה-SDK של Cast מאפשר להוסיף את רכיבי ממשק המשתמש הנחוצים על סמך רשימת המשימות של Google Cast Design.

רשימת המשימות לעיצוב של Google Cast זמינה כדי להפוך את חוויית המשתמש ב-Cast לפשוטה וניתנת לחיזוי בכל הפלטפורמות הנתמכות.

מה תכננת לבנות?

לאחר השלמת ה-Codelab הזה, תוכלו לבנות מקלט Cast המנצל את הפונקציונליות החדשה של Live.

מה תלמדו

  • איך לטפל בתוכן וידאו בשידור חי ב-Cast.
  • איך מגדירים את התרחישים השונים של סטרימינג בשידור חי שנתמכים על ידי העברה (cast).
  • איך מוסיפים נתוני תוכנית לשידור החי

מה הדרישות כדי להצטרף לתוכנית?

  • דפדפן Google Chrome העדכני ביותר.
  • NPM
  • מכשיר Google Cast כמו Chromecast או Android TV שהוגדר עם גישה לאינטרנט.
  • טלוויזיה או צג עם קלט HDMI או Google Home Hub

ניסיון

  • נדרש ידע קודם בפיתוח אתרים.
  • ניסיון קודם ביצירת אפליקציות &של נמענים ב-Cast.

איך תשתמשו במדריך הזה?

לקריאה בלבד לקריאה ולהשלמת התרגילים

איזה דירוג מגיע לדעתך לחוויה שלך עם בניית אפליקציות אינטרנט?

מתחילים בינוניים בקיאים

2. קבל את הקוד לדוגמה

אפשר להוריד למחשב את כל הקוד לדוגמה...

ופרקים את קובץ ה-ZIP שהורדתם.

3. פריסת המקלט המקומי

כדי להשתמש במקלט עם מכשיר Cast, הוא צריך להתארח במקום שבו מכשיר ה-CAST יכול להגיע אליו. אם כבר יש לכם שרת שתומך ב-https, פשוט מדלגים על ההוראות הבאות, זכרו את כתובת ה-URL, תצטרכו אותה בקטע הבא.

אם אין לך שרת זמין, אל דאגה. ניתן להתקין את node.js, מודול הצומת http-server ו-ngrok.

npm install -g http-server
npm install -g ngrok

הרצת השרת

אם משתמשים ב-http-server, צריך להיכנס למסוף ולבצע את הפעולות הבאות:

cd app-done
http-server

אמור להופיע משהו כזה:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

יש לשים לב ליציאה המקומית שבה נעשה שימוש, ולבצע את הפעולות הבאות במסוף חדש כדי לחשוף את המקלט המקומי באמצעות HTTPS באמצעות ngrok:

ngrok http 8080

פעולה זו תגדיר מנהרה ngrok בשרת ה-HTTP המקומי שלכם ותקצה לכם נקודת קצה מאובטחת מסוג HTTPS שניתן להשתמש בה בשלב הבא (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

צריך להפעיל גם את ngrok וגם את http-server למשך תקופת ה-Codelab. כל שינוי שיבוצע באופן מקומי יהיה זמין מיד.

4. רישום אפליקציה ב-Cast Developer Console

עליך לרשום את האפליקציה כדי שתהיה לך אפשרות להפעיל מקלט מותאם אישית, כפי שהוא נוצר ב-Codelab הזה, במכשירי Chromecast. לאחר רישום האפליקציה שלך, יישלח אליך מזהה אפליקציה שמשמש את אפליקציית השולח לביצוע קריאות ל-API, כמו הפעלת אפליקציה של מקלט.

תמונה של מסוף הפיתוח ל-SDK של Google Cast, כשהלחצן 'Add New Application'

לחץ על "Add new app"

תמונה של המסך 'אפליקציית המקלט החדש' האפשרות מודגשת 'האפשרות המותאמת אישית'

בחירת"מקבל ו&מותאם אישית; זה מה שאנחנו בונים.

תמונה של המסך 'New custom Receiver' שבו מופיעה כתובת URL שמישהו מקליד בשדה 'כתובת ה-URL של אפליקציית המקבל''

יש להזין את פרטי המקלט החדש, הקפידו להשתמש בכתובת ה-URL שאליה הגעתם

בקטע האחרון. רושמים את מזהה האפליקציה שהוקצה לנמען החדש.

בנוסף, עליך לרשום את מכשיר ה-Google Cast כדי שיוכל לגשת לאפליקציית המקלט לפני הפרסום. לאחר פרסום אפליקציית המקבל, היא תהיה זמינה בכל מכשירי Google Cast. לצורך השימוש ב-Codelab הזה, מומלץ לעבוד עם אפליקציית מקבלי פרסום שלא פורסמה.

תמונה של מסוף המפתחים של SDK של Google Cast, עם הדגשת הלחצן 'הוספת מכשיר חדש'

לוחצים על "הוספת מכשיר חדש"

תמונה של תיבת הדו-שיח 'Add Cast Receiver'

יש להזין את המספר הסידורי המודפס על החלק האחורי של מכשיר ה-CAST ולתת לו שם תיאורי. אפשר גם למצוא את המספר הסידורי על ידי העברת המסך ב-Chrome במהלך הגישה אל Google Cast SDK Developer Console

נדרשות 5-15 דקות עד שהמקלט והמכשיר יהיו מוכנים לבדיקה. לאחר המתנה של 5-15 דקות, יש להפעיל מחדש את מכשיר ה-CAST.

5. העברה (cast) של שידור חי פשוט

תמונה של טלפון Android שמפעילה סרטון; ההודעה 'העברה לסלון' מופיעה בחלק התחתון, מעל לקבוצת פקדים של נגן וידאותמונה של מסך בגודל מלא שמוצג בו אותו הסרטון

לפני שמתחילים להשתמש ב-Codelab, כדאי לעיין במדריך למפתחים בזמן אמת שמספק סקירה כללית של הפונקציונליות החדשה של שידורים חיים.

עבור השולח שלנו, נשתמש בניפוי באגים גם במקלט CAF כדי להתחיל סשן העברה. המקלט תוכנן להתחיל הפעלה אוטומטית של שידור חי.

המקלט מורכב משני קבצים. קובץ HTML בסיסי בשם receiver.html שמפעיל את ההקשר של Cast, ו-placeholder לנגן מדיה מסוג Cast. אין צורך לשנות את הקובץ הזה. יש גם קובץ בשם receiver.js, שמכיל את כל הלוגיקה שלנו עבור המקבל.

כדי להתחיל, פותחים את שולח האינטרנט ב-Chrome. מזינים את מזהה אפליקציית המקבל שקיבלתם ב-Console Developer Console ולוחצים על 'Set''

במכשיר המקבל, יש להוסיף לוגיקה כדי להודיע ל-Cast Application Framework (CAF) שהשידור חי. למזלנו, נדרשת רק שורת קוד אחת. יש להוסיף את שורת הקוד הבאה ליירוט הטעינה ב-receiver.js:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

אם תגדירו את הסוג של השידור כ-LIVE, ממשק המשתמש של CAF&33 יופעל. בתרחיש הזה, כשהשידור יצורף, CAF ידלג באופן אוטומטי לקצה השידור החי. עדיין לא הגדרנו נתונים של מדריך תוכניות, כך שסרגל הקווים מייצג את האורך המלא של הטווח הזמין של מקור נתונים.

שומרים את השינויים ב-receiver.js ומתחילים סשן העברה בשולח האינטרנט. לשם כך, לוחצים לחיצה ימנית במקום כלשהו בדף ובוחרים באפשרות 'Cast&#39'. השידור החי אמור להתחיל מיד.

6. הוספת נתונים של מדריך תוכניות

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

עכשיו אתם יכולים לספק ל-CAF את המטא-נתונים של כמה תוכניות בשידור אחד. אם מגדירים חותמות זמן ומשכי זמן התחלה באובייקטים של MediaMetadata, המקלט יתעדכן באופן אוטומטי את המטא-נתונים המוצגים בשולחים ובמקבלים, לפי המיקום הנוכחי של הנגן.

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

במעבדה הזו, נשתמש במטא-נתונים לדוגמה כדי לספק את המטא-נתונים של השידור החי. כדי ליצור רישום של מטא נתונים של התוכנית, תחילה עלינו ליצור מאגר. כלי מכיל מכיל רשימה של אובייקטים של MediaMetadata לזרם מדיה יחיד. כל אובייקט MediaMetadata מייצג קטע יחיד במאגר. כשהסמן נמצא בטווח המגבלות של קטע מסוים, המטא-נתונים שלו יועתקו באופן אוטומטי לסטטוס המדיה. הוסיפו את הקוד הבא לקובץ receiver.js כדי להוריד את המטא-נתונים לדוגמה מהשירות שלנו וכדי לספק את המאגר ל-CAF:

/**
 * Gets the current program guide data from our Google Cloud Function
 * @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
 */
function loadGuideData() {
  return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
      .then((response) => response.json())
      .then(function(data) {
        const containerMetadata =
          new cast.framework.messages.ContainerMetadata();
        containerMetadata.sections = data;

        playerManager.getQueueManager().setContainerMetadata(containerMetadata);
      });
}

בנוסף, יש להוסיף לפונקציה פונקציה לקרוא את נתוני המדריך בווידג'ט הטעינה:

loadGuideData();

שומרים את הקובץ receiver.js ומתחילים סשן העברה. שעת ההתחלה, שעת הסיום והכותרת של התוכנית אמורות להופיע במסך.

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

7. השבתת הרצה

רוב השידורים בווידאו מורכבים מפלחים שיש להם מגוון מסגרות של סרטונים. אלא אם צוין אחרת, CAF יאפשר למשתמשים לחפש בפלחים האלה. כדי להשבית את החיפוש, עלינו להוסיף שני קטעי קוד למקלט שלנו.

בווידג'ט הטעינה, מסירים את פקודת המדיה הנתמכת SEEK. פעולה זו משביתה את אפשרות החיפוש בכל ממשקי המגע והממשק לנייד.

playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);

בשלב הבא, עלינו להשבית את הפקודות הקוליות כדי לאפשר לצופים לדלג עליהן. לדוגמה: 'Ok Google, אפשר לדלג 60 שניות אחורה'. כדי להשבית את החיפוש הקולי, נוסיף יירוט חיפוש. אם פקודת המדיה הנתמכת SEEK מושבתת, היירוט ידחה את בקשת ההרצה. יש להוסיף את קטע הקוד הבא לקובץ receiver.js:

/**
 * Seek a seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 * @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK,
    (seekData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
      cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekData;
    }
);

שומרים את הקובץ receiver.js ומתחילים סשן העברה. כבר לא ניתן לחפש את השידור החי.

8. מזל טוב

עכשיו אתם יודעים איך ליצור אפליקציית מקלט מותאמת אישית באמצעות ה-SDK העדכני ביותר של מקלט ה-CAST.

לפרטים נוספים, ניתן לעיין במדריך למפתחים בנושא סטרימינג בשידור חי.