این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

یک گیرنده وب سفارشی بسازید

1. بررسی اجمالی

نشان‌واره Google Cast

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

Google Cast چیست؟

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

Google Cast SDK به برنامه شما اجازه می‌دهد دستگاه‌های دارای Google Cast را کنترل کند (مثلاً تلویزیون یا سیستم صوتی). Cast SDK اجزای رابط کاربری لازم را بر اساس فهرست چک طراحی Google Cast در اختیار شما قرار می دهد.

چک لیست طراحی Google Cast برای ساده و قابل پیش بینی کردن تجربه کاربر Cast در همه پلتفرم های پشتیبانی شده ارائه شده است. بیشتر را اینجا ببینید.

قرار است چه چیزی بسازیم؟

وقتی این کد لبه را تکمیل کردید، یک برنامه HTML5 خواهید داشت که به عنوان گیرنده سفارشی شما عمل می کند که قادر به نمایش محتوای ویدیویی در دستگاه های دارای قابلیت Cast است.

چیزی که یاد خواهید گرفت

نحوه تنظیم برای توسعه گیرنده
اصول اولیه یک گیرنده با قابلیت Cast بر اساس چارچوب برنامه Cast.
نحوه دریافت ویدیوی بازیگران
نحوه ادغام Debug Logger.
چگونه گیرنده خود را برای نمایشگرهای هوشمند بهینه کنیم.

آنچه شما نیاز دارید

آخرین مرورگر گوگل کروم .
سرویس میزبانی HTTPS مانند میزبانی Firebase یا ngrok .
یک دستگاه Google Cast مانند Chromecast یا Android TV که با دسترسی به اینترنت پیکربندی شده است.
تلویزیون یا مانیتور با ورودی HDMI.

تجربه کنید

شما باید دانش قبلی توسعه وب داشته باشید.
شما همچنین به دانش قبلی در مورد تماشای تلویزیون نیاز دارید :)

چگونه از این آموزش استفاده خواهید کرد؟

فقط از طریق آن را بخوانید

آن را بخوانید و تمرینات را کامل کنید

تجربه خود را با ساختن اپلیکیشن های وب چگونه ارزیابی می کنید؟

تازه کار

متوسط

مسلط

تجربه خود را از تماشای تلویزیون چگونه ارزیابی می کنید؟

تازه کار

متوسط

مسلط

2. کد نمونه را دریافت کنید

می توانید تمام کدهای نمونه را در رایانه خود دانلود کنید ...

و فایل فشرده دانلود شده را باز کنید.

3. استقرار گیرنده خود به صورت محلی

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

اگر سروری برای استفاده در دسترس ندارید، می توانید از Firebase Hosting یا ngrok استفاده کنید.

سرور را اجرا کنید

هنگامی که سرویس مورد نظر خود را راه اندازی کردید، به app-start بروید و سرور خود را راه اندازی کنید.

URL مربوط به گیرنده میزبان خود را یادداشت کنید. در بخش بعدی از آن استفاده خواهید کرد.

4. یک برنامه را در Cast Developer Console ثبت کنید

شما باید برنامه خود را ثبت کنید تا بتوانید یک گیرنده سفارشی را، همانطور که در این لبه کد ساخته شده است، در دستگاه های Chromecast اجرا کنید. پس از اینکه برنامه خود را ثبت کردید، یک شناسه برنامه دریافت خواهید کرد که برنامه فرستنده شما باید از آن برای انجام تماس های API، مانند راه اندازی یک برنامه گیرنده، استفاده کند.

تصویر Google Cast SDK Developer Console با دکمه «افزودن برنامه جدید» برجسته شده است

روی "افزودن برنامه جدید" کلیک کنید

تصویر صفحه «برنامه گیرنده جدید» با برجسته شدن گزینه «گیرنده سفارشی»

"گیرنده سفارشی" را انتخاب کنید، این چیزی است که ما در حال ساختن آن هستیم.

تصویر صفحه «گیرنده سفارشی جدید» که نشانی اینترنتی را نشان می‌دهد که شخصی در فیلد «URL برنامه گیرنده» تایپ می‌کند.

جزئیات گیرنده جدید خود را وارد کنید، مطمئن شوید که از URL که در نهایت با آن استفاده کرده اید استفاده کنید

در آخرین بخش شناسه برنامه اختصاص داده شده به گیرنده جدید خود را یادداشت کنید .

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

تصویر Google Cast SDK Developer Console با دکمه «افزودن دستگاه جدید» برجسته شده است

روی "افزودن دستگاه جدید" کلیک کنید

تصویر گفتگوی «افزودن دستگاه گیرنده Cast».

شماره سریال چاپ شده در پشت دستگاه Cast خود را وارد کرده و نامی توصیفی برای آن بگذارید. هنگام دسترسی به Google Cast SDK Developer Console همچنین می‌توانید شماره سریال خود را با فرستادن صفحه نمایش خود در Chrome پیدا کنید.

5-15 دقیقه طول می کشد تا گیرنده و دستگاه شما برای آزمایش آماده شوند. پس از 5 تا 15 دقیقه انتظار، باید دستگاه Cast خود را راه اندازی مجدد کنید.

5. برنامه نمونه را اجرا کنید

لوگوی گوگل کروم

در حالی که منتظر هستیم تا برنامه گیرنده جدید خود برای آزمایش آماده شود، بیایید ببینیم یک نمونه برنامه گیرنده تکمیل شده چگونه به نظر می رسد. گیرنده‌ای که می‌خواهیم بسازیم، می‌تواند رسانه‌ها را با استفاده از جریان نرخ بیت تطبیقی پخش کند (از محتوای نمونه کدگذاری‌شده برای جریان تطبیقی پویا از طریق HTTP (DASH) استفاده می‌کنیم).

در مرورگر خود، ابزار Command and Control (CaC) را باز کنید.

تصویر برگه «Cast Connect & Logger Controls» ابزار Command and Control (CaC)

باید ابزار CaC ما را ببینید.
از شناسه نمونه گیرنده پیش فرض «CC1AD845» استفاده کنید و روی دکمه «تنظیم شناسه برنامه» کلیک کنید.
روی دکمه Cast در بالا سمت چپ کلیک کنید و دستگاه Google Cast خود را انتخاب کنید.

تصویر برگه «Cast Connect & Logger Controls» ابزار Command and Control (CaC) که نشان می‌دهد به یک برنامه گیرنده متصل است.

به تب "Load Media" در بالا بروید.

تصویر تب "Load Media" ابزار Command and Control (CaC).

برای پخش یک ویدیوی نمونه روی دکمه "بارگیری بر اساس محتوا" کلیک کنید.
این ویدیو در دستگاه Google Cast شما شروع به پخش می کند تا نشان دهد که عملکرد اصلی گیرنده با استفاده از گیرنده پیش فرض چگونه به نظر می رسد.

6. پروژه شروع را آماده کنید

باید پشتیبانی از Google Cast را به برنامه شروعی که دانلود کردید اضافه کنیم. در اینجا برخی از اصطلاحات Google Cast وجود دارد که در این کد لبه استفاده خواهیم کرد:

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

اکنون شما آماده هستید تا با استفاده از ویرایشگر متن مورد علاقه خود، در بالای پروژه شروع بسازید:

را انتخاب کنید دایرکتوری app-start از دانلود کد نمونه شما.
js/receiver.js و index.html را باز کنید

توجه داشته باشید، همانطور که شما از طریق این کد لبه کار می کنید، http-server باید تغییراتی را که ایجاد می کنید را انتخاب کند. اگر متوجه شدید که اینطور نیست، سعی کنید http-server بکشید و دوباره راه اندازی کنید.

طراحی اپلیکیشن

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

این برنامه شامل یک نمای اصلی است که در index.html تعریف شده است و یک فایل جاوا اسکریپت به نام js/receiver.js که شامل تمام منطق برای کارکرد گیرنده ما است.

index.html

این فایل html حاوی رابط کاربری برنامه گیرنده ما خواهد بود. در حال حاضر خالی است و ما در آزمایشگاه کد به آن اضافه خواهیم کرد.

گیرنده.js

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

7. یک گیرنده اصلی Cast

یک گیرنده اصلی Cast، جلسه Cast را هنگام راه اندازی مقداردهی اولیه می کند. این لازم است تا به همه برنامه های فرستنده متصل بگوییم که بالا آوردن گیرنده موفقیت آمیز بوده است. علاوه بر این، SDK جدید از پیش پیکربندی شده است تا از رسانه‌های جریانی با نرخ بیت تطبیقی (با استفاده از DASH، HLS و Smooth Streaming) و فایل‌های MP4 ساده خارج از جعبه استفاده کند. بیایید این را امتحان کنیم.

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

کد زیر را به index.html در هدر اضافه کنید:

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

کد زیر را به index.html <body> قبل از footer> loading receiver.js, اضافه کنید تا فضایی برای SDK گیرنده فراهم کنید تا رابط کاربری پیش‌فرض گیرنده را نمایش دهد که با اسکریپتی که به تازگی اضافه کرده‌اید ارسال می‌شود.

<cast-media-player></cast-media-player>

اکنون باید SDK را در js/receiver.js مقداردهی کنیم که شامل موارد زیر است:

به دست آوردن یک مرجع به CastReceiverContext ، نقطه ورودی اصلی شما به کل Receiver SDK
ذخیره یک مرجع به PlayerManager ، شیء که بازپخش را کنترل می کند و تمام قلاب هایی را که برای وصل کردن منطق سفارشی خود نیاز دارید در اختیار شما قرار می دهد.
راه اندازی SDK با فراخوانی start() در CastReceiverContext

موارد زیر را به js/receiver.js اضافه کنید.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. پخش محتوای ویدیویی "پایه".

برای اهداف این Codelab، از ابزار CaC برای امتحان گیرنده جدید خود استفاده کنید.

مرورگر وب خود را به ابزار Command and Control (CaC) هدایت کنید.

تصویر برگه «Cast Connect & Logger Controls» ابزار Command and Control (CaC)

مطمئن شوید که شناسه برنامه خود را همانطور که قبلاً در فیلد ثبت شده است جایگزین کرده و روی «تنظیم شناسه برنامه» کلیک کنید. این به ابزار دستور می دهد تا هنگام شروع جلسه Cast از گیرنده شما استفاده کند.

رسانه ریخته گری

در سطح بالا، برای پخش رسانه در دستگاه Cast باید موارد زیر انجام شود:

فرستنده یک شی MediaInfo JSON از Cast SDK ایجاد می کند که یک مورد رسانه را مدل می کند.
فرستنده برای راه اندازی برنامه گیرنده به دستگاه Cast متصل می شود.
گیرنده شی MediaInfo را از طریق یک درخواست LOAD برای پخش محتوا بارگذاری می کند.
گیرنده وضعیت رسانه را نظارت و ردیابی می کند.
فرستنده دستورات پخش را برای کنترل پخش بر اساس تعامل کاربر با برنامه فرستنده به گیرنده می فرستد.

در این اولین تلاش اولیه، MediaInfo با یک URL دارایی قابل پخش (ذخیره شده در MediaInfo.contentUrl ) پر می کنیم.

یک فرستنده واقعی از یک شناسه رسانه خاص برنامه در MediaInfo.contentId استفاده می کند. گیرنده از contentId به‌عنوان شناسه‌ای برای برقراری تماس‌های API باطنی مناسب استفاده می‌کند تا URL دارایی واقعی را حل کند و آن را روی MediaInfo.contentUrl. گیرنده همچنین وظایفی مانند اخذ مجوز DRM یا تزریق اطلاعات مربوط به وقفه های تبلیغاتی را انجام خواهد داد.

ما می خواهیم گیرنده شما را برای انجام چنین کاری در بخش بعدی گسترش دهیم. در حال حاضر، روی نماد Cast کلیک کنید و دستگاه خود را انتخاب کنید تا گیرنده شما باز شود.

تصویر برگه «Cast Connect & Logger Controls» ابزار Command and Control (CaC) که نشان می‌دهد به یک برنامه گیرنده متصل است.

به تب "Load Media" بروید و روی دکمه "Load by Content" کلیک کنید. گیرنده شما باید شروع به پخش محتوای نمونه کند.

تصویر تب "Load Media" ابزار Command and Control (CaC).

بنابراین Receiver SDK خارج از جعبه کنترل می کند:

راه اندازی جلسه بازیگران
رسیدگی به درخواست‌های LOAD دریافتی از فرستندگان که حاوی دارایی‌های قابل پخش هستند
یک رابط کاربری اولیه پخش کننده آماده برای نمایش در صفحه بزرگ ارائه دهید.

قبل از رفتن به بخش بعدی، راحت می توانید ابزار CaC و کد آن را بررسی کنید، جایی که ما می خواهیم گیرنده خود را گسترش دهیم تا با یک نمونه API ساده صحبت کند تا درخواست های LOAD دریافتی از فرستندگان را برآورده کند.

9. یکپارچه سازی با یک API خارجی

مطابق با نحوه تعامل اکثر توسعه‌دهندگان با گیرنده‌های Cast خود در برنامه‌های کاربردی دنیای واقعی، ما می‌خواهیم گیرنده خود را طوری تغییر دهیم که درخواست‌های LOAD را که به محتوای رسانه مورد نظر توسط کلید API ارجاع می‌دهند، به جای ارسال از طریق URL دارایی قابل پخش، رسیدگی کند.

برنامه ها معمولاً این کار را انجام می دهند زیرا:

ممکن است فرستنده URL محتوا را نداند.
برنامه Cast برای رسیدگی به احراز هویت، دیگر منطق تجاری یا تماس‌های API به طور مستقیم روی گیرنده طراحی شده است.

این قابلیت عمدتاً در متد PlayerManager setMessageInterceptor() پیاده سازی می شود. این به شما امکان می‌دهد پیام‌های دریافتی را بر اساس نوع رهگیری کنید و قبل از رسیدن به کنترل‌کننده پیام داخلی SDK، آنها را اصلاح کنید. در این بخش با درخواست های LOAD سروکار داریم که در آن موارد زیر را انجام خواهیم داد:

درخواست LOAD ورودی و contentId سفارشی آن را بخوانید.
یک تماس GET با API ما برقرار کنید تا دارایی قابل پخش را از طریق contentId آن جستجو کنید.
درخواست LOAD را با URL جریان تغییر دهید.
برای تنظیم پارامترهای نوع جریان، شی MediaInformation را تغییر دهید.
درخواست را برای پخش به SDK ارسال کنید، یا اگر نتوانستیم رسانه درخواستی را جستجو کنیم، فرمان را رد کنید.

نمونه API ارائه شده، قلاب‌های SDK را برای سفارشی‌سازی وظایف گیرنده معمولی نشان می‌دهد، در حالی که همچنان بر تجربه‌ای کاملاً خارج از جعبه تکیه دارد.

نمونه API

مرورگر خود را به https://storage.googleapis.com/cpe-sample-media/content.json هدایت کنید و به کاتالوگ ویدیوی نمونه ما نگاهی بیندازید. این محتوا شامل آدرس‌های اینترنتی برای تصاویر پوستر با فرمت png و همچنین جریان‌های DASH و HLS است. جریان‌های DASH و HLS به منابع ویدیویی و صوتی دمکس‌شده‌ای اشاره می‌کنند که در کانتینرهای mp4 تکه‌تکه‌شده ذخیره شده‌اند.

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

در مرحله بعد، پس از فراخوانی گیرنده با درخواست LOAD ، کلید هر ورودی (به عنوان مثال، bbb, fbb_ad ) را به URL جریان نگاشت می کنیم.

درخواست LOAD را قطع کنید

در این مرحله ما یک رهگیر بار با تابعی ایجاد می کنیم که درخواست XHR را به فایل JSON میزبانی شده می دهد. هنگامی که فایل JSON به دست آمد، محتوا را تجزیه می کنیم و ابرداده را تنظیم می کنیم. در بخش‌های بعدی، پارامترهای MediaInformation را برای تعیین نوع محتوا سفارشی می‌کنیم.

درست قبل از فراخوانی context.start() کد زیر را به فایل js/receiver.js خود اضافه کنید.

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

بخش بعدی نحوه پیکربندی ویژگی media درخواست بارگذاری برای محتوای DASH را تشریح خواهد کرد.

با استفاده از نمونه محتوای DASH API

حال که رهگیر بار را آماده کرده ایم، نوع محتوا را برای گیرنده مشخص می کنیم. این اطلاعات URL لیست پخش اصلی و نوع MIME جریانی را در اختیار گیرنده قرار می دهد. کد زیر را به فایل js/receiver.js در Promise() LOAD interceptor اضافه کنید:

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

پس از تکمیل این مرحله، می‌توانید به Testing It Out بروید تا بارگیری با محتوای DASH را امتحان کنید. اگر می‌خواهید بارگیری را با محتوای HLS آزمایش کنید، مرحله بعدی را بررسی کنید.

استفاده از Sample API HLS Content

نمونه API شامل محتوای HLS و همچنین DASH است. علاوه بر تنظیم contentType مانند آنچه در مرحله قبل انجام دادیم، درخواست بارگذاری برای استفاده از url های HLS نمونه API به برخی ویژگی های اضافی نیاز دارد. هنگامی که گیرنده برای پخش جریان های HLS پیکربندی شده است، نوع کانتینر پیش فرض مورد انتظار جریان انتقال (TS) است. در نتیجه، اگر فقط ویژگی contentUrl اصلاح شود، گیرنده سعی می کند نمونه جریان های MP4 را در قالب TS باز کند. در درخواست بارگذاری، شی MediaInformation باید با ویژگی های اضافی اصلاح شود تا گیرنده بداند که محتوا از نوع MP4 است و نه TS. کد زیر را به فایل js/receiver.js خود در load interceptor اضافه کنید تا خصوصیات contentUrl و contentType را تغییر دهید. علاوه بر این، ویژگی های HlsSegmentFormat و HlsVideoSegmentFormat را اضافه کنید.

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

تست کردن آن

مجدداً ابزار Command and Control (CaC) را باز کنید و شناسه برنامه خود را روی شناسه برنامه گیرنده خود تنظیم کنید. دستگاه خود را با استفاده از دکمه Cast انتخاب کنید.

به تب "Load Media" بروید. این بار متن فیلد «URL محتوا» را در کنار دکمه «بارگیری بر اساس محتوا» حذف کنید ، که برنامه ما را مجبور می‌کند یک درخواست LOAD که فقط حاوی مرجع contentId باشد به رسانه ما ارسال کند.

تصویر تب "Load Media" ابزار Command and Control (CaC).

با فرض اینکه همه چیز با تغییرات شما در گیرنده خوب کار می کرد، رهگیر باید مراقب شکل دادن به شی MediaInfo به چیزی باشد که SDK می تواند روی صفحه نمایش دهد.

روی دکمه "بارگیری بر اساس محتوا" کلیک کنید تا ببینید آیا رسانه شما به درستی پخش می شود یا خیر. به راحتی می توانید شناسه محتوا را به شناسه دیگری در فایل content.json تغییر دهید.

10. بهینه سازی برای نمایشگرهای هوشمند

نمایشگرهای هوشمند دستگاه‌هایی با قابلیت لمس هستند که به برنامه‌های گیرنده اجازه می‌دهند از کنترل‌های لمسی پشتیبانی کنند.

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

دسترسی به کنترل های رابط کاربری

شیء UI Controls برای نمایشگرهای هوشمند با استفاده از cast.framework.ui.Controls.GetInstance() قابل دسترسی است. کد زیر را به فایل js/receiver.js خود در بالا context.start() اضافه کنید:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

اگر از عنصر <cast-media-player> استفاده نمی‌کنید، باید touchScreenOptimizedApp در CastReceiverOptions تنظیم کنید. در این کد لبه ما از عنصر <cast-media-player> استفاده می کنیم.

context.start({ touchScreenOptimizedApp: true });

دکمه های کنترل پیش فرض بر اساس MetadataType و MediaStatus.supportedMediaCommands به هر شکاف اختصاص داده می شوند.

کنترل های ویدیویی

برای MetadataType.MOVIE ، MetadataType.TV_SHOW ، و MetadataType.GENERIC ، شیء UI Controls برای Smart Displays مانند مثال زیر نمایش داده می شود.

تصویر پخش ویدیو با کنترل‌های رابط کاربری که در بالا قرار گرفته‌اند

--playback-logo-image
MediaMetadata.subtitle
MediaMetadata.title
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1 : ControlsButton.QUEUE_PREV
ControlsSlot.SLOT_PRIMARY_1 : ControlsButton.SEEK_BACKWARD_30
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2 : ControlsButton.SEEK_FORWARD_30
ControlsSlot.SLOT_SECONDARY_2 : ControlsButton.QUEUE_NEXT

کنترل های صوتی

برای MetadataType.MUSIC_TRACK ، شیء UI Controls برای نمایشگرهای هوشمند به صورت زیر نمایش داده می شود:

تصویر پخش موسیقی با کنترل‌های رابط کاربری که در بالا قرار گرفته‌اند

--playback-logo-image
MusicTrackMediaMetadata.albumName
MusicTrackMediaMetadata.title
MusicTrackMediaMetadata.albumArtist
MusicTrackMediaMetadata.images[0]
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1 : ControlsButton.NO_BUTTON
ControlsSlot.SLOT_PRIMARY_1 : ControlsButton.QUEUE_PREV
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2 : ControlsButton.QUEUE_NEXT
ControlsSlot.SLOT_SECONDARY_2 : ControlsButton.NO_BUTTON

به روز رسانی دستورات رسانه پشتیبانی شده

شیء UI Controls همچنین تعیین می‌کند که یک ControlsButton بر اساس MediaStatus.supportedMediaCommands نشان داده شود یا نه.

هنگامی که مقدار supportedMediaCommands برابر با ALL_BASIC_MEDIA باشد، طرح‌بندی کنترل پیش‌فرض به صورت زیر نمایش داده می‌شود:

تصویر کنترل‌های پخش‌کننده رسانه: نوار پیشرفت، دکمه «پخش»، دکمه‌های «پرش به جلو» و «پرش به عقب» فعال هستند

وقتی مقدار supportedMediaCommands برابر با ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT است ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT ، طرح‌بندی کنترل پیش‌فرض به صورت زیر نمایش داده می‌شود:

تصویر کنترل‌های پخش‌کننده رسانه: نوار پیشرفت، دکمه «پخش»، دکمه‌های «پرش به جلو» و «پرش به عقب» و دکمه‌های «صف قبلی» و «صف بعدی» فعال شده است.

وقتی مقدار supportedMediaCommands برابر با PAUSE | QUEUE_PREV | QUEUE_NEXT ، طرح‌بندی کنترل پیش‌فرض به صورت زیر نمایش داده می‌شود:

تصویر کنترل‌های پخش‌کننده رسانه: نوار پیشرفت، دکمه «پخش» و دکمه‌های «صف قبلی» و «صف بعدی» فعال هستند

وقتی آهنگ‌های نوشتاری در دسترس هستند، دکمه شرح بسته همیشه در SLOT_1 نشان داده می‌شود.

تصویر کنترل‌های پخش‌کننده رسانه: نوار پیشرفت، دکمه «پخش»، دکمه‌های «پرش به جلو» و «پرش به عقب»، دکمه‌های «صف قبلی» و «صف بعدی» و دکمه‌های «کپشن بسته» فعال هستند.

برای تغییر پویا مقدار supportedMediaCommands پس از شروع یک زمینه گیرنده، می توانید با PlayerManager.setSupportedMediaCommands تماس بگیرید تا مقدار را لغو کنید. همچنین، می‌توانید با استفاده از addSupportedMediaCommands یک دستور جدید اضافه کنید یا با استفاده از removeSupportedMediaCommands یک دستور موجود را حذف کنید.

سفارشی کردن دکمه های کنترل

با استفاده از PlayerDataBinder می توانید کنترل ها را سفارشی کنید. کد زیر را به فایل js/receiver.js خود در زیر touchControls اضافه کنید تا اولین اسلات کنترل های خود را تنظیم کنید:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. پیاده سازی مرور رسانه ها در نمایشگرهای هوشمند

Media Browse یک ویژگی گیرنده CAF است که به کاربران امکان می دهد محتوای اضافی را در دستگاه های لمسی کاوش کنند. به منظور پیاده سازی این، از PlayerDataBinder برای تنظیم رابط کاربری BrowseContent استفاده خواهید کرد. سپس می توانید آن را با BrowseItems بر اساس محتوایی که می خواهید نمایش دهید پر کنید.

مرور محتوا

در زیر نمونه ای از BrowseContent UI و ویژگی های آن آورده شده است:

تصویر BrowseContent UI که دو تصویر کوچک ویدیو و بخشی از یک سوم را نشان می دهد

BrowseContent.title
BrowseContent.items

نسبت تصویر

targetAspectRatio property برای انتخاب بهترین نسبت تصویر برای دارایی های تصویر خود استفاده کنید. سه نسبت تصویر توسط SDK گیرنده CAF پشتیبانی می‌شوند: SQUARE_1_TO_1 ، PORTRAIT_2_TO_3 ، LANDSCAPE_16_TO_9 .

BrowseItem

از BrowseItem برای نمایش عنوان، زیرنویس، مدت زمان و تصویر برای هر مورد استفاده کنید:

تصویر BrowseContent UI که دو تصویر کوچک ویدیو و بخشی از یک سوم را نشان می دهد

BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle

داده های Media Browse را تنظیم کنید

با تماس با setBrowseContent می‌توانید فهرستی از محتوای رسانه را برای مرور ارائه دهید. کد زیر را به فایل js/receiver.js خود در زیر playerDataBinder خود و در شنونده رویداد MEDIA_CHANGED خود اضافه کنید تا موارد مرور را با عنوان "Up Next" تنظیم کنید.

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

با کلیک بر روی یک آیتم مرور رسانه، رهگیر LOAD فعال می شود. کد زیر را به رهگیر LOAD خود اضافه کنید تا request.media.contentId را به request.media.entity از آیتم مرور رسانه نگاشت کنید:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

همچنین می توانید برای حذف رابط کاربری Media Browse، شی BrowseContent را null کنید.

12. اشکال زدایی برنامه های گیرنده

Cast Receiver SDK گزینه دیگری را برای توسعه دهندگان فراهم می کند تا با استفاده از CastDebugLogger API و یک ابزار Command and Control (CaC) به راحتی برنامه های گیرنده را اشکال زدایی کنند.

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

برای ادغام API، اسکریپت منبع CastDebugLogger را در فایل index.html خود اضافه کنید. منبع باید در تگ <head> پس از اعلان Cast Receiver SDK اعلام شود.

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

در js/receiver.js در بالای فایل و زیر playerManager ، کد زیر را برای بازیابی نمونه CastDebugLogger اضافه کنید و لاگر را فعال کنید:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

هنگامی که ثبت اشکال زدایی فعال است، یک پوشش که DEBUG MODE را نمایش می دهد روی گیرنده نمایش داده می شود.

تصویر یک ویدیو در حال پخش با پیام «DEBUG MODE» که روی پس‌زمینه قرمز در گوشه سمت چپ بالای کادر ظاهر می‌شود.

ثبت رویدادهای پخش کننده

با استفاده از CastDebugLogger می‌توانید رویدادهای پخش‌کننده را که توسط SDK گیرنده CAF اجرا می‌شوند را به‌راحتی ثبت کنید و از سطوح مختلف ثبت‌کننده برای ثبت داده‌های رویداد استفاده کنید. پیکربندی loggerLevelByEvents از cast.framework.events.EventType و cast.framework.events.category استفاده می کند تا مشخص کند کدام رویدادها ثبت شوند.

کد زیر را در زیر اعلان castDebugLogger اضافه کنید تا زمانی که یک رویداد CORE پخش کننده راه اندازی می شود یا یک تغییر mediaStatus پخش می شود، وارد سیستم شوید:

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

ورود پیام ها و برچسب های سفارشی

CastDebugLogger API به شما امکان می دهد پیام های گزارشی را ایجاد کنید که روی پوشش اشکال زدایی گیرنده با رنگ های مختلف ظاهر می شوند. روش‌های گزارش زیر در دسترس هستند که به ترتیب از بالاترین اولویت به کمترین فهرست شده‌اند:

castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);

برای هر متد log، اولین پارامتر یک تگ سفارشی است. این می تواند هر رشته شناسایی که به نظر شما معنی دار است باشد. CastDebugLogger از برچسب ها برای فیلتر کردن گزارش ها استفاده می کند. استفاده از تگ ها در ادامه به تفصیل توضیح داده شده است. پارامتر دوم پیام log است.

برای نمایش گزارش‌ها در عمل، گزارش‌ها را به رهگیر LOAD خود اضافه کنید.

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

با تنظیم سطح گزارش در loggerLevelByTags برای هر تگ سفارشی، می‌توانید پیام‌هایی را که در پوشش اشکال‌زدایی ظاهر می‌شوند، کنترل کنید. به عنوان مثال، فعال کردن یک برچسب سفارشی با cast.framework.LoggerLevel.DEBUG تمام پیام‌های اضافه شده با پیام‌های خطا، هشدار، اطلاعات و اشکال‌زدایی را نمایش می‌دهد. فعال کردن یک برچسب سفارشی با سطح WARNING فقط پیام‌های خطا و هشدار را نشان می‌دهد.

پیکربندی loggerLevelByTags اختیاری است. اگر یک تگ سفارشی برای سطح ثبت‌کننده آن پیکربندی نشده باشد، همه پیام‌های گزارش روی پوشش اشکال‌زدایی نمایش داده می‌شوند.

کد زیر را در زیر گزارشگر رویداد CORE اضافه کنید:

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

همپوشانی اشکال زدایی

Cast Debug Logger یک پوشش اشکال‌زدایی روی گیرنده برای نمایش پیام‌های ثبت سفارشی شما در دستگاه Cast ارائه می‌کند. از showDebugLogs برای تغییر همپوشانی اشکال زدایی و clearDebugLogs برای پاک کردن پیام‌های گزارش روی پوشش استفاده کنید.

کد زیر را برای پیش نمایش همپوشانی اشکال زدایی روی گیرنده خود اضافه کنید.

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

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

13. تبریک می گویم

اکنون می دانید که چگونه با استفاده از Cast Web Receiver SDK یک برنامه گیرنده وب سفارشی ایجاد کنید.

برای جزئیات بیشتر، به راهنمای توسعه دهنده Web Receiver مراجعه کنید.