Study & DevО программировании и не только

Мультимедиа-программирование вместе с Red 5 server. Часть 2

Эта статья продолжит начатый в прошлый раз рассказ о методиках создания веб-приложений, активно использующих технологии доставки и публикации потокового мультимедиа. Прошлая статья была “насквозь” теоретической: я рассказывал о том, что такое битрейт, медиаконтейнеры, кодеки, перечислил с десяток как платных, так и бесплатных медиа-серверов, умеющих доставлять медиа-поток к flash-клиенту. Сегодня я перейду к практике и познакомлю вас с red5, бесплатным, свободным, популярным и зарекомендовавшим себя медиа-сервером. Но сначала давайте еще раз уточним цель статьи.

Очевидно, что если единственная стоящая перед вами задача – создать на своем сайте галерею видео-роликов, то red5 вам не нужен. Достаточно закачать через ftp на сайт “пачку” роликов в формате flv. Затем, воспользовавшись google, вы находите под свой “цвет и вкус” какой-нибудь бесплатный flash video player. Все эти видео-проигрыватели устроены однотипно: вставляете внутрь html-страницы код, подключающий flash video player, затем указываете как параметр для него путь к предварительно загруженному на сервер flv-файлу и вуаля: при открытии вашей html-странички посетители увидят видео-ролик. Более того, разместить на сайте видео-ролик можно еще проще. Для этого загрузите видео на какой-либо из сайтов видео-хостинга (yourtube.com). Там же вы получите специальный html-код, разместив который себя внутри html-странички, вы достигните такого же результата, как я описал выше. Но затратите на все это не более десяти минут. Итак, я ставлю перед нами цель создания комплексного приложения, в котором задача публикации видео-потока является не самоцелью, а лишь частью более сложного бизнес процесса. К примеру, вы можете организовать мультимедиа-сайт “я учусь закручивать гайки”, цель которого – зарабатывать деньги на консультациях по методикам правильного закручивания гаек. К примеру, клиент для ознакомления просматривает ролики, где квалифицированные тренеры показывают то, как правильно крутить гайки. Без покупки учетной записи такие ролики будут ограничены, например, первыми тремя минутам, а после оплаты, ограничения на просмотр будут сняты. Еще можно добавить функцию, когда вы будете загружать на сайт ролики, с записанными попытками освоить вами искусство закручивания гаек. Консультанты же будут просматривать ваш видео-дневник и давать рекомендации. Еще можно организовать онлайн-конференции с мастер-классами, где в режиме реального времени приглашенные специалисты будут показывать всем, кто купил подписку, уж совсем секретные методики как правильно закрутить гайки.

Создание приложения подобного описанному выше требует навыков программирования не только на стороне клиента (actionscript), но и на стороне сервера. Нюанс в том, что серверную часть можно условно разделить на две части. Во-первых, есть нечто публикующее или загружающее на сервер медиа-поток и есть нечто содержащее бизнес-логику. Для приведенного выше примера бизнес-логика - это авторизация, затем проверка входит ли в “пакет купленных услуг” та или иная функция приложения. Разумеется, что эти две части теоретически можно сделать раздельно и с помощью разных технологий. Например, все связанное с мультимедиа – это вотчина red5, а бизнес-логику приложения можно сделать на другом языке (да хоть на php) и организовать общение этой серверной части с flash интерфейсом посредством xml-сообщений. Сделать так можно, вот только сложно и не нужно. Дело в том, что read5 содержит не только средства для работы с загрузкой и публикацией медиа-потоков. Еще red5 содержит средства для организации вызовов размещенной на сервере бизнес-логики из flash (с кодированием передаваемой информации посредством протокола amf). Т.к. red5 – это медиа-сервер написанный на java, то и список языков, на которых можно писать бизнес-логику, очень широк и включает в себя все языки, способные исполняться на платформе jvm. Важно: я не говорю, что писать серверный код можно только на java. Java сейчас всего лишь один из многих языков, которые могут исполняться на виртуальной java-машине. Для тех, кто предпочитает писать код на python, в мире java есть аналог – язык jython. Для любителей ruby найдется jruby. И даже если вы ничего не знаете кроме actionscript, то тоже ничего страшного: в мире java есть реализация ECMA Script (стандарта на базе которого реализованы и javascript и actionscript). Сегодняшняя статья начнется с того, что мы попробуем организовать общение между flash и red5-сервером. но для этого сначала выполним подготовительные шаги.

Во-первых, нужно скачать с сайта http://red5.googlecode.com дистрибутив с read5. Последняя на текущий момент стабильная версия red5 – это 0.8, также в разработке находится версия 0.9. По правде говоря, больших отличий между этими версиями нет, по крайней мере, для первых статей, так что я выбрал для работы red 0.8 как более привычной для меня. Есть два возможных варианта того, в какой форме вы можете загрузить к себе на компьютер red5. Дело в том, что red5 по своей сути всего лишь стандартное для java веб-приложение, которое можно развернуть на любом java веб-сервере (tomcat, jetty), равно как и на “серьезном” java сервере приложений (jboss, oracle weblogic). Все java веб-приложения поставляются в форме war-архивов, внутри которых находятся нужные для работы библиотеки, конфигурационные файлы, статические ресурсы, такие как html, css, javascript-файлы и, естественно, код самого приложения. Итак, во-первых, вы можете загрузить на сайте http://red5.googlecode.com war-файл (есть версии для java5 и java6). Затем war-архив вы можете установить на существующем уже у вас java веб-сервере. Это идеальный вариант, когда у вас уже есть существующая java-инфраструктура (сервер и развернутые на нем приложения) и вы хотите добавить к списку этих приложений еще и red5. Второй вариант, предлагает скачать полноценный дистрибутив “все в одном”. Т.е. вы загружаете инсталлятор, который установит у вас на компьютере и веб-сервер tomcat, и “развернет” на нем red5. Более того, tomcat сервер будет зарегистрирован как служба windows, и будет автоматически запускаться при старте windows. Такой вариант наиболее предпочтителен для быстрого знакомства. Третий вариант – для опытных java разработчиков – загрузить исходный код проекта red5 (адрес svn-репозитория http://red5.googlecode.com/svn/java/server/trunk) и скомпилировать самому сервер. Итак, предположим, что вы загрузили инсталлятор red5 и выполнили его. В результате у вас на компьютере появится автоматически запускаемый в ходе загрузки windows сервис red5. Давайте проверим его работоспособность. Для этого откроем браузер и введем адрес http://localhost:5080. Тут вы увидите страницу приветствия, на которой размещены ссылки на примеры, идущие в поставке с red5. Также вы увидите ссылку на страницу инсталлятора серверной части этих примеров. На той же странице приветствия расположен видео-ролик (скажу честно, ролик крайне низкого качества). Этот ролик иллюстрирует процедуру установки на red5 сервер архивов с примерами веб-приложений с последующей демонстрацией их работы. Эти примеры, равно как и видео, размещенное на первой странице приветствия, red5 загружает из internet.

Итак, мы заходим на страницу инсталляции примеров и видим там табличку (см. рис. 1)



доступных для установки примеров. Выбираем их последовательно и нажимаем кнопку “install”. Затем после некоторого ожидания вы можете зайти на страницу “demos” и попробовать запустить какой-нибудь из примеров. Самым простым является “echo_test.html” – это страница, на которой показывается методика обмена данными (простые строки текста, числа) между flash-роликом и серверным скриптом. Пример “Publisher” более сложен и демонстрирует методику просмотра и захвата видео с веб-камеры. Пример “Simple Recorder” демонстрирует методику захвата видео с веб-камеры с последующей передачей видеопотока на сервер и сохранением его как flv-файла в предопределенной папке “$RED5_HOME/webapps/oflaDemo/streams”. Наигравшись с примерами, самое время перейти к “немного попрограммировать” и создать собственное мультимедиа-приложение.

Давайте начнем разработку с несложного приложения, задачей которого будет передать на red5 сервер строку с именем пользователя, а в ответ получить строку приветствия, например, “Добрый день, %имя%”. Пример с одной стороны простой, а с другой сложный и комплексный т.к. предполагает знакомство с основами разработки веб-приложений для java, также обязательны знания actionscript. И все эти технологии должны будут работать в тесной связке. Еще мне хотелось бы сделать этот пример “красиво”: т.е. с максимальным использованием общепринятых методик качественной разработки программного обеспечения. Т.е. е я хочу сделать управление проектом, его ресурсами, зависимостями от библиотек с помощью maven. Еще мне хотелось бы наладить удобную отладку, как серверной части приложения, так и flash-роликов с интерфейсом пользователя и еще многое другое. Начнем с того, что создадим стандартную структуру и набор конфигурационных файлов для maven-проекта примера. Чтобы обновить свои знания о том, что такое maven и как он помогает в организации процесса управления разработкой ПО прошу обратиться к моей же серии статей “Наводим_порядок_в_разработке_ПО_вместе_с_maven”. Наш maven проект будет состоять из двух модулей: веб-модуль (warmodule) и flash-модуль (flashmodule). Первый модуль, соответственно, логика работы приложения, точнее, его серверной части. А второй модуль будет содержать интерфейс пользователя на flash. Итак, я создаю каталог с именем “multi”, внутри его создаю еще два каталога “warmodule” и “flashmodule”. В каждый из этих каталогов помещается по файлу pom.xml, которые будут описывать структуру maven-проекта, еще нужные для работы модуля библиотеки-зависимости и т.д. Теперь нужно наполнить модули конкретным содержимым. Для этого внутрь каталога “flashmodule” я поместил иерархию подкаталогов “src/main/flex” и затем файл “Main.mxml”. Что касается веб-модуля, то внутри каталога “warmodule” я поместил цепочку подкаталогов “src/main/java”, затем еще две цепочки подкаталогов “src/main/resources” и “src/main/webapp”. То, что у вас должно получиться показано на рис. 2.



Теперь я буду приводить исходный код каждого из файлов проекта с подробными комментариями. Начнем с pom.xml файла, расположенного сразу в корне каталога multi, т.е. корневого файла проекта:
В самом начале pom.xml файла я с помощью тегов groupId, artifactId и version задаю maven “координаты” проекта. Напомню, что и сам проект и все составляющие его части-модули должны иметь четыре “координаты-измерения”. В моем случае, группа, к которой относится проект, называется “test01”, сам проект называется “red5demo”. Версия проекта будет скромной “1.0” и тип проекта “pom”. Pom означает, что результатом сборки проекта является не веб-приложение или библиотека, а комбинация составных его частей. Далее, внутри тега “modules” я перечисляю список модулей, составляющих проект. Имена этих модулей должны быть такими же, как и названия подкаталогов, созданных на предыдущем этапе. Последним идет перечисление репозиториев из которых будут загружаться нужные для проекта артефакты-библиотеки. Первый репозиторий это официальный maven репозиторий http://repo1.maven.org/maven2/, внутри которого находятся почти все известные и не очень java-библиотеки. Второй репозиторий http://repository.sonatype.org/content/groups/flexgroup поддерживается компанией sonatype и содержит исходный код maven-плагинов для работы с flex. Т.к. модуль flashmodule должен содержать actionscript и mxml код, создающий пользовательский интерфейс приложения, то возникает вопрос о том, как мы будем компилировать этот модуль. За счет своей гибкой плагинной архитектуры maven позволяет привязать к фазе компиляции проекта вызов какого угодно плагина. Для тех, кто знаком с flash на чуть большем уровне чем “flash – это баннеры”, не является секретом, что flash ide – это вовсе не единственная среда, в которой можно писать actionscript код и компилировать его в swf-ролик. Более того, “центр тяжести” flash ide крайне неравномерно смещен в сторону создания анимации, работы с эффектами, шкалой времени, звуком. И это все составляет сложности в том случае, если в создаваемом вами приложении “программирования больше чем рисования”. Писать код в flash ide – занятие не для слабонервных: больше времени уходит на борьбу со средой разработки, чем на, собственно, написание кода. Мне тут вспомнилось, как пару лет назад меня попросили провести серию занятий по flash в учебной группе (правда группа была не совсем новичками в мире программирования и имела опыт работы с толи с java, толи c++). И как только дело дошло до примеров с относительно большим объемом программирования, то группа “взвыла”: подсказки при наборе кода в flash ide на уровне каменного века, подсветка синтаксиса на уровне бронзового, рефакторинга нет; отладчик, продолжая исторические аналогии, только-только перешел в эпоху развитого феодализма. Одним словом, возможности flash ide сравнительно с возможностями таких сред разработок, как visual studio, eclipse, netbeans или intellij idea - примитивны. Так что не было удивительным появление альтернативных и более приятных в работе сред написания actionscript кода, таких как eclipse, intellij idea, flashdevelop. Конечно, вы можете сказать, что основная аудитория flash ide – это как раз дизайнеры и аниматоры и я уж слишком придираюсь. Но раз уж я поставил целью разработку комплексного приложения, активно использующего java технологии, то почему бы не отказаться от flash ide и перейти на что-нибудь иное. Суммируя, хотя разработку flash части приложения можно вести отдельно от разработки серверной части и вести ее в среде flash ide, но я этого хочу избежать. В качестве альтернативы я предлагаю, писать код, как java так и actionscript, в среде intellij idea, там же выполнять отладку кода. Компиляцию же проекта переложить на maven, в рамках которого будет выполняться и сборка web-модуля приложения, и одновременно компиляция flash его части. Итак, компания sonatype разработала ряд maven плагинов, позволяющих выполнять компиляцию actionscript кода и эти плагины я подключу и настрою внутри файла pom.xml для модуля flashmodule. Так вот для того, чтобы maven мог в последующем найти эти плагины, мне нужно указать путь к веб-сайту с репозиторием, где они и расположены (http://repository.sonatype.org/content/groups/flexgroup/). Что касается третьего репозитория http://jakubiak-red5.googlecode.com/svn/repo, то он потребуется для веб-модуля. Т.к. при написании кода серверной части нашего медиа-приложения, мне потребуется обращаться к различным red5-специфическим классам и библиотекам. К сожалению, разработчики red5 не озаботились тем, чтобы сделать библиотеку red5 доступной для подключения в управляемых maven-проектах. Зато нашелся некто Antoni Jakubiak, который проявил инициативу и разделил исходные коды red5 на отдельные maven модули. Затем создал для каждого из модулей pom-файлы и разместил все это на сайте http://jakubiak-red5.googlecode.com. К сожалению, труды какого-то Antoni Jakubiak не настолько важны, чтобы помещать их в официальные репозитории (тот же http://repo1.maven.org/maven2/). Так что мне пришлось добавить в список используемых в проекте maven-репозиториев ссылку на сайт http://jakubiak-red5.googlecode.com/svn/repo/, где и расположены red5 артефакты.

В следующий раз я продолжу рассказ о создании комплексного java + actionscript + red5 мультимедиа приложения. Из подготовительных шагов мне осталось только рассказать об pom.xml файлах для модулей “warmodule” и “flashmodule” и затем, после формирования каркаса, можем начать наполнять его конкретным содержимым: организовать передачу как простой текстовой информации, так и мультимедиа потоков данных между flash и red5-сервером. Но все это в следующий раз.

« Мультимедиа-программирование вместе с Red 5 server. Часть 1

Мультимедиа-программирование вместе с Red 5 server. Часть 3 »