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

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

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

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

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

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

אובייקט 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 קיים, אפשר להחיל אותו על פריט המדיה שמוצג כרגע על ידי קריאה לשיטה 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
}

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

• אפליקציית השולח צריכה לסנכרן עם המכשיר המקבל, כדי שממשק המשתמש של השולח תמיד ידווח על עוצמת הקול לפי המכשיר המקבל. כדי לשמור על עוצמת הקול אצל השולח, אפשר להשתמש בקריאה החוזרת 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
    });
  }
});

עדכוני סטטוס

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

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

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

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

דרישות CORS

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

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

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

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

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

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

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

1. מתקשרים למספר loadMedia() כדי להתחיל את הסשן.
2. אחסון של sessionId באופן מקומי
3. מצטרפים מחדש לסשן באמצעות 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), או ליצור אפליקציית קבלה.