افزودن ویژگی‌های پیشرفته به برنامه فرستنده وب

وقفه آگهی

کیت توسعه نرم‌افزار Web Sender از «وقفه‌های آگهی» و آگهی‌های همپا در یک جاری‌سازی رسانه معین پشتیبانی می‌کند.

برای اطلاعات بیشتر درباره نحوه عملکرد «وقفه‌های آگهی»، نمای کلی وقفه‌های آگهی گیرنده وب را ببینید.

درحالی‌که وقفه‌ها را می‌توان هم در فرستنده و هم در گیرنده مشخص کرد، توصیه می‌شود آن‌ها را در گیرنده وب و گیرنده 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)

استفاده از میاناهای برنامه‌سازی کاربردی قطعه‌ها

قطعه می‌تواند شیء نوشتاری (زیرنویس یا زیرنویس ناشنوایان) یا شیء جاری‌سازی صوتی یا ویدیویی باشد. میاناهای برنامه‌سازی کاربردی Tracks به شما امکان می‌دهند با این اشیاء در برنامه‌تان کار کنید.

شیء Track نشان‌دهنده قطعه‌ای در کیت توسعه نرم‌افزار است. می‌توانید قطعه‌ای را پیکربندی کنید و شناسه یکتایی به آن اختصاص دهید، مانند این:

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);

می‌توانید وضعیت درخواست را با نتیجه فراخوانی‌های برگشتی، چه موفقیت‌آمیز باشد چه با خطا مواجه شود، پیگیری کنید و فرستنده اصلی را براساس آن به‌روز کنید.

برنامه‌ها باید به کاربران اجازه دهند سبک قطعه‌های نوشتاری را به‌روز کنند، چه بااستفاده از تنظیمات ارائه‌شده توسط سیستم یا توسط خود برنامه.

می‌توانید عناصر سبک قطعه نوشتاری زیر را سبک‌بندی کنید:

  • رنگ و ماتی پیش‌نما (نوشتار)
  • رنگ و ماتی پس‌زمینه
  • نوع لبه
  • رنگ حاشیه
  • مقیاس قلم
  • خانواده قلم
  • سبک قلم

برای مثال، رنگ نوشتار را به‌صورت زیر روی قرمز با ۷۵٪ ماتی تنظیم کنید:

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 callback برای حفظ میزان صدا در فرستنده استفاده کنید. برای اطلاعات بیشتر، به‌روزرسانی‌های وضعیت را ببینید.
  • برنامه‌های فرستنده نباید سطح صدا را روی سطح خاص و ازپیش تعریف‌شده‌ای تنظیم کنند یا سطح صدا را روی صدای زنگ/رسانه دستگاه فرستنده تنظیم کنند وقتی برنامه روی گیرنده بار می‌شود.

کنترل‌های میزان صدای فرستنده را در بازبینه طراحی ببینید.

درحال ارسال پیام‌های رسانه‌ای به گیرنده

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 در تماس‌های برگشتی به فرستنده‌ها ارسال می‌شود. در این حالت، کیت توسعه نرم‌افزار گیرنده بررسی نمی‌کند که آیا سبک جدید با سبک قبلی متفاوت است یا نه و بدون توجه به این موضوع، به همه فرستنده‌های متصل اطلاع می‌دهد.

نشانگر پیشرفت

نشان دادن مکان بازپخش با نشانگر پیشرفت در فرستنده برای اکثر برنامه‌ها الزامی است. Cast API از پروتکل رسانه Cast استفاده می‌کند که مصرف پهنای باند را برای این سناریو و سناریوهای دیگر بهینه‌سازی می‌کند، بنابراین نیازی نیست همگام‌سازی وضعیت خودتان را پیاده‌سازی کنید. برای پیاده‌سازی صحیح نشانگر پیشرفت برای بازپخش رسانه بااستفاده از میاناهای برنامه‌سازی کاربردی، به برنامه نمونه 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();
  }
});

مراحل بعدی

این پایان ویژگی‌هایی است که می‌توانید به برنامه «فرستنده وب» خود اضافه کنید. اکنون می‌توانید یک برنامه فرستنده برای پلاتفرم دیگری بسازید (Android یا iOS)، یا یک برنامه گیرنده بسازید.