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) ולהבין איך פועל מקלט האינטרנט להעברה.
- נדרש ידע קודם בפיתוח אתרים.
- נדרש גם ידע קודם בצפייה בטלוויזיה :)
איך ייעשה שימוש במדריך הזה?
איזה דירוג מגיע לדעתך לחוויה שלך בבניית אפליקציות אינטרנט?
איזה דירוג מגיע לדעתך לחוויית הצפייה בטלוויזיה?
2. לקבלת הקוד לדוגמה
אפשר להוריד את כל הקוד לדוגמה למחשב...
ופורקים את קובץ ה-ZIP שהורד.
3. פריסה מקומית של הנמען
כדי להשתמש במקלט האינטרנט עם מכשיר CAST, הוא צריך להתארח במקום שבו מכשיר ה-CAST יכול להגיע אליו. אם כבר יש לכם שרת זמין שתומך ב-https, דלגו על ההוראות הבאות ושימו לב לכתובת ה-URL, מכיוון שתזדקקו לה בקטע הבא.
אם אין לכם אף שרת שאפשר להשתמש בו, אפשר להשתמש באירוח ב-Firebase או ב-ngrok.
הפעלת השרת
אחרי שמגדירים את השירות הרצוי, עוברים אל app-start
ומפעילים את השרת.
לרשום לפניכם את כתובת ה-URL של המקבל המתארח. אתם תשתמשו בה בקטע הבא.
4. רישום אפליקציה ב-Cast 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 שהושלם. המקלט שאנחנו מתכוונים לבנות יוכל להפעיל מדיה באמצעות סטרימינג בקצב העברת נתונים מותאם.
- בדפדפן, פותחים את כלי Command and Control (CaC).
- צריך להשתמש במזהה המקבל שמוגדר כברירת מחדל ב-
CC1AD845
וללחוץ על הלחצןSET APP ID
. - לוחצים על לחצן הפעלת Cast בצד ימין למעלה ובוחרים את המכשיר התומך ב-Google Cast.
- עוברים לכרטיסייה
LOAD MEDIA
בחלק העליון.
- שינוי לחצן הבחירה של סוג הבקשה ל
LOAD
. - כדי להפעיל סרטון לדוגמה, לוחצים על הלחצן
SEND REQUEST
. - הסרטון יתחיל לפעול במכשיר שתומך ב-Google Cast כדי לראות איך נראית הפונקציונליות הבסיסית של המקלט בעת שימוש ב'מקלט ברירת המחדל'.
6. הכנת הפרויקט להתחלה
אנחנו צריכים להוסיף תמיכה ב-Google Cast לאפליקציה ההתחלתית שהורדת. הנה כמה מהמונחים של Google Cast שבהם נשתמש ב-Codelab זה:
- אפליקציית שולח פועלת במכשיר נייד או במחשב נייד,
- אפליקציה של מקלט פועלת במכשיר Google Cast או Android TV.
עכשיו תוכלו להתחיל לעבוד על הפרויקט למתחילים באמצעות עורך הטקסט המועדף עליכם:
- בוחרים את הספרייה
app-start
מהורדת הקוד לדוגמה. - פתיחה של
js/receiver.js
ושלindex.html
חשוב: במהלך העבודה על ה-Codelab הזה, http-server
אמור לקלוט את השינויים שביצעת. אם לא, כדאי לעצור ולהפעיל מחדש את http-server
.
עיצוב אפליקציות
האפליקציה המקבלת מפעילה את ההעברה (cast) ותישאר במצב המתנה עד שהשולח יגיע בקשת LOAD (למשל, הפקודה להפעלה של קטע מדיה).
האפליקציה כוללת תצוגה ראשית אחת שמוגדרת ב-index.html
ומקובץ JavaScript אחד בשם js/receiver.js
. היא מכילה את כל הלוגיקה שמאפשרת למקלט שלנו לפעול.
index.html
קובץ ה-HTML הזה מכיל את כל ממשק המשתמש של אפליקציית המקבל.
receiver.js
הסקריפט הזה מנהל את כל הלוגיקה של אפליקציית המקבל.
שאלות נפוצות
7. שילוב עם CastDebugLogger API
באמצעות Cast Receiver SDK, למפתחים יש אפשרות נוספת לנפות באגים באפליקציית המקבל באמצעות CastDebugLogger API.
לפרטים ולמידע נוסף, אפשר לעיין במדריך בנושא יומן לניפוי באגים של העברה (cast).
אתחול
יש לכלול את הסקריפט הבא בתג <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);
}
});
כאשר יומן ניפוי הבאגים מופעל, מוצגת שכבת-על של 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:
- פותחים את הכלי CaC, מגדירים את מזהה האפליקציה של המקבל ולוחצים על לחצן הפעלת Cast כדי להעביר (cast) למקלט.
- אפשר להעביר אפליקציית שולח נפרדת לאותו מכשיר עם אותו מזהה אפליקציה של המקבל.
- טעינת מדיה מאפליקציית השולח וההודעות ביומן יוצגו בכלי.
כדי להצטרף לסשן העברה קיים:
- משיגים את המזהה הפעיל של סשן ההעברה באמצעות ה-SDK של המקבל או ה-SDK של השולח. בצד המקבל, מזינים את הפרטים הבאים כדי לקבל מזהה סשן במסוף Chrome Remote Debugger:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
לחלופין, אפשר לקבל את מזהה הסשן משולח מחובר באינטרנט. לשם כך, משתמשים בשיטה הבאה:
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- יש להזין את מזהה הסשן בכלי CaC וללחוץ על הלחצן
RESUME
. - לחצן הפעלת Cast אמור להיות מחובר ויוצגו בכלי הודעות ביומן.
דברים שכדאי לנסות
בשלב הבא נשתמש בכלי CaC כדי לראות יומנים במקלט לדוגמה.
- פותחים את הכלי CAC.
- יש להזין את מזהה האפליקציה של המקבל של האפליקציה לדוגמה וללחוץ על הלחצן
SET APP ID
. - כדי לפתוח את המכשיר שתומך ב-Google Cast, לוחצים על לחצן הפעלת Cast בפינה הימנית העליונה ובוחרים במכשיר התומך ב-Google Cast.
- עוברים לכרטיסייה
LOAD MEDIA
בחלק העליון.
- שינוי לחצן הבחירה של סוג הבקשה ל
LOAD
. - כדי להפעיל סרטון לדוגמה, לוחצים על הלחצן
SEND REQUEST
.
- סרטון לדוגמה אמור לפעול עכשיו במכשיר. היומנים מהשלבים הקודמים אמורים להופיע בכרטיסייה 'Log Messages' בתחתית הכלי.
כדי לבדוק את היומנים ולשלוט במקלט, כדאי לבדוק את התכונות הבאות:
- לוחצים על הכרטיסייה
MEDIA INFO
אוMEDIA STATUS
כדי לראות את פרטי המדיה ואת סטטוס המדיה. - צריך ללחוץ על הלחצן
SHOW OVERLAY
כדי לראות שכבת-על של ניפוי באגים במכשיר המקבל. - צריך להשתמש בלחצן
CLEAR CACHE AND STOP
כדי לטעון מחדש את אפליקציית המקבל ולהעביר שוב.
10. מזל טוב
עכשיו אתה יודע איך להוסיף את יומן ניפוי הבאגים של Cast לאפליקציית Web Receiver שתומכת ב-Cast באמצעות ה-SDK העדכני של Cast Receiver.
לפרטים נוספים, עיינו במדריכים למפתחים ביומן ניפוי באגים של העברה (cast) ובכלי פקודות ובקרה (CaC).