این کد لبه به شما یاد می دهد که چگونه یک برنامه گیرنده وب سفارشی بسازید که از Cast Live Breaks API استفاده می کند.
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.
می توانید تمام کدهای نمونه را در رایانه خود دانلود کنید ...
و فایل فشرده دانلود شده را باز کنید.
برای اینکه بتوانید از گیرنده وب خود با دستگاه Cast استفاده کنید، باید در جایی میزبانی شود که دستگاه Cast شما بتواند به آن دسترسی پیدا کند. اگر از قبل سروری در دسترس دارید که از https پشتیبانی می کند، دستورالعمل های زیر را نادیده بگیرید و URL را یادداشت کنید ، زیرا در بخش بعدی به آن نیاز خواهید داشت.
اگر سروری برای استفاده در دسترس ندارید، می توانید از Firebase Hosting یا ngrok استفاده کنید.
هنگامی که سرویس مورد نظر خود را راه اندازی کردید، به app-start
بروید و سرور خود را راه اندازی کنید.
URL مربوط به گیرنده میزبان خود را یادداشت کنید. در بخش بعدی از آن استفاده خواهید کرد.
شما باید برنامه خود را ثبت کنید تا بتوانید یک گیرنده سفارشی را بهعنوان داخلی این کد لبه روی دستگاههای Chromecast اجرا کنید. پس از اینکه برنامه خود را ثبت کردید، یک شناسه برنامه دریافت خواهید کرد که برنامه فرستنده شما باید از آن برای انجام تماس های API، مانند راه اندازی یک برنامه گیرنده، استفاده کند.
روی "افزودن برنامه جدید" کلیک کنید
"دریافت کننده سفارشی" را انتخاب کنید، این همان چیزی است که ما می سازیم.
جزئیات گیرنده جدید خود را وارد کنید، مطمئن شوید که از URL که در نهایت با آن استفاده کرده اید استفاده کنید
در آخرین بخش شناسه برنامه اختصاص داده شده به گیرنده جدید خود را یادداشت کنید .
همچنین باید دستگاه Google Cast خود را ثبت کنید تا قبل از انتشار به برنامه گیرنده شما دسترسی پیدا کند. هنگامی که برنامه گیرنده خود را منتشر کردید، برای همه دستگاه های Google Cast در دسترس خواهد بود. برای اهداف این نرم افزار کد، توصیه می شود با یک برنامه گیرنده منتشر نشده کار کنید.
روی "افزودن دستگاه جدید" کلیک کنید
شماره سریال چاپ شده در پشت دستگاه Cast خود را وارد کرده و نامی توصیفی برای آن بگذارید. هنگام دسترسی به Google Cast SDK Developer Console همچنین میتوانید شماره سریال خود را با فرستادن صفحه نمایش خود در Chrome پیدا کنید.
5-15 دقیقه طول می کشد تا گیرنده و دستگاه شما برای آزمایش آماده شوند. پس از 5 تا 15 دقیقه انتظار، باید دستگاه Cast خود را راه اندازی مجدد کنید.
قبل از شروع این نرمافزار، مرور راهنمای توسعهدهنده زنده که یک نمای کلی از 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 آغاز کنید. پخش زنده باید فوراً پخش شود.
پشتیبانی 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
مانند مثال قبلی فراخوانی کنید.
اکثر جریانهای ویدیویی از بخشهایی تشکیل شدهاند که طیفی از فریمهای ویدیو را در خود جای میدهند. مگر اینکه غیر از این مشخص شده باشد، 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 را شروع کنید. دیگر نباید در جریان زنده جستجو کنید.
اکنون می دانید که چگونه با استفاده از آخرین Cast Receiver SDK، یک برنامه گیرنده سفارشی ایجاد کنید.
برای جزئیات بیشتر، به راهنمای برنامهنویس پخش جریانی زنده مراجعه کنید.
این کد لبه به شما یاد می دهد که چگونه یک برنامه گیرنده وب سفارشی بسازید که از Cast Live Breaks API استفاده می کند.
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.
می توانید تمام کدهای نمونه را در رایانه خود دانلود کنید ...
و فایل فشرده دانلود شده را باز کنید.
برای اینکه بتوانید از گیرنده وب خود با دستگاه Cast استفاده کنید، باید در جایی میزبانی شود که دستگاه Cast شما بتواند به آن دسترسی پیدا کند. اگر از قبل سروری در دسترس دارید که از https پشتیبانی می کند، دستورالعمل های زیر را نادیده بگیرید و URL را یادداشت کنید ، زیرا در بخش بعدی به آن نیاز خواهید داشت.
اگر سروری برای استفاده در دسترس ندارید، می توانید از Firebase Hosting یا ngrok استفاده کنید.
هنگامی که سرویس مورد نظر خود را راه اندازی کردید، به app-start
بروید و سرور خود را راه اندازی کنید.
URL مربوط به گیرنده میزبان خود را یادداشت کنید. در بخش بعدی از آن استفاده خواهید کرد.
شما باید برنامه خود را ثبت کنید تا بتوانید یک گیرنده سفارشی را بهعنوان داخلی این کد لبه روی دستگاههای Chromecast اجرا کنید. پس از اینکه برنامه خود را ثبت کردید، یک شناسه برنامه دریافت خواهید کرد که برنامه فرستنده شما باید از آن برای انجام تماس های API، مانند راه اندازی یک برنامه گیرنده، استفاده کند.
روی "افزودن برنامه جدید" کلیک کنید
"دریافت کننده سفارشی" را انتخاب کنید، این همان چیزی است که ما می سازیم.
جزئیات گیرنده جدید خود را وارد کنید، مطمئن شوید که از URL که در نهایت با آن استفاده کرده اید استفاده کنید
در آخرین بخش شناسه برنامه اختصاص داده شده به گیرنده جدید خود را یادداشت کنید .
همچنین باید دستگاه Google Cast خود را ثبت کنید تا قبل از انتشار به برنامه گیرنده شما دسترسی پیدا کند. هنگامی که برنامه گیرنده خود را منتشر کردید، برای همه دستگاه های Google Cast در دسترس خواهد بود. برای اهداف این نرم افزار کد، توصیه می شود با یک برنامه گیرنده منتشر نشده کار کنید.
روی "افزودن دستگاه جدید" کلیک کنید
شماره سریال چاپ شده در پشت دستگاه Cast خود را وارد کرده و نامی توصیفی برای آن بگذارید. هنگام دسترسی به Google Cast SDK Developer Console همچنین میتوانید شماره سریال خود را با فرستادن صفحه نمایش خود در Chrome پیدا کنید.
5-15 دقیقه طول می کشد تا گیرنده و دستگاه شما برای آزمایش آماده شوند. پس از 5 تا 15 دقیقه انتظار، باید دستگاه Cast خود را راه اندازی مجدد کنید.
قبل از شروع این نرمافزار، مرور راهنمای توسعهدهنده زنده که یک نمای کلی از 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 آغاز کنید. پخش زنده باید فوراً پخش شود.
پشتیبانی 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
مانند مثال قبلی فراخوانی کنید.
اکثر جریانهای ویدیویی از بخشهایی تشکیل شدهاند که طیفی از فریمهای ویدیو را در خود جای میدهند. مگر اینکه غیر از این مشخص شده باشد، 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 را شروع کنید. دیگر نباید در جریان زنده جستجو کنید.
اکنون می دانید که چگونه با استفاده از آخرین Cast Receiver SDK، یک برنامه گیرنده سفارشی ایجاد کنید.
برای جزئیات بیشتر، به راهنمای برنامهنویس پخش جریانی زنده مراجعه کنید.
این کد لبه به شما یاد می دهد که چگونه یک برنامه گیرنده وب سفارشی بسازید که از Cast Live Breaks API استفاده می کند.
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.
می توانید تمام کدهای نمونه را در رایانه خود دانلود کنید ...
و فایل فشرده دانلود شده را باز کنید.
برای اینکه بتوانید از گیرنده وب خود با دستگاه Cast استفاده کنید، باید در جایی میزبانی شود که دستگاه Cast شما بتواند به آن دسترسی پیدا کند. اگر از قبل سروری در دسترس دارید که از https پشتیبانی می کند، دستورالعمل های زیر را نادیده بگیرید و URL را یادداشت کنید ، زیرا در بخش بعدی به آن نیاز خواهید داشت.
اگر سروری برای استفاده در دسترس ندارید، می توانید از Firebase Hosting یا ngrok استفاده کنید.
هنگامی که سرویس مورد نظر خود را راه اندازی کردید، به app-start
بروید و سرور خود را راه اندازی کنید.
URL مربوط به گیرنده میزبان خود را یادداشت کنید. در بخش بعدی از آن استفاده خواهید کرد.
شما باید برنامه خود را ثبت کنید تا بتوانید یک گیرنده سفارشی را بهعنوان داخلی این کد لبه روی دستگاههای Chromecast اجرا کنید. پس از اینکه برنامه خود را ثبت کردید، یک شناسه برنامه دریافت خواهید کرد که برنامه فرستنده شما باید از آن برای انجام تماس های API، مانند راه اندازی یک برنامه گیرنده، استفاده کند.
روی "افزودن برنامه جدید" کلیک کنید
"دریافت کننده سفارشی" را انتخاب کنید، این همان چیزی است که ما می سازیم.
جزئیات گیرنده جدید خود را وارد کنید، مطمئن شوید که از URL که در نهایت با آن استفاده کرده اید استفاده کنید
در آخرین بخش شناسه برنامه اختصاص داده شده به گیرنده جدید خود را یادداشت کنید .
همچنین باید دستگاه Google Cast خود را ثبت کنید تا قبل از انتشار به برنامه گیرنده شما دسترسی پیدا کند. هنگامی که برنامه گیرنده خود را منتشر کردید، برای همه دستگاه های Google Cast در دسترس خواهد بود. برای اهداف این نرم افزار کد، توصیه می شود با یک برنامه گیرنده منتشر نشده کار کنید.
روی "افزودن دستگاه جدید" کلیک کنید
شماره سریال چاپ شده در پشت دستگاه Cast خود را وارد کرده و نامی توصیفی برای آن بگذارید. هنگام دسترسی به Google Cast SDK Developer Console همچنین میتوانید شماره سریال خود را با فرستادن صفحه نمایش خود در Chrome پیدا کنید.
5-15 دقیقه طول می کشد تا گیرنده و دستگاه شما برای آزمایش آماده شوند. پس از 5 تا 15 دقیقه انتظار، باید دستگاه Cast خود را راه اندازی مجدد کنید.
قبل از شروع این نرمافزار، مرور راهنمای توسعهدهنده زنده که یک نمای کلی از 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 آغاز کنید. پخش زنده باید فوراً پخش شود.
پشتیبانی 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
مانند مثال قبلی فراخوانی کنید.
اکثر جریانهای ویدیویی از بخشهایی تشکیل شدهاند که طیفی از فریمهای ویدیو را در خود جای میدهند. مگر اینکه غیر از این مشخص شده باشد، 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 را شروع کنید. دیگر نباید بتوانید در جریان مستقیم جستجو کنید.
اکنون می دانید که چگونه با استفاده از آخرین Cast Receiver SDK، یک برنامه گیرنده سفارشی ایجاد کنید.
برای جزئیات بیشتر، به راهنمای توسعه دهندگان پخش زنده مراجعه کنید.