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

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

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

מה זה Google Cast?

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

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

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

מה אנחנו הולכים לבנות?

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

מה תלמדו

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

הדרישות

• הגרסה האחרונה של דפדפן Google Chrome.
• שירות אירוח HTTPS כמו אירוח ב-Firebase או ngrok.
• מכשיר Cast, כמו Chromecast או Android TV, שמחובר לאינטרנט.
• טלוויזיה או צג עם יציאת HDMI, או Google Home Hub

חוויה

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

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

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

file_downloadהורדת קוד המקור

ומחלצים את קובץ ה-ZIP שהורד.

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

כדי להשתמש במקלט האינטרנט עם מכשיר Cast, צריך לארח אותו במקום שמכשיר Cast יכול להגיע אליו. אם כבר יש לכם שרת שתומך ב-HTTPS, דלגו על ההוראות הבאות ורשמו את כתובת ה-URL, כי תצטרכו אותה בסעיף הבא.

אם אין לכם שרת זמין לשימוש, אתם יכולים להשתמש באירוח ב-Firebase או ב-ngrok.

הפעלת השרת

אחרי שמגדירים את השירות הרצוי, עוברים אל app-start ומפעילים את השרת.

רושמים את כתובת ה-URL של הנמען המתארח. תשתמשו בו בקטע הבא.

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

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

לוחצים על 'הוספת אפליקציה חדשה'.

בוחרים באפשרות 'מקלט בהתאמה אישית' – זה מה שאנחנו יוצרים.

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

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

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

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

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

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

5. הפעלת Cast של שידור חי פשוט

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

השולח ישתמש ב-Cactool כדי להתחיל הפעלה של Cast. הממיר מתוכנן להתחיל להפעיל שידור חי באופן אוטומטי.

המקלט מורכב משלושה קבצים. קובץ HTML בסיסי בשם receiver.html שמכיל את המבנה הראשי של האפליקציה. לא צריך לשנות את הקובץ הזה. יש גם קובץ בשם receiver.js, שמכיל את כל הלוגיקה של המקלט. בנוסף, יש גם metadata_service.js שבו נשתמש בהמשך ב-codelab כדי לדמות קבלת נתונים של לוח שידורים.

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

צריך להגדיר ב-Web Receiver Cast Application Framework ‏ (CAF) שהתוכן שיופעל הוא שידור חי. כדי לעשות זאת, משנים את האפליקציה באמצעות שורת הקוד הבאה. מוסיפים אותו לגוף הראשי של load interceptor ב-receiver.js:

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

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

שומרים את השינויים ב-receiver.js ומתחילים הפעלה של Cast ב-Cactool. כדי לעשות את זה, לוחצים על הכפתור להפעלת Cast ובוחרים במכשיר Cast יעד. השידור החי יתחיל לפעול באופן מיידי.

6. הוספת נתונים של לוח שידורים

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

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

// 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;

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

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

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

בנוסף, מוסיפים קריאה לפונקציה כדי לטעון את נתוני המדריך ב-load interceptor:

loadGuideData();

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

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

7. השבתת הדילוג

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

ב-load interceptor, מסירים את פקודת המדיה הנתמכת SEEK. הפעולה הזו משביתה את האפשרות להעברה קדימה או אחורה בכל הממשקים של השולחים בנייד וממשקי המגע. מוסיפים את הקוד הבא אחרי ההגדרות של משתני המופע של ה-SDK בקובץ receiver.js.

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

כדי להשבית פקודות קוליות להרצה שמבוססות על Assistant, כמו Ok Google, skip back 60 seconds, צריך להשתמש ב-seek interceptor. ה-interceptor הזה מופעל בכל פעם שמתבצעת בקשת חיפוש. אם פקודת המדיה SEEK הנתמכת מושבתת, היירוט ידחה את בקשת החיפוש. מוסיפים את קטע הקוד הבא לקובץ receiver.js:

/**
 * 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.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // 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 seekRequestData;
    });

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

8. מזל טוב

עכשיו אתם יודעים איך ליצור אפליקציית מקלט בהתאמה אישית באמצעות הגרסה האחרונה של Cast Receiver SDK.

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