Добавление поддержки API рекламных пауз в веб-приемник

1. Обзор

В этой лабораторной работе вы узнаете, как создать пользовательское приложение Web Receiver, использующее API Cast Ad Breaks.

Что такое Google Cast?

Google Cast позволяет пользователям транслировать контент с мобильного устройства на телевизор. Затем пользователи могут использовать свое мобильное устройство в качестве пульта дистанционного управления для воспроизведения мультимедиа на телевизоре.

Google Cast SDK позволяет расширить ваше приложение для управления телевизором или звуковой системой. Cast SDK позволяет добавлять необходимые компоненты пользовательского интерфейса на основе контрольного списка Google Cast Design Checklist .

Контрольный список Google Cast Design предназначен для того, чтобы сделать работу с Cast простой и предсказуемой на всех поддерживаемых платформах.

Что мы будем строить?

Когда вы завершите эту лабораторную работу, вы создадите Cast Receiver, использующий преимущества нового Break API.

Что вы узнаете

• Как включить перерывы VMAP и VAST в контенте для Cast
• Как пропустить клипы перерыва
• Как настроить поведение прерывания по умолчанию при поиске

Что вам понадобится

• Последний браузер Google Chrome .
• Служба хостинга HTTPS, такая как Firebase Hosting или ngrok .
• Устройство Google Cast, например Chromecast или Android TV, с доступом в Интернет.
• Телевизор или монитор с входом HDMI или Google Home Hub

Опыт

• Вам понадобятся предыдущие знания в области веб-разработки.
• Предыдущий опыт создания приложений отправителя и получателя Cast.

Возникли проблемы с сетью?

Если вы находитесь в месте, где сеть Wi-Fi ненадежна, устройство Chromecast можно подключить с помощью адаптера Ethernet для Chromecast или для Chromecast с Google TV .

Как вы будете использовать этот учебник?

Прочитайте только это Прочтите его и выполните упражнения

Как бы вы оценили свой опыт создания веб-приложений?

Новичок Средний Опытный

2. Получите пример кода

Вы можете загрузить весь пример кода на свой компьютер...

Скачать исходный код

и распакуйте загруженный zip-файл.

Репозиторий codelab cast-videos-cast содержит два примера проектов:

• app-start — начальный код, который вы будете использовать в этой лаборатории кода.
• app-done — полный код готового примера видеоприложения.

3. Локальное развертывание ресивера

Чтобы иметь возможность использовать ваш веб-приемник с устройством Cast, он должен быть размещен где-то, где ваше устройство Cast может получить к нему доступ. Если у вас уже есть сервер, поддерживающий https, пропустите следующие инструкции и запишите URL-адрес , так как он понадобится вам в следующем разделе.

Если у вас нет доступного сервера, вы можете использовать Firebase Hosting или ngrok .

Запустить сервер

После того, как вы настроите службу по вашему выбору, перейдите к app-start и запустите свой сервер.

Запишите URL-адрес вашего размещенного приемника. Вы будете использовать его в следующем разделе.

4. Зарегистрируйте приложение в Cast Developer Console.

У вас нет учетной записи Cast Developer?

Зарегистрируйте учетную запись в консоли разработчика Google Cast SDK и оплатите регистрационный сбор.

Вы должны зарегистрировать свое приложение , чтобы иметь возможность запускать собственный приемник, созданный в этой лаборатории кода, на устройствах Chromecast. После регистрации приложения вы получите идентификатор приложения, который ваше приложение-отправитель должно использовать для выполнения вызовов API, например для запуска приложения-получателя.

Нажмите «Добавить новое приложение»

Выберите «Пользовательский приемник», это то, что мы создаем.

Введите данные вашего нового получателя, обязательно используйте URL-адрес, который вы получили.

в последнем разделе. Запишите идентификатор приложения , присвоенный вашему новому приемнику.

Вы также должны зарегистрировать свое устройство Google Cast , чтобы оно могло получить доступ к вашему приложению-приемнику, прежде чем вы его опубликуете. Как только вы опубликуете свое приложение-приемник, оно будет доступно для всех устройств Google Cast. Для целей этой кодовой лаборатории рекомендуется работать с неопубликованным приложением-приемником.

Нажмите «Добавить новое устройство».

Введите серийный номер, напечатанный на задней панели вашего устройства Cast, и дайте ему описательное имя. Вы также можете найти свой серийный номер, транслируя свой экран в Chrome при доступе к консоли разработчика Google Cast SDK.

Подготовка приемника и устройства к тестированию займет 5-15 минут. Подождав 5-15 минут, вы должны перезагрузить устройство Cast.

5. Подготовьте стартовый проект

Прежде чем приступить к работе с этой кодовой лабораторией, может быть полезно ознакомиться с руководством разработчика рекламы , в котором представлен обзор новых функций рекламы.

Нам нужно добавить поддержку Google Cast в загруженное вами начальное приложение. Вот некоторые термины Google Cast, которые мы будем использовать в этой кодовой лаборатории:

• приложение отправителя работает на мобильном устройстве или ноутбуке,
• приложение- приемник работает на устройстве Google Cast.

Теперь вы готовы строить поверх начального проекта с помощью вашего любимого текстового редактора:

1. Выберите каталог app-start из загрузки примера кода.
2. Откройте js/receiver.js и index.html.

Обратите внимание, что пока вы работаете с этой кодовой лабораторией, http-server должен собирать изменения, которые вы вносите. Если вы заметили, что это не так, попробуйте убить и перезапустить http-server .

Для нашего отправителя мы будем использовать средство отладки приемника CAF , чтобы инициировать сеанс Cast. Ресивер предназначен для автоматического запуска воспроизведения потока.

Дизайн приложения

Приложение-получатель инициализирует сеанс Cast и будет находиться в режиме ожидания до тех пор, пока не поступит запрос LOAD (т. е. команда на воспроизведение фрагмента мультимедиа) от отправителя.

Приложение состоит из одного основного представления, определенного в index.html , и одного файла JavaScript с именем js/receiver.js , содержащего всю логику для работы нашего приемника.

index.html

Этот html-файл будет содержать весь пользовательский интерфейс для нашего приложения-приемника. Пока он в основном пустой.

приемник.js

Этот скрипт будет управлять всей логикой нашего приложения-приемника. Прямо сейчас он содержит базовый приемник CAF.

литая документация?

У нас есть обширная документация для получателей, отправителей iOS, Android и Chrome.

6. Добавьте VMAP к своему контенту

Для начала откройте веб-отправитель в Chrome. Введите идентификатор приложения-приемника , который вы получили в консоли разработчика Cast SDK, и нажмите «Установить».

В ресивере нам нужно добавить некоторую логику для включения рекламы в контент.

Скопируйте следующую строку в файл js/receiver.js . Он содержит образец ссылки на тег VMAP из DoubleClick, а также некоторую рандомизацию.

const vmapUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=" + Math.floor(Math.random() * Math.pow(10, 10));

В js/receiver.js file найдите функцию playerManager.setMessageInterceptor и добавьте следующее перед последним return request; строка в функции.

request.media.vmapAdsRequest = {
    adTagUrl: vmapUrl,
};

Примечание. Объект, назначенный vmapAdsRequest выше, является сокращенной версией объекта VastAdsRequest .

Сохраните изменения в файле js/receiver.js и инициируйте сеанс трансляции в веб-отправителе , щелкнув правой кнопкой мыши в любом месте страницы и выбрав «Трансляция». Поток объявлений должен начать воспроизводиться немедленно.

7. Добавьте VAST к своему контенту

Если вы реализовали приведенный выше код VMAP, закомментируйте его. Далее мы рассмотрим, как внедрить рекламу VAST в контент.

Скопируйте следующее в файл js/receiver.js . Он содержит шесть клипов VAST break из DoubleClick, а также некоторую рандомизацию. Эти брейк-клипы назначены на 5 брейков. Также указывается положение каждого разрыва.

const addVASTBreaksToMedia = (mediaInformation) => {
    mediaInformation.breakClips = [
        {
            id: "bc1",
            title: "bc1 (Pre-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=preroll&pod=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc2",
            title: "bc2 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc3",
            title: "bc3 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc4",
            title: "bc4 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc5",
            title: "bc5 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc6",
            title: "bc6 (Post-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=postroll&pod=3&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        }
    ];
    mediaInformation.breaks = [
        {
            id: "b1",
            breakClipIds: ["bc1"],
            position: 0
        },
        {
            id: "b2",
            breakClipIds: ["bc2"],
            position: 15
        },
        {
            id: "b3",
            breakClipIds: ["bc3","bc4"],
            position: 60
        },
        {
            id: "b4",
            breakClipIds: ["bc5"],
            position: 100
        },
        {
            id: "b5",
            breakClipIds: ["bc6"],
            position: -1
        }
    ];
};

Примечание. Свойство breakClipIds разрыва представляет собой массив. Это означает, что на каждую паузу может быть назначено несколько брейк-клипов.

В вашем js/receiver.js file найдите перехватчик сообщения LOAD, другими словами, строку, начинающуюся с playerManager.setMessageInterceptor , и добавьте следующее перед последним return request; строка в функции.

addVASTBreaksToMedia(request.media);

Сохраните изменения в файле js/receiver.js и инициируйте сеанс трансляции в веб-отправителе , щелкнув правой кнопкой мыши в любом месте страницы и выбрав «Трансляция». Поток объявлений должен начать воспроизводиться немедленно.

8. Пропуск рекламных пауз

CAF имеет новый класс под названием BreakManager, который помогает вам реализовать пользовательские бизнес-правила для поведения рекламы. Предположим, вы хотите предоставить клиентам льготный период для пропуска рекламы через определенное время.

Отправитель в нашем примере не имеет средств управления мультимедиа. Давайте добавим начальное смещение в 10 секунд, чтобы поток начинал воспроизведение после пре-ролла, но до первого перерыва в середине ролика на 15-секундной отметке.

Найдите playerManager.setMessageInterceptor и добавьте следующую строку перед return request .

request.currentTime = 10;

Сохраните файл receiver.js и инициируйте сеанс Cast. Вы должны увидеть, как контент загружается через 10 секунд, а через 5 секунд воспроизводится реклама.

Теперь давайте добавим правило для пропуска середины ролика на 15-секундной отметке.

Вам понадобится экземпляр BreakManager, чтобы установить перехватчик для прерывания загрузки. Скопируйте следующую строку в файл js/receiver.js после строк, содержащих переменные context и playerManager .

const breakManager = playerManager.getBreakManager();

Теперь давайте настроим перехватчик с правилом игнорировать любые рекламные паузы, которые происходят до 30 секунд. Этот перехватчик работает так же, как перехватчик LOAD в PlayerManager, за исключением того, что он специфичен для загрузки BreakClips.

Скопируйте следующее в файл js/receiver.js .

breakManager.setBreakClipLoadInterceptor((breakClip, breakCtx) => {
  /** Below code will skip playback of break clips if the break position is less than 30 **/
  let breakObj = breakCtx.break;
  if(breakObj.position < 30)
    return null;
  else
    return breakClip;
});

Примечание. Здесь мы возвращаем null для клипов BreakClip, которые следует пропустить.

Сохраните изменения в файле js/receiver.js и инициируйте сеанс трансляции в веб-отправителе , щелкнув правой кнопкой мыши в любом месте страницы и выбрав «Трансляция».

Поток должен начать воспроизводиться, но рекламный блок, который мы видели ранее на 15 секундах, будет пропущен.

9. Настройка поведения поиска перерыва

Когда пользователь ищет вперед, то воспроизводится последний невоспроизведенный перерыв между seekFrom и seekTo, прежде чем воспроизведение контента начнется с позиции seekTo. Когда пользователь ищет назад, перерыв не воспроизводится. Это поведение прерываний по умолчанию.

Чтобы настроить воспроизведение брейков при поиске, мы используем BreakManager. Мы используем setBreakSeekInterceptor BreakManager, чтобы указать желаемое пользовательское поведение. setBreakSeekInterceptor вызывается всякий раз, когда выполняется операция поиска.

Мы передаем функцию обратного вызова в setBreakSeekInterceptor. В функцию обратного вызова передается объект, содержащий все разрывы между позицией seekFrom и seekTo.

Теперь давайте настроим перехватчик с правилом для воспроизведения еще не просматриваемого перерыва между позициями seekFrom и seekTo.

Скопируйте следующее в файл js/receiver.js .

breakManager.setBreakSeekInterceptor(function(breakSeekData) {
     /**
     *
     * Below code will play an unwatched break between seekFrom and seekTo position
     * Note: If the position of a break is less than 30 then it will be skipped due to the setBreakClipLoadInterceptor code
     */

    let breakToPlay;
    for (let i = 0; i < breakSeekData.breaks.length; i++) {
        if (!breakSeekData.breaks[i].isWatched) {
            breakToPlay = breakSeekData.breaks[i];
        }
    }
    if (breakToPlay){
        breakSeekData.breaks = [breakToPlay];
        return breakSeekData;
    }
});

Примечание. Если мы ничего не вернем/нуль, то перерыв не воспроизводится. Если мы вернем breakSeekData как есть, то будут воспроизведены все перерывы между seekFrom и seekTo.

Сохраните изменения в файле js/receiver.js и инициируйте сеанс трансляции в веб-отправителе , щелкнув правой кнопкой мыши в любом месте страницы и выбрав «Трансляция». Поток объявлений должен начать воспроизводиться немедленно.

10. Поздравления

Теперь вы знаете, как добавить рекламу в приложение-приемник с помощью последней версии SDK Cast Receiver.

Дополнительные сведения см. в руководстве разработчика Ad Breaks .

Хотите больше актеров?

Взгляните на другие лаборатории кода Cast и наши примеры приложений на GitHub .