ویژگی های پیشرفته را به برنامه فرستنده وب خود اضافه کنید

وقفه‌های تبلیغاتی

کیت توسعه نرم‌افزاری وب فرستنده (Web Sender SDK) از تبلیغات لحظه‌ای (Ad Breaks) و تبلیغات همراه در یک جریان رسانه‌ای مشخص پشتیبانی می‌کند.

برای اطلاعات بیشتر در مورد نحوه عملکرد Ad Breakها، به مرور کلی Ad Breakهای گیرنده وب مراجعه کنید.

اگرچه می‌توان وقفه‌ها را هم در فرستنده و هم در گیرنده مشخص کرد، توصیه می‌شود که این وقفه‌ها در گیرنده وب و گیرنده تلویزیون اندروید نیز مشخص شوند تا رفتار ثابتی در پلتفرم‌های مختلف حفظ شود.

در وب، با استفاده BreakClip و Break در یک دستور بارگذاری، Ad Breaks را مشخص کنید:

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 نشان دهنده یک Track در SDK است. شما می‌توانید یک Track را پیکربندی کنید و یک ID منحصر به فرد به آن اختصاص دهید، مانند این:

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 فعال‌شده قبلی نباشد، track متن را غیرفعال می‌کند.

استایل‌دهی به آهنگ‌های متنی

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

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

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

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

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

شما به هدرهای زیر نیاز دارید: Content-Type ، Accept-Encoding و Range . توجه داشته باشید که دو هدر آخر، Accept-Encoding و Range ، هدرهای اضافی هستند که ممکن است قبلاً به آنها نیازی نداشته باشید.

نمی‌توان از کاراکترهای عمومی "*" برای سربرگ Access-Control-Allow-Origin استفاده کرد. اگر صفحه دارای محتوای رسانه‌ای محافظت‌شده باشد، باید به جای کاراکتر عمومی از یک دامنه استفاده کند.

از سرگیری یک جلسه بدون بارگذاری مجدد صفحه وب

برای از سرگیری یک CastSession موجود، requestSessionById(sessionId) به همراه sessionId جلسه‌ای که می‌خواهید به آن بپیوندید، استفاده کنید.

sessionId ) را می‌توان با استفاده از getSessionId() پس از فراخوانی loadMedia() در CastSession فعال پیدا کرد.

رویکرد توصیه شده این است که:

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

مراحل بعدی

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

قبلی
بازیگران را ادغام کنید