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

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

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

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

אפשר לציין הפסקות גם אצל השולח וגם אצל המקבל, אבל מומלץ שהן יופיעו שצוינו ב-Web Acceptr המקלט של 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);

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

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

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

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

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

השלבים הבאים

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

הקודם
שילוב CAST