پشتیبانی زنده را به گیرنده Cast اضافه کنید

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

نشان‌واره Google Cast

این کد لبه به شما یاد می دهد که چگونه یک برنامه گیرنده وب سفارشی بسازید که از Cast Live Breaks API استفاده می کند.

Google Cast چیست؟

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

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

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

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

وقتی این کد لبه را تکمیل کردید، یک گیرنده Cast ساخته اید که از Live APIها بهره می برد.

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

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

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

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

تجربه کنید

  • شما باید دانش قبلی توسعه وب داشته باشید.
  • تجربه قبلی در ساخت برنامه های فرستنده و گیرنده Cast.

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

فقط از طریق آن را بخوانید آن را بخوانید و تمرینات را کامل کنید

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

تازه کار متوسط مسلط

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. پخش یک پخش زنده ساده

تصویر یک گوشی اندرویدی در حال پخش ویدیو؛ پیام "Casting to Living Room" در پایین، درست بالای مجموعه ای از کنترل های پخش کننده ویدیو ظاهر می شودتصویر یک صفحه نمایش با اندازه کامل که همان ویدیو را پخش می کند

قبل از شروع این نرم‌افزار، مرور راهنمای توسعه‌دهنده زنده که یک نمای کلی از APIهای زنده را ارائه می‌دهد، ممکن است مفید باشد.

برای فرستنده خود، از Cactool l برای شروع یک جلسه Cast استفاده می کنیم. گیرنده طوری طراحی شده است که به طور خودکار پخش جریانی زنده را شروع کند.

گیرنده از سه فایل تشکیل شده است. یک فایل html اولیه به نام receiver.html که شامل ساختار اصلی برنامه است. شما نیازی به تغییر این فایل نخواهید داشت. همچنین فایلی به نام receiver.js وجود دارد که شامل تمام منطق گیرنده است. در نهایت، یک metadata_service.js نیز وجود دارد که بعداً در codelab برای شبیه‌سازی داده‌های راهنمای برنامه استفاده می‌شود.

برای شروع، Cactool را در کروم باز کنید. شناسه برنامه گیرنده را که در Cast SDK Developer Console به شما داده شده است وارد کنید و روی تنظیم کلیک کنید.

چارچوب برنامه کاربردی پخش گیرنده وب (CAF) باید آموزش ببیند که محتوایی که قرار است پخش شود پخش زنده است. برای انجام این کار، برنامه را با خط کد زیر تغییر دهید. آن را به بدنه اصلی رهگیر بار در receiver.js اضافه کنید:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

تنظیم نوع پخش روی LIVE ، رابط کاربری زنده CAF را فعال می‌کند. Web Receiver SDK به طور خودکار به لبه زنده جریان می‌رود. اطلاعات راهنمای برنامه زنده هنوز اضافه نشده است، بنابراین نوار اسکراب تمام طول محدوده قابل جستجوی جریان را نشان می دهد.

تغییرات خود را در receiver.js ذخیره کنید و با کلیک بر روی دکمه Cast و انتخاب یک دستگاه پخش هدف، یک جلسه Cast را در Cactool آغاز کنید. پخش زنده باید فوراً پخش شود.

6. افزودن اطلاعات راهنمای برنامه

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

CAF از تنظیم ابرداده برای چندین برنامه در یک جریان واحد پشتیبانی می کند. با تنظیم مهرهای زمانی و مدت زمان شروع در اشیاء MediaMetadata ، گیرنده به طور خودکار ابرداده نشان داده شده در فرستنده و پوشش را بر اساس مکان فعلی پخش کننده در جریان به روز می کند. در زیر نمونه ای از API ها و کاربرد کلی آنها آورده شده است.

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

برای این نرم افزار کد ما از یک نمونه سرویس ابرداده برای ارائه ابرداده برای پخش زنده خود استفاده خواهیم کرد. برای ایجاد فهرستی از فراداده های برنامه، یک ظرف ایجاد کنید. ContainerMetadata لیستی از اشیاء MediaMetadata را برای یک جریان رسانه واحد نگهداری می کند. هر شی MediaMetadata یک بخش واحد را در کانتینر نشان می دهد. هنگامی که هد پخش در محدوده یک بخش معین باشد، ابرداده آن به طور خودکار در وضعیت رسانه کپی می شود. کد زیر را به فایل receiver.js اضافه کنید تا نمونه ابرداده را از سرویس ما دانلود کنید و ظرف را در اختیار CAF قرار دهید.

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

علاوه بر این، برای بارگیری اطلاعات راهنما در رهگیر بار، یک تماس به تابع اضافه کنید:

loadGuideData();

فایل receiver.js را ذخیره کنید و یک جلسه Cast را شروع کنید. شما باید زمان شروع برنامه، زمان پایان و عنوان را مشاهده کنید که همگی روی صفحه نمایش داده می شوند.

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

7. غیرفعال کردن جستجو

اکثر جریان های ویدئویی از بخش هایی تشکیل شده اند که طیف وسیعی از فریم های ویدئویی را در خود جای می دهند. مگر اینکه غیر از این مشخص شده باشد، CAF به کاربران اجازه می دهد تا در این بخش ها جستجو کنند. گیرنده وب می‌تواند این مورد را با فراخوانی چند API موجود مشخص کند.

در رهگیر بار، دستور رسانه پشتیبانی شده SEEK را حذف کنید. این کار جستجو را در تمام رابط های فرستنده و لمسی تلفن همراه غیرفعال می کند. کد زیر را بعد از تعاریف متغیرهای نمونه SDK در receiver.js اضافه کنید.

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

برای غیرفعال کردن دستورات جستجوی صوتی ارائه شده توسط دستیار مانند Ok Google، 60 ثانیه به عقب بروید ، باید از رهگیر جستجو استفاده شود. این رهگیر هر بار که درخواست جستجو می شود، فراخوانی می شود. اگر دستور رسانه پشتیبانی شده SEEK غیرفعال باشد، رهگیر درخواست جستجو را رد می کند. قطعه کد زیر را به فایل receiver.js اضافه کنید:

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

فایل receiver.js را ذخیره کنید و یک جلسه Cast را شروع کنید. دیگر نباید در جریان زنده جستجو کنید.

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

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

برای جزئیات بیشتر، به راهنمای برنامه‌نویس پخش جریانی زنده مراجعه کنید.