‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

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

این راهنمای توسعه‌دهنده نحوه افزودن پشتیبانی Google Cast به برنامه «فرستنده وب» را بااستفاده از Cast SDK شرح می‌دهد.

اصطلاحات

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

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

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

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

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

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

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

چارچوب

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

روش‌ها یا توابعی که عملیات را در میانای برنامه‌سازی کاربردی فراخوانی می‌کنند
شنوندگان رویداد برای توابع شنونده در میانای برنامه‌سازی کاربردی

این چارچوب از این مؤلفه‌های اصلی تشکیل شده است:

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

برای شرح کامل فضای نام، مرجع میانای برنامه‌سازی کاربردی Google Cast Web Sender را مرور کنید.

دکمه پخش

مؤلفه دکمه «پخش محتوا» در برنامه‌تان کاملاً توسط چارچوب مدیریت می‌شود. این شامل مدیریت رؤیت‌پذیری و همچنین رسیدگی به رویداد کلیک است.

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

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

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

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

راه‌اندازی

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

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

برای مثال:

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

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

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

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

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

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

کنترل رسانه

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

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

از CastSession می‌توان برای بار کردن رسانه در دستگاه Cast متصل بااستفاده از loadMedia(loadRequest) استفاده کرد. ابتدا، بااستفاده از contentId و contentType و همچنین هر اطلاعات دیگری که به محتوا مربوط است، MediaInfo ایجاد کنید. سپس یک 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 به برنامه کنترل کامل رسانه را برای پخش، مکث، توقف، و جستجو برای رسانه بارشده می‌دهد.

پخش/مکث: 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 را معرفی می‌کند که ایجاد آن ترکیبی از مراحل اتصال به دستگاه، راه‌اندازی (یا پیوستن به) برنامه Web Receiver، اتصال به آن برنامه، و مقداردهی اولیه کانال کنترل رسانه است. برای اطلاعات بیشتر درباره جلسه‌های Cast و چرخه عمر «گیرنده وب»، راهنمای چرخه عمر برنامه «گیرنده وب» را ببینید.

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

برای نظارت بر وضعیت جلسه، یک شنونده به 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
    }
  });

While the user can directly control Cast termination via the framework Cast button, the sender itself can stop casting using the current CastSession object.

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

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

برای اطلاعات بیشتر، انتقال جاری‌سازی در «گیرنده وب» را ببینید.

قبلی

تنظیم

بعدی

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