CC BY
85
Сервис для online-трансляции презентаций. Front-end разработка
Кудрявцева С., Плетнев М.
Московский институт электроники и математики НИУВШЭ s. kudryavtseva@hotmail. com, mihail160611@gmail. com
Аннотация. В статье описывается ход разработки сервиса для трансляции и просмотра презентаций в режиме реального времени под рабочим названием "Slideshot". Данное приложение делает возможным дублирование и сохранение визуального сопровождения, которое является неотъемлемой частью практически каждого устного доклада. Исключая распространенные факторы, способствующие плохому усвоению визуальной информации, "Slideshot" дает возможность пользователям просматривать с экрана своего мобильного устройства все, что происходит на компьютере лектора. Это возможно как в ои/ше-режиме, так и в записи их архива презентаций. Приложение предназначено для поддержки конференций или иных мероприятий, сопровождаемых презентацией. Оно будет полезно для институтов и университетов, а также для различных выставочных площадок, проводящих семинары и конференции.
Ключевые слова: трансляция, презентация, конференция.
1 Вступление
Цель данного сервиса - помочь людям в организации конференций и иных устных выступлений. Эта цель включает первостепенные задачи: улучшить условия проведения самой конференции/выступления, а также дополнить видеотрансляцию или видеозапись выступления качественной записью визуального сопровождения.
Можно привести множество причин и ситуаций, по которым человек не получит информацию, отображенную на слайде презентации или фотографии даже находясь в зале, где идет выступление. Среди них такие как неудобное расположение экрана, плохое зрение человека или низкое качество видеопередачи при просмотре через Интернет, некачественная работа режиссера, производящего съемку. В подобных ситуациях и будет полезен сервис Slideshot. Он подразумевает веб-сайт и клиентское приложение для рабочего стола. Актуальность проекта заключается в том, что любой человек, у которого есть доступ, может следить за ходом доклада/лекции на экране своего компьютера или любого другого устройства, просматривать уже показанные слайды, ставить презентацию на паузу. Слайды подгружаются на сайт сразу после перелистывания их на экране лектора, что и является основой трансляции в режиме реального времени.
вперед в режиме реального времени
Рис. 1. Схема работы сервиса
Если человек смотрит видеотрансляцию мероприятия, то трансляция презентации просто накладывается, и пользователь в одном окне видит две картинки. Если человек смотрит запись мероприятия, то происходит синхронизация видеозаписи и записи презентации по йше81атр в каждом слайде или изображении.
^ □□ □□
-(-1-м-
И !2 13 14
запись/трансляция разрешение??????
Уои
ЁШ
1
2
Рис. 2. Синхронизация
2 Литературный обзор
В ходе разработки были исследованы аналоги данного проекта. По результатам этого исследования, все аналоги можно разделить на две оснвных категории: [ЫуеВташезв, 2013].
Таблица 1. Аналоги
Загрузка материалов презентации на сайт или их создание там заранее Сервис Особенности Синхронизация с видео
Prezi Создание или загрузка презентации заранее. Offline-приложение платное. Нет
Google Presentstions Позволяет создавать презентацию в собственном формате Google и скачивать в других форматах (PDF и РРТх). Нет
SlideShare Позволяет загружать файлы только форматов РРТ или PDF и ограничивать доступ пользователям, а также пользоваться встроенным online-редактором Да
ОпНпе-трансляция экрана рассказчика Сервис Особенности Сохранение презентации отдельно в архив
Google Hangouts Видеоконференции с возможностью трансляции экрана Нет
Join.me Имеет аналогичные возможности, при этом добавляется возможность не только смотреть трансляцию экрана, но и управлять происходящем там Нет
3 Контекст работы
Как уже было сказано выше, аналоги у данного проекта есть. Однако, есть несколько весомых причин, по которым представленный сервис может считаться более удобным в использовании:
1. Текущее изображение экрана в виде слайда записывается и загружается на сайт моментально сразу после его демонстрации, а это значит, что нет необходимости загружать материалы для презентации заранее.
2. Запись презентации идет не в формате видео (MPEG), а дискретно (JPEG + timestamp). Это значит, что навигация по слайдам и иным изображениям презентации становится более удобной. Про подробности и алгоритм реализации этой части проекта можно прочесть в статье [Плетнев, 2015].
3. Запись презентации может быть синхронизирована с видеозаписью самого выступления и настроена на автоматическое перелистывание, как это было бы в ои/ше-трансляции.
4 Разработка
Готовые web-cam и ПО должны быть простыми и удобными в использовании, так как они рассчитаны на широкую аудиторию пользователей, не только тех, кто разбирается в компьютерных технологиях. Исходя из этого, перед началом работы над сайтом был поставлен ряд целей, которым окончательная версия продукта должна будет соответствовать:
1. Web-сайт должен оперативно подгружать контент с минимальным расходом трафика.
2. Скачивание и запуск приложения должны осуществляться быстро и не требовать большого количества действий от пользователя.
3. Сайт должен иметь версию для мобильных устройств и быть удобным для пользователя.
Вся веб-часть проекта "Slideshow" написана на языке Python 2.7 под Django Framework. [Слесарев, 2009]
Чтобы первая поставленная задача была реализована, информация с экрана передается в формате растровых изображений (скриншотов), а не в формате видео. Такая передача информации позволяет уменьшить нагрузку на канал минимум на 50% при условии, что будет передаваться видеопоток, с принципиальным изменением картинки в два раза меньшим, чем частота изменения кадров на видео.
Измерение было проведено на FullHD-видео, и при затратах в 15-30мб на 30 секунд видео, было протестировано 5-10 слайдов весом до 1мб.
1) Презентация с нечастыми изменениями: Разрешение -1920*1080,
Скорость потока - 3492 кбит/с, Частота кадров - 10 кадров/с, Видео - 15 мбайт за 35 секунд, Слайды - 7 слайдов по 0,5 мбайт.
2) Презентация с частыми изменениями на экране: Разрешение -1920*1080,
Скорость потока - 1394 кбит/с, Частота кадров - 25 кадров/с, Видео - 23,8 мбайт за 2минуты 22 секунды, Слайды -13 слайдов по 1 мбайт.
Основное преимущество данного сервиса - это максимальная автоматизация большинства процессов. Пользователю не приходится совершать лишних действий, чтобы начать пользоваться программой и сайтом. Для реализации этого, в частности, программа представлена в
portable-версии. Это значит, что пользователю необходимо лишь скачать приложение с сайта и запустить его. Установки такая программа не требует. Ссылка доступна только зарегестрированным пользователям и расположена на главной странице.
Также для удобства пользования сервисом были применены некоторые зарекомендовавшие себя инструменты. В данном случае речь пойдет об инструментах, помогающих реализовать авторизацию и регистрацию. На сайте slideshot.viditory.com используется авторизация по социальным сетям, так как это уменьшает время, затраченное пользователем на прохождение аутентификации, и не требует от него запоминания еще одну пары логин-пароль. Для реализации такой возможности был выбран плагин Loginza [Финомов, 2011]. Он предоставляет только необходимые возможности и легок в интеграции и использовании.
Несмотря на это, традиционная регистрация не была исключена. Так как некоторые пользователи предпочитают создавать отдельные аккаунты на сайтах, здесь они тоже имеют такую возможность. Этот вид аутентификации не является основным, поэтому для его реализации были использованы минимально необходимые шаблоны и стандартный пакет для Django - django-allauth.
Верстать интерфейс при разработке сайта с нуля нет необходимости. Для реализации этой задачи существует большое количество CMS (Content Managnent System) и фреймворков. Для реализации интерфейса на сайте slideshot.viditory.com используются такие средства, как Django-CMS [Казанов, 2012] и Twitter Bootstrap 3 [Vermilion, 2012]. Так как проект пишется с использованием Django Framework, главным критерием при выборе CMS была ее совместимость с данным фрэймворком. Django-CMS полностью удовлетворяет этому критерию, а также обладает наибольшим функционалом и простой в использовании. Что касается Twitter Bootstrap 3, это CSS фреймворк, позволяющий верстать с меньшими усилиями.
CSS и CSS-фреймворки подходят для разработки weè-интерфейса, ориентированного на мобильные устройства и планшеты. Сервис Slideshot предполагает активное использование мобильных устройств, так как они компактные и могут дольше работать без подзарядки а, следовательно, более удобные для просмотра слайдов, чем ноутбуки, если зритель присутствует в зале во время выступления. CSS способны трансформировать внешний вид web-страницы под особенности экранов смартфонов или планшетов, даже если изначально страница писалась под стандартный экран ПК.
5 Развитие проекта
Помимо описанных выше задач, в проекте имеются элементы, оставленные на следующий этап разработки:
1. Возможность синхронизации презентации и видеотрансляции выступления. В случае с синхронизацией готовых видеофайла и записи презентации приложение будет реализовано таким образом, чтобы можно было указать время начала презентации и моменты смены изображений. После того, как будут сделаны необходимые отметки и на видеофайле, и на файле со слайдами, пользователь сможет просматривать полноценную запись выступления.
2. Привязка трансляций к пользователям и каналам. В качестве аналога этой схемы можно рассмотреть Youtube. Пользователь будет иметь право создать свою трансляцию, редактировать свою презентацию из архива, ограничивать доступ других пользователей, а также создавать свои каналы, объединяющие различные трансляции.
3. Создание мобильного приложения под Android и iOS, позволяющего пользоваться сервисом Slideshot со смартфона или планшета в удобном формате.
4. Возможность загрузки PPTx/PDF файлов, разделения содержимого файлов на слайды и синхронизации с записью на YouTube в своем плеере.
6 Заключение
На данный момент разработан web-сайт, с которого можно просматривать трансляции и записи презентаций, также он соответствует всем поставленным выше требованиям. Кроме того, получена тестовая версия программы с рабочими функциями захвата экрана, анализа изображений и их передача на сервер.
7 Список литературы
[LiveBusiness, 2013] "Топ 10: Онлайн презентации" // LiveBusiness, 2012, URL: www.livebusiness.ru/tools/presentations.
[Плетнев, 2015] Плетнев М.А. "Сервис для оя/ше-трансляции презентаций. Приложение сохранения и передачи" // Научно-техническая конференция студентов, аспирантов и молодых специалистов НИУ ВШЭ им. Е.В. Армейского. Материалы конференции, 2015.
[Слесарев, 2009] Слесарев А. "Причины выбора Django для разработки сайтов" // Хабрахабр, 2009, URL: http://habrahabr.ru/post/75131/.
[Финомов, 2011] Финомов А. "Упрощение жизни разработчика с помощью сторонних сервисов" // Хабрахабр, 2011, URL: http://habrahabr.ru/post/131517/.
[Казанов, 2012] Казанов В. "DjangoCMS2.0 — быстрее, больше, эффективней" // Хабрахабр, 2012, URL: http://habrahabr.ru/post/78362/.
[Vermilion, 2012] Comparing Responsive CSS Frameworks - Bootstrap, Foundation, and Skeleton II Vermilion, 2012.URL: http://vermilion.com/news/articles/2012/lQ/22/comparing-responsive-css-frameworks-bootstrap-foundation-and-skeleton.
