Cast SDK را در برنامه فرستنده وب خود ادغام کنید

این راهنمای برنامه‌نویس نحوه افزودن پشتیبانی Google Cast را با استفاده از Cast SDK به برنامه Web Sender خود توضیح می‌دهد.

اصطلاحات

دستگاه تلفن همراه یا مرورگر فرستنده است که پخش را کنترل می کند. دستگاه Google Cast گیرنده ای است که محتوا را برای پخش روی صفحه نمایش می دهد.

Web Sender SDK از دو بخش تشکیل شده است: Framework API ( cast.framework ) و Base API ( chrome.cast ) به طور کلی، شما با یک Framework API ساده تر و سطح بالاتر تماس برقرار می کنید، که سپس توسط فریم ورک پایین تر پردازش می شود. سطح پایه API.

چارچوب فرستنده به Framework API، ماژول و منابع مرتبط اشاره دارد که پوششی را در اطراف عملکرد سطح پایین‌تر ارائه می‌کنند. برنامه فرستنده یا برنامه Google Cast Chrome به یک برنامه وب (HTML/JavaScript) اشاره دارد که در یک مرورگر Chrome در دستگاه فرستنده اجرا می شود. برنامه گیرنده وب به یک برنامه HTML/JavaScript که در Chromecast یا دستگاه Google Cast اجرا می شود اشاره دارد.

چارچوب فرستنده از یک طراحی پاسخ به تماس ناهمزمان برای اطلاع رسانی به برنامه فرستنده از رویدادها و انتقال بین حالت های مختلف چرخه عمر برنامه Cast استفاده می کند.

کتابخانه را بارگیری کنید

برای اینکه برنامه شما ویژگی‌های Google Cast را اجرا کند، باید مکان Google Cast Web Sender SDK را بداند، همانطور که در زیر نشان داده شده است. پارامتر پرس و جو URL loadCastFramework را برای بارگیری Web Sender Framework API نیز اضافه کنید. همه صفحات برنامه شما باید به صورت زیر به کتابخانه مراجعه کنند: 

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

چارچوب

Web Sender SDK از cast.framework استفاده می کند. * فضای نام فضای نام نشان دهنده موارد زیر است:

  • روش ها یا توابعی که عملیات را در API فراخوانی می کنند
  • شنوندگان رویداد برای توابع شنونده در API

چارچوب از این اجزای اصلی تشکیل شده است:

  • CastContext یک شی تک‌تنه است که اطلاعاتی در مورد وضعیت Cast فعلی ارائه می‌کند و رویدادها را برای تغییر وضعیت Cast و Cast session فعال می‌کند.
  • شی CastSession جلسه را مدیریت می کند -- اطلاعات وضعیت را ارائه می دهد و رویدادهایی مانند تغییر در حجم دستگاه، وضعیت بی صدا و ابرداده برنامه را راه اندازی می کند.
  • عنصر دکمه Cast، که یک عنصر سفارشی ساده HTML است که دکمه HTML را گسترش می دهد. اگر دکمه Cast ارائه شده کافی نیست، می توانید از حالت Cast برای اجرای دکمه Cast استفاده کنید.
  • RemotePlayerController اتصال داده را برای ساده سازی اجرای پخش کننده از راه دور فراهم می کند.

برای توضیح کامل فضای نام ، مرجع API فرستنده وب Google Cast را مرور کنید.

دکمه Cast

مؤلفه دکمه Cast در برنامه شما به طور کامل توسط چارچوب مدیریت می شود. این شامل مدیریت دید و همچنین مدیریت رویداد کلیک می شود.

<google-cast-launcher></google-cast-launcher>

همچنین، می توانید دکمه را به صورت برنامه ریزی شده ایجاد کنید:

document.createElement("google-cast-launcher");

در صورت لزوم می‌توانید هر گونه استایل اضافی مانند اندازه یا موقعیت را روی عنصر اعمال کنید. از ویژگی --connected-color برای انتخاب رنگ برای حالت گیرنده وب متصل و --disconnected-color برای حالت قطع استفاده کنید.

مقداردهی اولیه

پس از بارگیری چارچوب API، برنامه با window.__onGCastApiAvailable . باید مطمئن شوید که برنامه قبل از بارگیری کتابخانه فرستنده، این کنترلر را روی window تنظیم می کند.

در این کنترلر، تعامل Cast را با فراخوانی متد setOptions(options) CastContext مقداردهی اولیه می‌کنید.

به عنوان مثال:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

سپس، API را به صورت زیر مقداردهی اولیه می کنید:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

ابتدا برنامه نمونه تکی شی CastContext ارائه شده توسط چارچوب را بازیابی می کند. سپس از setOptions(options) با استفاده از یک شی CastOptions برای تنظیم applicationID استفاده می کند.

اگر از گیرنده رسانه پیش‌فرض استفاده می‌کنید که نیازی به ثبت نام ندارد، به جای applicationID ، از یک ثابت از پیش تعریف شده توسط Web Sender SDK استفاده می‌کنید، همانطور که در زیر نشان داده شده است: 

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

کنترل رسانه ها

هنگامی که CastContext مقداردهی اولیه شد، برنامه می تواند CastSession فعلی را در هر زمانی با استفاده از getCurrentSession() بازیابی کند.

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

از CastSession می توان برای بارگیری رسانه به دستگاه Cast متصل با استفاده از loadMedia(loadRequest) استفاده کرد. ابتدا یک MediaInfo با استفاده از contentId و contentType و همچنین سایر اطلاعات مرتبط با محتوا ایجاد کنید. سپس یک LoadRequest از آن ایجاد کنید و تمام اطلاعات مربوط به درخواست را تنظیم کنید. در نهایت، loadMedia(loadRequest) را در CastSession خود فراخوانی کنید.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

متد loadMedia یک Promise را برمی‌گرداند که می‌توان از آن برای انجام هرگونه عملیات لازم برای نتیجه موفقیت‌آمیز استفاده کرد. اگر Promise رد شود، آرگومان تابع یک chrome.cast.ErrorCode خواهد بود.

می‌توانید به متغیرهای وضعیت پخش‌کننده در RemotePlayer دسترسی داشته باشید. تمام تعاملات با RemotePlayer ، از جمله فراخوانی رویدادهای رسانه ای و دستورات، با RemotePlayerController انجام می شود.

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController به برنامه کنترل رسانه کامل PLAY، MAUSE، STOP و SEEK را برای رسانه بارگذاری شده می دهد.

  • PLAY/PAUSE: playerController.playOrPause();
  • STOP: playerController.stop();
  • SEEK: playerController.seek();

RemotePlayer و RemotePlayerController را می توان با چارچوب های اتصال داده، مانند Polymer یا Angular، برای پیاده سازی یک پخش کننده از راه دور استفاده کرد.

در اینجا یک قطعه کد برای Angular آمده است: 

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

وضعیت رسانه

در طول پخش رسانه، رویدادهای مختلفی رخ می‌دهد که می‌توان با تنظیم شنوندگان برای رویدادهای مختلف cast.framework.RemotePlayerEventType در شی RemotePlayerController ، آنها را ضبط کرد.

برای دریافت اطلاعات وضعیت رسانه، از رویداد cast.framework.RemotePlayerEventType .MEDIA_INFO_CHANGED استفاده کنید، که هنگام تغییر پخش و زمانی که CastSession.getMediaSession().media

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

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

نحوه عملکرد مدیریت جلسه

Cast SDK مفهوم جلسه Cast را معرفی می کند که ایجاد آن ترکیبی از مراحل اتصال به یک دستگاه، راه اندازی (یا پیوستن) یک برنامه گیرنده وب، اتصال به آن برنامه و راه اندازی یک کانال کنترل رسانه است. برای اطلاعات بیشتر در مورد جلسات Cast و چرخه عمر گیرنده وب، به راهنمای چرخه عمر برنامه گیرنده وب مراجعه کنید.

جلسات توسط کلاس CastContext مدیریت می شوند که برنامه شما می تواند آن را از طریق cast.framework.CastContext.getInstance() بازیابی کند. جلسات فردی توسط زیر کلاس های کلاس Session نشان داده می شوند. برای مثال، CastSession جلسات را با دستگاه‌های Cast نشان می‌دهد. برنامه شما می تواند از طریق CastContext.getCurrentSession() به جلسه Cast در حال حاضر فعال دسترسی داشته باشد.

برای نظارت بر وضعیت جلسه، یک شنونده به CastContext برای نوع رویداد CastContextEventType .SESSION_STATE_CHANGED اضافه کنید.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

برای قطع ارتباط، مانند زمانی که کاربر روی دکمه «توقف ارسال محتوا» از کادر گفتگوی Cast کلیک می‌کند، می‌توانید یک شنونده برای نوع رویداد RemotePlayerEventType .IS_CONNECTED_CHANGED در شنونده خود اضافه کنید. در شنونده خود بررسی کنید که آیا RemotePlayer قطع شده است یا خیر. اگر چنین است، وضعیت پخش محلی را در صورت لزوم به روز کنید. به عنوان مثال:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

در حالی که کاربر می‌تواند مستقیماً پایان Cast را از طریق دکمه Cast Framework کنترل کند، خود فرستنده می‌تواند با استفاده از شی CastSession فعلی ارسال را متوقف کند. 

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

انتقال جریان

حفظ وضعیت جلسه اساس انتقال جریان است، جایی که کاربران می‌توانند با استفاده از دستورات صوتی، برنامه Google Home یا نمایشگرهای هوشمند، جریان‌های صوتی و تصویری موجود را در دستگاه‌ها جابه‌جا کنند. پخش رسانه در یک دستگاه (منبع) متوقف می شود و در دستگاه دیگر (مقصد) ادامه می یابد. هر دستگاه Cast با آخرین سیستم‌افزار می‌تواند به عنوان منبع یا مقصد در انتقال جریان عمل کند.

برای دریافت دستگاه مقصد جدید در طول انتقال جریان، زمانی که رویداد cast.framework.SessionState .SESSION_RESUMED فراخوانی شد CastSession#getCastDevice() را فراخوانی کنید.

برای اطلاعات بیشتر به انتقال جریان در گیرنده وب مراجعه کنید.

قبلی
راه اندازی
بعدی
افزودن ویژگی های پیشرفته