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

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

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

מה זה Google Cast?

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

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

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

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

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

מה תלמדו

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

מה נדרש

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

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

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

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

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

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

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

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

מזינים את המספר הסידורי שמודפס בגב מכשיר ה-Cast ונותנים לו שם תיאורי. אפשר גם למצוא את המספר הסידורי על ידי הפעלת Cast של התוכן במסך ב-Chrome כשניגשים אל Google Cast SDK 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 Console ולוחצים על Set.

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

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

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

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

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