ניפוי באגים באפליקציות מקלט העברה

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

ה-codelab הזה ילמד אותך איך להוסיף את ה-Cast Debug Logger לאפליקציה הקיימת של Custom Web Receiver.

מה זה Google Cast?

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

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

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

אחרי השלמת ה-Codelab, יהיה לך Custom Web Receiver המשולב עם יומן ניפוי הבאגים של Cast.

לפרטים ולמידע נוסף, אפשר לעיין במדריך בנושא יומן לניפוי באגים של העברה (cast).

מה תלמדו

• איך להגדיר את הסביבה לפיתוח של Web Receiver.
• איך לשלב את Debug Logger במקלט ההעברה (cast).

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

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

ניסיון

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

נתקלתם בבעיות ברשת?

אם אתם נמצאים במקום שבו רשת ה-Wi-Fi אינה אמינה, תוכלו לחבר את מכשיר ה-Chromecast באמצעות מתאם אתרנט עבור Chromecast או עבור Chromecast with Google TV.

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

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

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

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

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

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

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

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

הורדת המקור

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

מאגר codelab של Cast Debug Logger מכיל שני פרויקטים לדוגמה:

• app-start – קוד ההתחלה שעליו תבססו ב-Codelab הזה.
• app-done – הקוד המלא של אפליקציית הווידאו לדוגמה הסופית.

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

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

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

הפעלת השרת

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

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

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

אין לך חשבון מפתח העברות?

נרשמים לחשבון ב-Google Cast SDK Developer Console ומשלמים את עמלת הרישום.

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

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

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

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

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

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

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

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

5. הפעלת האפליקציה לדוגמה

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

1. בדפדפן, פותחים את כלי Command and Control (CaC).

2. צריך להשתמש במזהה המקבל שמוגדר כברירת מחדל ב-CC1AD845 וללחוץ על הלחצן SET APP ID.
3. לוחצים על לחצן הפעלת Cast בצד ימין למעלה ובוחרים את המכשיר התומך ב-Google Cast.

4. עוברים לכרטיסייה LOAD MEDIA בחלק העליון.

5. שינוי לחצן הבחירה של סוג הבקשה לLOAD.
6. כדי להפעיל סרטון לדוגמה, לוחצים על הלחצן SEND REQUEST.
7. הסרטון יתחיל לפעול במכשיר שתומך ב-Google Cast כדי לראות איך נראית הפונקציונליות הבסיסית של המקלט בעת שימוש ב'מקלט ברירת המחדל'.

6. הכנת הפרויקט להתחלה

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

• אפליקציית שולח פועלת במכשיר נייד או במחשב נייד,
• אפליקציה של מקלט פועלת במכשיר Google Cast או Android TV.

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

1. בוחרים את הספרייה app-start מהורדת הקוד לדוגמה.
2. פתיחה של js/receiver.js ושל index.html

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

עיצוב אפליקציות

האפליקציה המקבלת מפעילה את ההעברה (cast) ותישאר במצב המתנה עד שהשולח יגיע בקשת LOAD (למשל, הפקודה להפעלה של קטע מדיה).

האפליקציה כוללת תצוגה ראשית אחת שמוגדרת ב-index.html ומקובץ JavaScript אחד בשם js/receiver.js. היא מכילה את כל הלוגיקה שמאפשרת למקלט שלנו לפעול.

index.html

קובץ ה-HTML הזה מכיל את כל ממשק המשתמש של אפליקציית המקבל.

receiver.js

הסקריפט הזה מנהל את כל הלוגיקה של אפליקציית המקבל.

להעביר את התיעוד?

יש לנו מסמכי תיעוד מקיפים בשביל שולחים ב-iOS, ב-Android וב-Chrome.

שאלות נפוצות

• מה זה Google Cast?
• איך אפשר להפוך למפתח Google Cast?

7. שילוב עם CastDebugLogger API

באמצעות Cast Receiver SDK, למפתחים יש אפשרות נוספת לנפות באגים באפליקציית המקבל באמצעות CastDebugLogger API.

לפרטים ולמידע נוסף, אפשר לעיין במדריך בנושא יומן לניפוי באגים של העברה (cast).

★ הערה:

כדי להשתמש ב-CastDebugLogger, עליך לרשום את מכשיר ה-Cast ב-Google Cast SDK Developer Console ולהשתמש בגרסת קושחה 1.44 ומעלה של המכשיר.

אתחול

יש לכלול את הסקריפט הבא בתג <head> של אפליקציית המקבל מיד אחרי הסקריפט של Web Receiver SDK, ב-index.html:

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

ב-js/receiver.js בחלק העליון של הקובץ ומתחת ל-playerManager, מקבלים את המופע של CastDebugLogger ומפעילים את המתעד ב-event listener של READY:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

אזהרה: צריך לשנות את ההגדרה setEnabled ל-False במקלט בסביבת ייצור.

כאשר יומן ניפוי הבאגים מופעל, מוצגת שכבת-על של DEBUG MODE על המקבל.

תיעוד אירועים של הנגן ביומן

באמצעות CastDebugLogger אפשר לתעד בקלות אירועי שחקן שהופעלו על ידי Cast Web Receiver SDK ולהשתמש ברמות רישום שונות כדי לתעד את נתוני האירועים. להגדרה loggerLevelByEvents נדרשים cast.framework.events.EventType ו-cast.framework.events.category כדי לציין את האירועים שיירשמו ביומן.

צריך להוסיף את הקטע הבא מתחת ל-event listener של READY כדי לתעד את האירועים של הפעלת הנגן CORE או של שידור השינוי של mediaStatus:

...

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};

רישום הודעות ותגים בהתאמה אישית ביומן

ה-API של CastDebugLogger מאפשר ליצור הודעות יומן שיופיעו בצבעים שונים בשכבת-העל לניפוי באגים של המקבל. השתמש בשיטות היומן הבאות, מסודרות מהגבוהה לנמוכה ביותר:

• castDebugLogger.error(custom_tag, message);
• castDebugLogger.warn(custom_tag, message);
• castDebugLogger.info(custom_tag, message);
• castDebugLogger.debug(custom_tag, message);

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

כדי להראות את היומנים בפעולה, צריך להוסיף יומנים למיירט של LOAD.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

אפשר לקבוע אילו הודעות יופיעו בשכבת-העל של ניפוי הבאגים באמצעות הגדרה של רמת היומן ב-loggerLevelByTags לכל תג מותאם אישית. לדוגמה, אם תפעילו תג מותאם אישית ברמת היומן cast.framework.LoggerLevel.DEBUG, יוצגו כל ההודעות שנוספו עם שגיאות, אזהרה, מידע ויומן ניפוי באגים. דוגמה נוספת: הפעלת תג מותאם אישית עם רמת WARNING תציג רק הודעות שגיאה ואזהרה ביומן.

ההגדרה של loggerLevelByTags היא אופציונלית. אם תג מותאם אישית לא מוגדר לרמת הרישום שלו, כל ההודעות ביומן יוצגו בשכבת-העל לניפוי הבאגים.

יש להוסיף את הקוד הבא מתחת לקריאה ל-loggerLevelByEvents:

...

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};

...

8. שימוש בשכבת-על לניפוי באגים

יומן ניפוי הבאגים של Cast מספק שכבת-על של ניפוי באגים במקבל, כדי להציג את הודעות היומן המותאמות אישית. אפשר להשתמש ב-showDebugLogs כדי להפעיל או להשבית את שכבת-העל של ניפוי הבאגים, וב-clearDebugLogs כדי לנקות את הודעות היומן בשכבת-העל.

כדי להציג תצוגה מקדימה של שכבת-העל של ניפוי הבאגים במכשיר המקבל, צריך להוסיף את הקוד הבא ל-event listener של READY:

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);

      // Show debug overlay.
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay.
      castDebugLogger.clearDebugLogs();
  }
});

9. שימוש בכלי Command and Control (CaC)

סקירה כללית

כלי Command and Control (CaC) מתעד את היומנים ושולט בשכבת-העל של ניפוי הבאגים.

יש שתי דרכים לחבר את המקלט לכלי CaC:

מתחילים חיבור חדש של Cast:

1. פותחים את הכלי CaC, מגדירים את מזהה האפליקציה של המקבל ולוחצים על לחצן הפעלת Cast כדי להעביר (cast) למקלט.
2. אפשר להעביר אפליקציית שולח נפרדת לאותו מכשיר עם אותו מזהה אפליקציה של המקבל.
3. טעינת מדיה מאפליקציית השולח וההודעות ביומן יוצגו בכלי.

כדי להצטרף לסשן העברה קיים:

1. משיגים את המזהה הפעיל של סשן ההעברה באמצעות ה-SDK של המקבל או ה-SDK של השולח. בצד המקבל, מזינים את הפרטים הבאים כדי לקבל מזהה סשן במסוף Chrome Remote Debugger:

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

לחלופין, אפשר לקבל את מזהה הסשן משולח מחובר באינטרנט. לשם כך, משתמשים בשיטה הבאה:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

2. יש להזין את מזהה הסשן בכלי CaC וללחוץ על הלחצן RESUME.
3. לחצן הפעלת Cast אמור להיות מחובר ויוצגו בכלי הודעות ביומן.

דברים שכדאי לנסות

בשלב הבא נשתמש בכלי CaC כדי לראות יומנים במקלט לדוגמה.

1. פותחים את הכלי CAC.

2. יש להזין את מזהה האפליקציה של המקבל של האפליקציה לדוגמה וללחוץ על הלחצן SET APP ID.
3. כדי לפתוח את המכשיר שתומך ב-Google Cast, לוחצים על לחצן הפעלת Cast בפינה הימנית העליונה ובוחרים במכשיר התומך ב-Google Cast.

4. עוברים לכרטיסייה LOAD MEDIA בחלק העליון.

5. שינוי לחצן הבחירה של סוג הבקשה לLOAD.
6. כדי להפעיל סרטון לדוגמה, לוחצים על הלחצן SEND REQUEST.

7. סרטון לדוגמה אמור לפעול עכשיו במכשיר. היומנים מהשלבים הקודמים אמורים להופיע בכרטיסייה 'Log Messages' בתחתית הכלי.

כדי לבדוק את היומנים ולשלוט במקלט, כדאי לבדוק את התכונות הבאות:

• לוחצים על הכרטיסייה MEDIA INFO או MEDIA STATUS כדי לראות את פרטי המדיה ואת סטטוס המדיה.
• צריך ללחוץ על הלחצן SHOW OVERLAY כדי לראות שכבת-על של ניפוי באגים במכשיר המקבל.
• צריך להשתמש בלחצן CLEAR CACHE AND STOP כדי לטעון מחדש את אפליקציית המקבל ולהעביר שוב.

10. מזל טוב

עכשיו אתה יודע איך להוסיף את יומן ניפוי הבאגים של Cast לאפליקציית Web Receiver שתומכת ב-Cast באמצעות ה-SDK העדכני של Cast Receiver.

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

רוצה עוד העברה?

כדאי לראות את שאר ה-Cast codelabs ואת האפליקציות לדוגמה ב-GitHub.