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

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

הלוגו של Google Cast

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

מה זה Google Cast?

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

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

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

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

אחרי שמסיימים את ה-codelab הזה, בונים מקלט העברה (cast) שמנצל את ממשקי ה-API של Live.

מה תלמדו

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

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

ניסיון

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

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

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

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

מתחילים בינוני ידע

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

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

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

3. פריסה מקומית של הנמען

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

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

הפעלת השרת

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

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

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

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

תמונה של Google Cast SDK Developer Console עם הדגשה של הלחצן 'הוספת אפליקציה חדשה'

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

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

בוחרים באפשרות 'Custom Receiver', זה מה שאנחנו יוצרים.

תמונה של המסך 'נמען מותאם אישית חדש' שבה מוצגת כתובת URL שמישהו מקליד בשדה 'כתובת ה-URL של אפליקציית הנמען'

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

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

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

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

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

תמונה של תיבת הדו-שיח 'הוספת מכשיר של מקלט העברה'

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

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

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

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

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

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

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

כדי להתחיל, פותחים את Cactool ב-Chrome. מזינים את מזהה האפליקציה של המקבל שקיבלתם ב-Cast SDK 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 ומתחילים פעילות העברה (cast) ב-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;

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

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

כדי להשבית פקודות חיפוש קולי שמופעלות על ידי אסיסטנט כמו 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 העדכני של המקבל.

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