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

خرابی های تبلیغاتی

Web Sender SDK از Ad Breaks و تبلیغات همراه در یک جریان رسانه ای معین پشتیبانی می کند.

برای کسب اطلاعات بیشتر در مورد نحوه عملکرد وقفه‌های تبلیغاتی ، به نمای کلی وقفه‌های تبلیغاتی گیرنده وب مراجعه کنید.

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

در وب، با استفاده از 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 های آهنگ

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

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

نمایش مکان پخش با نشانگر پیشرفت روی فرستنده برای اکثر برنامه ها الزامی است. Cast API از پروتکل رسانه Cast استفاده می کند که مصرف پهنای باند را برای این سناریوها و سایر سناریوها بهینه می کند، بنابراین نیازی به اجرای همگام سازی وضعیت خود ندارید. برای اجرای صحیح نشانگر پیشرفت برای پخش رسانه با استفاده از APIها، به برنامه نمونه CastVideos-chrome مراجعه کنید.

الزامات CORS

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

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

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

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

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

بعد از فراخوانی loadMedia() sessionId می توان با استفاده از getSessionId() در 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 ) بسازید یا یک برنامه گیرنده بسازید.

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