Гала-концерт "Обратный отсчет ко Дню холостяков" Alibaba стал доступен всему миру благодаря настраиваемому интерфейсу
Глобальный торговый фестиваль Double 11 от Alibaba приобрел культовый статус в популярной культуре, а его гала-концерт обратного отсчета является важным связующим звеном между миром онлайн и офлайн. В 2017 году сайту потокового видео Alibaba Youku была поручена прямая трансляция сценических мероприятий на гала-концерте для миллионов пользователей, что стало непростой задачей для команд Youku Live, Mobile и Architecture.
Несмотря на то, что Youku Live имеет развитый онлайн-бизнес, этот проект поставил множество новых проблем, которые требовали решения. Помимо прямой трансляции самого гала-мероприятия, было запланировано множество других интерактивных мероприятий, в том числе розыгрыши подарков, викторины, мероприятия с сокровищами и обмен цифровыми красными пакетами.
Чтобы сделать планирование мероприятия еще более сложной задачей, не все необходимые вложения были получены вовремя, и поэтому требования к сайту потоковой передачи оставались чрезвычайно динамичными. Другой важной проблемой на этом этапе были требования к шаблону потоковой передачи событий, вызывающие проблемы с существующей структурой сайта.
Таким образом, было решено, что технология Weex - облегченная структура пользовательского интерфейса, подобная React Native, - будет использоваться для создания совершенно нового интерфейса потоковой передачи Youku. В новом интерфейсе сохранятся все текущие функции и рабочие функции, а также будет добавлена поддержка различных интерактивных мероприятий «День холостяков».
(Узнайте больше о проекте Alibaba Apache Weex: http://weex.apache.org/index.html)
Завершение существующих нативных компонентов
Первоначальная работа над этим совершенно новым интерфейсом включала разделение функциональных модулей и определение того, какие из них будут реализованы с помощью компонентов по умолчанию, включенных в Weex SDK или AliWeex SDK. Кроме того, необходимо было определить, какие собственные модули Java потребуют, чтобы их собственный код был заключен в компонент Weex, который будет использоваться интерфейсными разработчиками Weex.
После первоначальной оценки функциональные модули комнаты для прямых трансляций были разделены следующим образом:
· Рамка комнаты прямых трансляций
Это было построено с использованием внешнего кода Weex.
· Вкладка "Выбор"
Список видео с текстом и изображениями, созданный с использованием внешнего кода Weex.
· Вкладка чата
Это включает в себя большое количество эффектов пузырей чата и сложную операционную логику. Исходный код Java был упакован как компонент Weex.
· Вкладка прямой трансляции контента
Включает графические проекции, текст, видео, ссылки на продукты и другую сложную логику. Исходный код Java был упакован как компонент Weex.
· Компонент видеопроигрывателя
Этот исходный код Java для проигрывателя потокового видео Youku Live Streaming Video Player был упакован как компонент Weex.
· Маркер "Нравится"
Этот компонент генерирует большой объем плавающей анимации при нажатии или при получении уведомлений типа «Нравится» с сервера. Исходный код Java был упакован как компонент Weex.
· Вкладка "Настройка"
Пользовательский модуль WebView был оформлен как компонент Weex. Он включает в себя различные функции:
- Alibaba Baichuan загружает товары Taobao, активируя функцию покупки во время просмотра прямой трансляции.
2. На интерактивной странице HTML5 реализован обмен цифровыми красными пакетами, викторины и т. Д.
3. Проекция планеты Youku страницы HTML5 и многое другое.
· Другие функциональные модули, такие как гиперссылки, совместное использование и отслеживание, также были упакованы в модули Weex для использования разработчиками интерфейса Weex.
После обозначения и разделения функциональных модулей весь интерфейс комнаты потокового вещания становится полностью модульным. Его можно комбинировать, разбирать и настраивать в зависимости от требований.
Независимо от будущих изменений в дизайне комнаты для прямых трансляций, если только что закодированные скины комнат для прямых трансляций объединены с различными индивидуализированными компонентами Weex, желаемый прямой эфир можно собрать или разобрать в зависимости от ограничений проекта.
Интерактивная поддержка мероприятий
Платформа Youku Live была адаптирована для редактирования тем хоста, предоставления стриминговых скинов и поддержки счастливых событий. Конкретный полный ввод будет интегрирован в модель интерактивных событий, которая затем будет отправлена на сервер с помощью PowerMsg, системы подписки на темы, использующей постоянное соединение HTTP. Как только клиент получит аналогичные интерактивные сообщения, они будут напрямую доставляться во внешний код Weex через Weex globalEvent. После того, как код внешнего интерфейса Weex проанализировал слова, он отобразил темы ведущих и открывал сундук с сокровищами и страницу удачного погружения согласно соответствующим инструкциям.
Это отличается от обычного подхода к понижению версии страницы Weex до страницы HTML5. Всякий раз, когда наша логика перехода на более раннюю версию обнаруживает аномальную загрузку или другие исключения, она переводит комнату прямых трансляций Weex на родную. Это представляет собой новую форму логики понижения версии.
Проблемы и решения
Во время разработки комнаты прямых трансляций возникли некоторые проблемы с фреймами панели вкладок и конфликтами жестов настроенных компонентов Weex.
Во время интеграции панелей вкладок Weex и настраиваемых компонентов Weex сбои при переключении вкладок происходили из-за конфликтов жестов между ними. Либо как горизонтальные, так и вертикальные жесты использовались текущей вкладкой, что не позволяло пользователю переключаться между вкладками, либо горизонтальные и вертикальные жесты использовались панелью вкладок, что приводило к сбою вертикального прокрутки на текущей вкладке.
Конфликты смахивания, когда родительский и дочерний представления могли смахивать одновременно, также были проблемой. Решением этой проблемы было создание перехватчика в родительском представлении onInterceptTouchEvent (), как показано ниже:
Окончательно согласованное решение заключалось в том, чтобы написать настраиваемый тег Weex DIV и использовать его для обертывания настраиваемого компонента Weex, который использует жесты вертикального смахивания и передает их настраиваемому компоненту Weex. Горизонтальные жесты смахивания обходят настроенный Weex DIV и отправляются на панель вкладок Weex, решая проблему конфликтов жестов смахивания.
Однако интерфейсный код Weex для прямой трансляции использовал ExpressionBinding для оптимизации производительности считывания, а наш собственный тег DIV вызывал сбои ExpressionBinding. Чтобы решить эту проблему, код распознавания жестов WXComponent был переписан, заменив код распознавания жестов по умолчанию, который изначально поставлялся с WXComponent. Это привело к тому, что ExpressionBinding снова вступил в силу. Порядок выполнения ExpressionBinding показан ниже:
touchstart - ›panstart -› ExpressionBinding panstart - ›ExpressionBinding panmove -› ExpressionBinding panend - ›touchend -› panend
Основная концепция ExpressionBinding заключается в обнаружении событий «panstart» в Java-коде и последующем выполнении логики обработки жестов, передаваемой кодом Weex Javascript, вместо отправки жестов во внешний код Weex и ожидания, пока Javascript обработает жесты.
Наш настраиваемый тег DIV и настраиваемый компонент Weex сделали ExpressionBinding неспособным обнаруживать события panstart. Итак, наш переписанный модуль WXGesture отправляет события WXGestureType.HighLevelGesture.HORIZONTALPAN или WXGestureType.HighLevelGesture.VERTICALPAN в WXComponent в соответствующее время, вручную инициируя выполнение идентификационного кода в ExpressionBinding. После этого ExpressionBinding может взаимодействовать с настраиваемым тегом DIV и настраиваемым компонентом Weex.
Оптимизированный поворот экрана
Первоначально поворот экрана для комнаты прямых трансляций Youku достигался прямым поворотом Android Activity, затем видео умещалось на весь экран по горизонтали, а затем снова вращался Android Activity, чтобы восстановить исходный размер видео и разрешить повторное отображение остальная часть макета.
Однако в новой комнате для прямых трансляций Weex значительно увеличилась сложность поворота экрана. Преобразование между вертикальным и горизонтальным экранами стало чрезвычайно медленным, до такой степени, что каждое преобразование приводило к тому, что экран на некоторое время становился черным, прежде чем отображаться должным образом.
Решение, принятое для этой проблемы, выглядит следующим образом:
· При переключении с вертикального экрана на горизонтальный, удалите представление видео из его родительской ViewGroup, а затем добавьте его непосредственно в décorView текущего окна.
· При переключении с горизонтального экрана на вертикальный, удалите просмотр видео из décorView, затем добавьте его в старую родительскую ViewGroup и, наконец, сбросьте различные параметры макета.
Эти оптимизации значительно расширили возможности поворота экрана, обеспечивая быстрое горизонтальное и вертикальное вращение даже на недорогих устройствах, выпущенных несколько лет назад.
Видео с закругленными углами
Чтобы добиться поистине уникального опыта потоковой передачи в реальном времени, были использованы видео с закругленными углами. Это было реализовано путем наложения изображения Tmall TV поверх настраиваемого тега видео, так что видео отображается только через закругленную рамку.
Эта реализация хорошо работала на устройствах iOS, но не удалась на устройствах Android, где исходные углы видео все еще были видны, а также были проблемы с уровнями видео и изображения.
Эта проблема была решена путем добавления свойства borderRadius в настраиваемый видеокомпонент Weex, установки соответствующего угла закругленных углов телевизионного изображения в дизайне UED, создания настраиваемого тега видео и передачи этого значения в собственный код Java. Затем, после преобразования Weex 750px, закругленные углы были применены к VideoView непосредственно в собственном коде.
В результате снятое видео с закругленными углами идеально соответствовало закругленным углам телевизионного изображения, и оба выглядели так, как будто они были одним изображением.
Улучшена скорость рендеринга и загрузки.
1. Оптимизированное время загрузки
Прямая трансляция Weex по умолчанию имеет вертикальную ориентацию, но также можно использовать горизонтальную ориентацию. Исходная логика Weex инициализировала вертикальную и горизонтальную компоновку экрана одновременно, что отнимало много времени и увеличивало время загрузки.
Чтобы решить эту проблему, комната прямых трансляций Weex была изменена, чтобы инициализировать только компоненты, необходимые для вертикального экрана, и отложить загрузку компонентов, необходимых для горизонтального экрана, создавая и инициализируя требуемую ориентацию только при необходимости.
2. Оптимизированный резервный макет
Оптимизацию для повышения производительности можно выполнить за счет уменьшения уровней макета и удаления всех избыточных представлений. Кроме того, комната прямых трансляций Weex также имела большое количество упрощений уровней / представлений. Сочетание обоих значительно улучшило процесс загрузки.
3. Оптимизированная анимация "Нравится".
Значок «Нравится» в прямом эфире - это настраиваемый компонент Weex. Когда пользователь вручную нажимает «Нравится» или получает сообщение «Нравится» от сервера, в пользовательском интерфейсе анимируются плавающие значки, такие как красные сердечки или другие изображения, доставляемые сервером.
Эта функция обычно работает нормально. Однако, если слишком много одновременных пользователей будут смотреть гала-концерт, анимация «Нравится» будет заметно отставать на устройствах Android.
Чтобы решить эту проблему, был создан переключатель кода, который уменьшал или скрывал движущийся значок «Нравится» на устройствах с низкой производительностью. Вместо этого анимация будет появляться только тогда, когда количество лайков достигнет целевого порога или после более длительного временного интервала, что снизит потребность в рендеринге на устройстве.
Снижение нагрузки на сервер
Следующие меры были предприняты, чтобы помочь снизить нагрузку на сервер и обеспечить более плавную трансляцию в реальном времени.
1. статическая оптимизация ресурсов
Пакет Weex Javascript и другие статические ресурсы были отправлены на устройства пользователей Youku перед праздничным вечером, в результате чего:
· Снижена нагрузка на сервер при поиске ресурсов в праздничный вечер.
· Значительно увеличена скорость рендеринга, поскольку ресурсы ожидающих запросов находятся в локальном хранилище.
· Повышенная вероятность успешной загрузки страницы.
2. Запрос на объединение
Поскольку некоторые запросы API чрезвычайно сложны, коды Weex и Java будут запрашивать эти API, и время выполнения запросов является неопределенным.
Чтобы помочь с этим, был написан специальный модуль Weex запроса API, который может обрабатывать как запросы API, так и работу функции DataPool. Когда запрос отправляется, аналогичный запрос к тому же интерфейсу кэшируется в течение короткого периода времени. В тот момент, когда возвращаются данные первого запроса, уведомляются все кэшированные стороны запроса.
Эта тривиальная оптимизация снизила нагрузку на сервер по количеству запросов в секунду более чем на 100 тысяч единиц.
3. Запросы на ограниченный серверный интерфейс.
В день торжества были запрошены только серверные API с минимальным лимитом. Например, не отправлялись запросы на «подписку на предварительный просмотр в реальном времени».
Итоги гала-концерта обратного отсчета
Прямая трансляция Youku была очень успешной, в результате:
· Более 6,55 миллионов переходов пользователей на Tmall.
· До 2,009 миллионов одновременных онлайн-зрителей.
Чтобы более внимательно следить за производительностью потоковой передачи в прямом эфире, мы добавили код отслеживания пользователей и статистический код в ключевые точки в комнате потокового вещания и в проигрывателе потокового видео Youku Live Streaming Video Player. В следующей таблице показаны результаты.
Прочие достижения
После успеха мероприятия был создан совершенно новый скин для комнаты прямых трансляций Weex в соответствии с оригинальной комнатой для прямых трансляций. Теперь он полностью интегрирован в работу Youku Live, а старая родная потоковая платформа переведена в автономный режим.
Различные методы взаимодействия с пользователем, разработанные для комнаты прямых трансляций Weex во время гала-концерта, теперь стали обычным средством работы Youku Live.
Гала-концерт Tmall Singles ’Day Countdown Gala 2017 стал первым в истории Youku случаем, когда структура Weex была принята в таком широком масштабе. Это также способствовало наибольшему количеству онлайн-просмотров за всю историю прямых трансляций Alibaba.
Благодаря успеху комнаты прямых трансляций Weex в День холостяков, Weex теперь отвечает за все операции потоковой передачи Youku, включая новогоднее мероприятие 2018 года и гала-концерт Весеннего фестиваля 2018 года. Скоро будет выпущено больше интерактивных и забавных функций продукта, а также основные обновления для более плавной потоковой передачи - так что следите за обновлениями.
Alibaba Tech
Подробная и исчерпывающая информация из первых рук о последних технологиях Alibaba → Выполните поиск по «Alibaba Tech» на Facebook
