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

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

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

מה זה Google Cast?

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

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

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

מה אנחנו הולכים ליצור?

בסיום הקודלאב הזה, תיצרו מקלט Cast שמשתמש בממשקי ה-API החיים.

מה תלמדו

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

מה נדרש

• דפדפן Google Chrome בגרסה העדכנית ביותר.
• שירות אירוח HTTPS, כמו Firebase Hosting או ngrok.
• מכשיר Google 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

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

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

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

מזינים את הפרטים של המקלט החדש. חשוב להשתמש בכתובת ה-URL שהתקבלה בסוף התהליך.

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

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

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

מזינים את המספר הסידורי שמודפס על גב מכשיר ההעברה (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 ולוחצים על Set (הגדרה).

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

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

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

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

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;

בסדנת הקוד הזו נשתמש בשירות מטא-נתונים לדוגמה כדי לספק את המטא-נתונים של השידור החי שלנו. כדי ליצור רשימה של מטא-נתונים של תוכנית, יוצרים מאגר תגים. השדה 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);
}

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

loadGuideData();

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

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

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

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

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

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

כדי להשבית את פקודות הדילוג הקולי שמופעלות על ידי Assistant כמו Ok Google, דלגו 60 שניות אחורה, צריך להשתמש במיירט הדילוג. המתווך הזה נקרא בכל פעם שמוגשת בקשת Seek. אם הפקודה SEEK נתמכת במדיה מושבתת, גורם היירוט ידחה את בקשת ה-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. מזל טוב

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

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