۱. مرور کلی
این آزمایشگاه کد به شما آموزش میدهد که چگونه یک برنامه گیرنده وب سفارشی بسازید که از API مربوط به Cast Live Breaks استفاده میکند.
گوگل کست چیست؟
گوگل کست به کاربران اجازه میدهد محتوا را از دستگاه تلفن همراه خود به تلویزیون منتقل کنند. سپس کاربران میتوانند از دستگاه تلفن همراه خود به عنوان کنترل از راه دور برای پخش رسانه در تلویزیون استفاده کنند.
کیت توسعه نرمافزار (SDK) گوگل کست (Google Cast) به شما امکان میدهد برنامه خود را برای کنترل تلویزیون یا سیستم صوتی گسترش دهید. کیت توسعه نرمافزار کست (Cast SDK) به شما امکان میدهد اجزای رابط کاربری لازم را بر اساس چکلیست طراحی گوگل کست (Google Cast Design Checklist) اضافه کنید.
چک لیست طراحی گوگل کست (Google Cast) ارائه شده است تا تجربه کاربری کست (Cast) را در تمام پلتفرمهای پشتیبانیشده ساده و قابل پیشبینی کند.
قرار است چه چیزی بسازیم؟
وقتی این آزمایشگاه کد را تکمیل کردید، یک گیرندهی پخش (Cast Receiver) ساختهاید که از APIهای زنده (Live APIs) بهره میبرد.
آنچه یاد خواهید گرفت
- نحوه مدیریت محتوای ویدیوی زنده در Cast.
- نحوه پیکربندی سناریوهای مختلف پخش زنده پشتیبانی شده توسط Cast.
- نحوه اضافه کردن دادههای برنامه به پخش زنده
آنچه نیاز دارید
- جدیدترین مرورگر گوگل کروم .
- سرویس میزبانی HTTPS مانند Firebase Hosting یا ngrok .
- یک دستگاه گوگل کست مانند کروم کست یا تلویزیون اندروید که به اینترنت دسترسی داشته باشد.
- تلویزیون یا مانیتور با ورودی HDMI یا هاب گوگل هوم
تجربه
- شما باید دانش قبلی در زمینه توسعه وب داشته باشید.
- تجربه قبلی در ساخت برنامههای فرستنده و گیرنده Cast.
چگونه از این آموزش استفاده خواهید کرد؟
تجربه خود را در ساخت برنامههای وب چگونه ارزیابی میکنید؟
۲. کد نمونه را دریافت کنید
شما میتوانید تمام کدهای نمونه را روی کامپیوتر خود دانلود کنید...
و فایل زیپ دانلود شده را از حالت فشرده خارج کنید.
۳. نصب گیرنده به صورت محلی
برای اینکه بتوانید از گیرنده وب خود با دستگاه Cast استفاده کنید، باید آن را در جایی میزبانی کنید که دستگاه Cast شما بتواند به آن دسترسی داشته باشد. اگر از قبل سروری دارید که از https پشتیبانی میکند، دستورالعملهای زیر را رد کنید و URL را یادداشت کنید ، زیرا در بخش بعدی به آن نیاز خواهید داشت.
اگر سروری برای استفاده در دسترس ندارید، میتوانید از Firebase Hosting یا ngrok استفاده کنید.
سرور را اجرا کنید
پس از تنظیم سرویس مورد نظر خود، به app-start بروید و سرور خود را شروع کنید.
آدرس اینترنتی (URL) گیرنده میزبان خود را یادداشت کنید. در بخش بعدی از آن استفاده خواهید کرد.
۴. یک برنامه را در کنسول توسعهدهندگان Cast ثبت کنید
برای اینکه بتوانید یک گیرنده سفارشی، همانطور که در این codelab تعبیه شده است، را روی دستگاههای Chromecast اجرا کنید، باید برنامه خود را ثبت کنید . پس از ثبت برنامه، یک شناسه برنامه دریافت خواهید کرد که برنامه فرستنده شما باید برای انجام فراخوانیهای API، مانند راهاندازی برنامه گیرنده، از آن استفاده کند.
روی «افزودن برنامه جدید» کلیک کنید
«گیرنده سفارشی» را انتخاب کنید، این چیزی است که ما در حال ساخت آن هستیم.
جزئیات گیرنده جدید خود را وارد کنید، حتماً از URL که در نهایت با آن وارد شدید استفاده کنید.
در بخش آخر، شناسه برنامه اختصاص داده شده به گیرنده جدید خود را یادداشت کنید .
همچنین باید دستگاه Google Cast خود را ثبت کنید تا قبل از انتشار، بتواند به برنامه گیرنده شما دسترسی داشته باشد. پس از انتشار برنامه گیرنده، برای همه دستگاههای Google Cast در دسترس خواهد بود. برای اهداف این آزمایشگاه کد، توصیه میشود با یک برنامه گیرنده منتشر نشده کار کنید.
روی «افزودن دستگاه جدید» کلیک کنید
شماره سریال چاپ شده در پشت دستگاه Cast خود را وارد کنید و یک نام توصیفی به آن بدهید. همچنین میتوانید با استفاده از Cast کردن صفحه نمایش خود در Chrome هنگام دسترسی به کنسول توسعهدهندگان Google Cast SDK، شماره سریال خود را پیدا کنید.
۵ تا ۱۵ دقیقه طول میکشد تا گیرنده و دستگاه شما برای آزمایش آماده شوند. پس از ۵ تا ۱۵ دقیقه انتظار، باید دستگاه Cast خود را مجدداً راهاندازی کنید.
۵. پخش یک پخش زنده ساده
قبل از شروع این آزمایشگاه کد، مرور راهنمای توسعهدهندهی زنده که مروری بر APIهای زنده ارائه میدهد، میتواند مفید باشد.
برای فرستنده، از Cactool l برای شروع یک جلسه Cast استفاده خواهیم کرد. گیرنده طوری طراحی شده است که به طور خودکار پخش زنده را شروع کند.
گیرنده از سه فایل تشکیل شده است. یک فایل html پایه به نام receiver.html که شامل ساختار اصلی برنامه است. نیازی به تغییر این فایل نخواهید داشت. همچنین فایلی به نام receiver.js وجود دارد که شامل تمام منطق مربوط به گیرنده است. در نهایت، یک metadata_service.js نیز وجود دارد که بعداً در codelab برای شبیهسازی دریافت دادههای راهنمای برنامه استفاده خواهد شد.
برای شروع، Cactool را در کروم باز کنید. شناسه برنامه گیرنده (Receiver Application ID) که در کنسول توسعهدهندگان Cast SDK به شما داده شده است را وارد کنید و روی Set کلیک کنید.
چارچوب برنامه پخش گیرنده وب (CAF) باید طوری تنظیم شود که محتوای پخش شده، پخش زنده باشد. برای انجام این کار، برنامه را با خط کد زیر تغییر دهید. آن را به بدنه اصلی load interceptor در receiver.js اضافه کنید:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
تنظیم نوع پخش زنده روی LIVE ، رابط کاربری زنده CAF را فعال میکند. کیت توسعه نرمافزار گیرنده وب (Web Receiver SDK) به طور خودکار به لبه پخش زنده پرش میکند. دادههای راهنمای برنامه زنده هنوز اضافه نشدهاند، بنابراین نوار پیمایش، طول کامل محدوده قابل جستجو در پخش زنده را نشان میدهد.
تغییرات خود را در receiver.js ذخیره کنید و با کلیک بر روی دکمهی ارسال و انتخاب دستگاه ارسال هدف، یک جلسهی ارسال را در Cactool آغاز کنید. پخش زنده باید بلافاصله شروع شود.
۶. افزودن دادههای راهنمای برنامه
پشتیبانی 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);
}
علاوه بر این، یک فراخوانی به تابع برای بارگذاری دادههای راهنما در load interceptor اضافه کنید:
loadGuideData();
فایل receiver.js را ذخیره کنید و یک جلسه Cast را آغاز کنید. باید زمان شروع، زمان پایان و عنوان برنامه را که همگی روی صفحه نمایش داده میشوند، ببینید.
وقتی که بخش پخش به بخش جدیدی در کانتینر منتقل میشود، یک پیام وضعیت رسانه جدید از گیرنده به همه فرستندهها ارسال میشود تا برنامههای فرستنده بتوانند رابط کاربری خود را بهروزرسانی کنند. توصیه میشود برنامههای گیرنده، فرادادههای کانتینر را در یک رهگیر وضعیت رسانه بهروزرسانی کنند تا به ارسال اطلاعات برنامه به برنامههای فرستنده ادامه دهند. در سرویس نمونه ما، فراداده برنامه فعلی و همچنین فراداده دو برنامه بعدی را برمیگردانیم. برای بهروزرسانی فراداده برای یک جریان، یک کانتینر جدید ایجاد کنید و مانند مثال قبلی، setContainerMetadata را فراخوانی کنید.
۷. غیرفعال کردن جستجو
بیشتر جریانهای ویدیویی از بخشهایی تشکیل شدهاند که طیف وسیعی از فریمهای ویدیویی را در خود جای میدهند. مگر اینکه خلاف آن مشخص شده باشد، CAF به کاربران اجازه میدهد تا در این بخشها جستجو کنند. گیرنده وب میتواند این را با فراخوانی چند API موجود مشخص کند.
در load interceptor، دستور SEEK supported media را حذف کنید. این کار جستجو را در تمام رابطهای فرستنده و لمسی موبایل غیرفعال میکند. کد زیر را بعد از تعاریف متغیرهای نمونه SDK در receiver.js اضافه کنید.
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
برای غیرفعال کردن دستورات جستجوی صوتی که توسط دستیار صوتی مانند Ok Google ارائه میشوند، ۶۰ ثانیه به عقب برگردید ، باید از رهگیر جستجو استفاده شود. این رهگیر هر بار که درخواست جستجو ارسال میشود، فراخوانی میشود. اگر دستور رسانهای پشتیبانی شده توسط 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 را آغاز کنید. دیگر نباید بتوانید در پخش زنده جستجو کنید.
۸. تبریک
اکنون میدانید که چگونه با استفاده از جدیدترین SDK گیرنده Cast، یک برنامه گیرنده سفارشی ایجاد کنید.
برای جزئیات بیشتر، به راهنمای توسعهدهندگان پخش زنده مراجعه کنید.