‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

הוספת תכונות מתקדמות לאפליקציית Web Sender

הפסקות למודעות

ה-Web Sender SDK מספק תמיכה בהפסקות למודעות ובמודעות נלוות בתוך סטרימינג נתון של מדיה.

בסקירה הכללית על הפסקות למודעות ב-Web Receiver מוסבר איך פועלות הפסקות למודעות.

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

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

let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;

let breakClip2 = ...
let breakClip3 = ...

let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);

let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];

let request = new chrome.cast.media.LoadRequest(mediaInfo);

cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)

שימוש בממשקי ה-API של המסלולים

טראק יכול להיות אובייקט טקסט (כתוביות) או אובייקט של סטרימינג של אודיו או וידאו. ממשקי ה-API של Tracks מאפשרים לכם לעבוד עם האובייקטים האלה באפליקציה.

אובייקט Track מייצג טראק ב-SDK. כדי להגדיר טראק ולהקצות לו מזהה ייחודי:

var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;

var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
  chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;

var frenchAudio = new chrome.cast.media.Track(3, // track ID
  chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;

לקובץ מדיה יכולים להיות כמה טראקים. לדוגמה, יכולות להיות לו כמה כתוביות (כל אחת בשפה אחרת) או כמה שידורי אודיו חלופיים (בשפות שונות).

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

var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;

אפשר להגדיר את הטראקים הפעילים בבקשת המדיה activeTrackIds.

אפשר גם להפעיל טראק אחד או יותר שמשויכים לקובץ המדיה, אחרי שהמדיה נטענת, על ידי קריאה ל-EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) והעברת המזהים של הטראקים שרוצים להפעיל ב-opt_activeTrackIds. שימו לב ששני הפרמטרים הם אופציונליים, ואתם יכולים לבחור אילו טראקים או סגנונות פעילים להגדיר לפי שיקול דעתכם. לדוגמה, כך מפעילים את הכתוביות בצרפתית (2) ואת האודיו בצרפתית (3):

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

כדי להסיר את כל הטראקים של האודיו או הווידאו מהמדיה הנוכחית, פשוט מגדירים את mediaInfo.tracks=null (מערך ריק) וטוענים מחדש את המדיה.

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

מעדכנים את var activeTrackIds = [2, 3]; (שמוצג למעלה) כך שיכלול רק את [3], טראק האודיו.
מגדירים את mediaInfo.tracks=null. שימו לב שאין צורך לטעון מחדש את המדיה כדי להשבית את הכתוביות (track.hidden). שליחת מערך activeTracksId שלא מכיל trackId שהופעל בעבר משביתה את טראק הטקסט.

עיצוב טראקים של טקסט

TextTrackStyle הוא האובייקט שמכיל את פרטי העיצוב של טראק טקסט. אחרי שיוצרים או מעדכנים אובייקט TextTrackStyle קיים, אפשר להחיל אותו על קובץ המדיה שמופעל כרגע באמצעות קריאה ל-method‏ editTrackInfo, באופן הבא:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

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

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

אפשר לעצב את הרכיבים הבאים של סגנון הטקסט:

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

לדוגמה, כדי להגדיר את צבע הטקסט לאדום עם 75% אטימות:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';

בקרת עוצמת הקול

אפשר להשתמש ב-RemotePlayer וב-RemotePlayerController כדי להגדיר את עוצמת הקול של המקלט.

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolumeLevel();
  // Update sender UI to reflect change
}

האפליקציה השולחת צריכה לפעול לפי ההנחיות הבאות לשליטה בעוצמת הקול:

אפליקציית השולח צריכה להסתנכרן עם המקלט כדי שממשק המשתמש של השולח תמיד ידווח על עוצמת הקול בהתאם למקלט. משתמשים בקריאה החוזרת (callback) של RemotePlayerEventType.VOLUME_LEVEL_CHANGED ו-RemotePlayerEventType.IS_MUTED_CHANGED כדי לשמור על עוצמת הקול במכשיר השולח. למידע נוסף, קראו את המאמר עדכוני סטטוס.
אסור להגדיר באפליקציות השולחות את עוצמת הקול לרמה ספציפית שנקבעה מראש, או להגדיר את עוצמת הקול לעוצמת הצלצול או המדיה של המכשיר השולח כשהאפליקציה נטענת במקלט.

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

שליחת הודעות מדיה למקלט

אפשר לשלוח Media Messages מהשולח למקבל. לדוגמה, כדי לשלוח הודעת SKIP_AD למקלט:

// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
  if (castSession) {
    const media = castSession.getMediaSession();
    castSession.sendMessage('urn:x-cast:com.google.cast.media', {
      type: 'SKIP_AD',
      requestId: 1,
      mediaSessionId: media.mediaSessionId
    });
  }
});

עדכוני סטטוס

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

לשם כך, האפליקציה צריכה לרשום את כל פונקציות ה-listener הנדרשות ב-RemotePlayerController. אם הערך של TextTrackStyle של המדיה הנוכחית משתנה, כל השולחים המחוברים יקבלו התראה, והמאפיינים התואמים של סשן המדיה הנוכחי, כמו activeTrackIds ו-textTrackStyle של השדה MediaInfo, יישלחו לשולחים בקריאות חוזרות (callbacks). במקרה כזה, ערכת ה-SDK של המקלט לא בודקת אם הסגנון החדש שונה מהסגנון הקודם, ומודיעה לכל השולחים המחוברים בכל מקרה.

מחוון התקדמות

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

דרישות CORS

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

צריך להשתמש בכותרות הבאות: Content-Type,‏ Accept-Encoding ו-Range. שימו לב ששתי הכותרות האחרונות, Accept-Encoding ו-Range, הן כותרות נוספות שאולי לא הייתם צריכים בעבר.

אי אפשר להשתמש בתווים כלליים לחיפוש "*" בכותרת Access-Control-Allow-Origin. אם בדף יש תוכן מדיה מוגן, צריך להשתמש בדומיין במקום בתו כללי לחיפוש.

המשך סשן בלי לטעון מחדש את דף האינטרנט

כדי להמשיך CastSession קיים, משתמשים ב-requestSessionById(sessionId) עם ה-sessionId של הסשן שמנסים להצטרף אליו.

אפשר למצוא את sessionId ב-CastSession הפעיל באמצעות getSessionId() אחרי שקוראים ל- loadMedia().

הגישה המומלצת היא:

מתקשרים אל loadMedia() כדי להתחיל את הסשן
אחסון ה-sessionId באופן מקומי
אפשר להצטרף מחדש לסשן באמצעות requestSessionById(sessionId) לפי הצורך

let sessionId;

function rejoinCastSession() {
  chrome.cast.requestSessionById(sessionId);

  // Add any business logic to load new content or only resume the session
}

document.getElementById('play-button').addEventListener(("click"), function() {
  if (sessionId == null) {
    let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
    if (castSession) {
      let mediaInfo = createMediaInfo();
      let request = new chrome.cast.media.LoadRequest(mediaInfo);
      castSession.loadMedia(request)

      sessionId = CastSession.getSessionId();
    } else {
      console.log("Error: Attempting to play media without a Cast Session");
    }
  } else {
    rejoinCastSession();
  }
});

השלבים הבאים

זהו, סיימנו להוסיף תכונות לאפליקציית השליחה באינטרנט. עכשיו אתם יכולים ליצור אפליקציית שליחה לפלטפורמה אחרת (Android או iOS), או ליצור אפליקציית קליטה.

שילוב CAST