Deep Zoom и Deep Zoom Composer

Технология Deep Zoom позволяет работать с большими изображениями (плакатами), перемещая их, увеличивая или уменьшая. Например, если имеется информативная страница со множеством элементов. Надписи на них сложно прочитать. Но если приблизить картинку, то надписи становятся легко читаемыми, при этом, не теряя своего качества. Данная технология позволяет создавать насыщенные фотографиями сайты (интернет магазины, сайты социальных сетей, …), создавать большие меню. При этом, трафик расходуется оптимально: "качается" только та часть картинки, которая в данный момент на экране. Естественно, происходит кэширование уже "скачанных" частей.

Данные части можно назвать "пазлами". Картинка автоматически делится на необходимое число пазлов. При разной степени увеличения отображается разное число пазлов, чем выше, тем больше. Первоначально отображается 1 пазл, затем 4, затем 16. Главное, чтобы качество всей картинки оставалось максимальным. Переход из одного состояния в другое осуществляется плавно и незаметно для пользователя (см. рис. 5.1).

Удобным инструментом для создания Silverlight приложения, использующего технологию Deep Zoom, является Deep Zoom Composer 3.0, доступный для скачивания с июля 2009 г. Суть процесса создания приложения такова: сначала подготавливаются картинки и импортируются в проект Deep Zoom. Затем импортированные картинки располагаем на экране будущего приложения в произвольном порядке, согласно фантазии дизайнера. Каждая картинка имеет свой размер на полотне. Если нужно, создаются слайдшоу и веб ссылки. В конечном итоге экспортируем проект Deep Zoom в проект Visual Studio.

Примеры реализации Deep Zoom

http://www.vertigo.com/deepzoom.aspx - пример меню.

http://www.silverlightshow.net/olympics - символы олимпиад, начиная с олимпиады в Афинах 1896 года.

http://memorabilia.hardrock.com - символы хард-рока. Гитары, одежда и т.д. известных исполнителей.

http://livelabs.com/seadragon-ajax - велосипед

http://deepzoompix.com/Default.aspx?pzRedir=true - сайт PhotoZoom

Импорт картинок

Импорт картинок в Deep Zoom Composer осуществляется в окне "Import". Это можно сделать переносом DragDrop из Windows Explorer, либо клавишей "Add image". Затем переходим в окно "Compose" для создания композиции.

Создание композиции

Рабочая поверхность композиции называется "доска для рисования" (artboard). Сюда помещаются импортированные рисунки в нужном масштабе и в нужном месте. Здесь же можно создавать такие элементы управления и навигации, как слайдшоу, меню, внутренние и внешние ссылки.

Навигация при помощи слайдшоу

Слайдшоу - одна из особенностей Deep Zoom Composer, помогающая пользователю последовательно в автоматическом режиме просмотреть одну или несколько картинок, составляющих композицию. Порядок вывода на экран той или иной картинки определяется вкладкой Slideshow. Ее можно открыть, кликнув на вертикальный текст.

Чтобы составить слайдшоу надо воспользоваться функцией DragDrop, перетащив слайд со вкладки "Layers". Порядок показа слайдов регулируется клавишами "вверх", "вниз".

Навигация при помощи меню

Для навигации при помощи меню используется вкладка "Menu" (см. рис. 5.6) . В результате получается меню в верхнем левом углу приложения как показано на рис. 5.5.

Переносим рисунки из Layers в Menu и определяем порядок пунктов меню.

Навигация при помощи ссылок

Для навигации между картинками при помощи ссылок используется вкладка "Internal Links". Выбираем рисунок и задаем для него ссылку, выбрав из предложенных рисунков нужный. В приложении клик мышки по рисунку с заданной внутренней ссылкой ведет к переходу на новый рисунок.

Ссылки URL

Для создания внешних ссылок на страницы в Интернете используется вкладка "External Links". Выбираем нужный рисунок и задаем URL для ссылки. В приложении клик мышки по рисунку с заданной внутренней ссылкой ведет к переходу на страницу в Интернете.

Экспорт проекта

Можно экспортировать проект Deep Zoom в различном виде. Можно разместить на сайте PhotoZoom, используя учетную запись LiveID. Можно экспортировать в директорию с целью использования в других приложениях. Можно экспортировать как приложение Silverlight. Работа такого приложения будет быстрее, чем, если экспортировать в Seadragon Ajax (см. страницу Seadragon Ajax (http://livelabs.com/seadragon-ajax) на сайте Microsoft Live Labs). Во время экспорта будет создана папка image, HTML страница и другие файлы для загрузки, навигации и зумирования.

Экспортировать рисунки в Silverlight можно как коллекцию рис. 5.9 2) (несколько рисунков), так и композицию рис. 5.9 1) (один рисунок).

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

После экспорта можно просмотреть готовую папку или посмотреть в браузере готовое приложение.

Smooth Streaming и Expression Encoder

Smooth Streaming - система динамического изменения качества видео изображения в зависимости от состояния интернет канала и загрузки процессора. Smooth Streaming- это расширения Microsoft IIS Server 7.0 (IIS Media Services 2.0). Служба доступна для бесплатного скачивания с сайта Microsoft.

В настоящее время используются три способа передачи видео от сервера пользователю (см рис. 5.11). Традиционный поток (Traditional Streaming) работает следующим образом: клиент указывает серверу, какой отрезок нужно проигрывать сейчас, командует перемоткой, паузой и т.д. Очевидны преимущества данной техники: проигрывается только тот участок записи, который необходим клиенту. С помощью традиционного потока удобно реализовать рекламные проекты. Например, до тех пор, пока не будет просмотрен рекламный ролик, невозможно начать просмотр видео. Минусы таковы, что отсутствует кэширование на клиентской стороне и используется не HTTP протокол. Это усложняет серверное оборудование.

RTSP (Real-Time Streaming Protocol) - хороший пример традиционного потока. RTSP - протокол с сохранением состояния, т.е. с момента подключения к видео серверу и до момента отключения клиента сервер хранит данные о пользовательской сессии. После установления сессии сервер посылает клиенту небольшие пакеты размером 1452 байта. В такой пакет вмещается 11 миллисекунд видео, кодируемого со скоростью 1 Мб/сек. В случае, если пакет не доставлен, он пересылается до тех пор, пока не будет доставлен клиенту. Если файрвол блокирует пакеты, то передача прервется.

Прогрессивная загрузка (Progressive Download) работает проще: на сервере хранится простой файл и, чтобы его просмотреть, клиент скачивает его полностью. Т.е. прогрессивная загрузка - это обычное скачивание файла с веб сервера. Минус очевиден: зачастую пользователь просматривает первые минуты видео, ему не нравится, он уходит со страницы. Но файл качается полностью. Другими минусами можно считать отсутствие управления потоком, отсутствие реакции на состояние канала связи, загрузку процессора. Плюсы в данной технике: простое серверное оборудование и ПО, протокол HTTP, возможность кэширования на клиенте без установки дополнительного ПО.

Прогрессивная загрузка поддерживается большинством плееров и платформ, включая Adobe Flash и Windows Media Player. Такие популярные видео ресурсы, как YouTube, MySpace и другие используют исключительно прогрессивную загрузку.

В отличие от потоковых видео серверов, которые редко посылают более 10 секунд видео клиенту за раз, веб сервера передают данные до тех пор, пока загрузка не будет завершена. Вы можете нажать паузу в самом начале загрузки и подождать, пока весь файл не скачается в локальный кэш. Тогда можно смотреть плавное видео без рывков и остановок.

Принцип работы кратко показан на рис. 5.12

На рисунке показано, как сервер посылает куски видео более низкого разрешения клиенту с плохим каналом Интернета и более высокого качества клиенту с хорошим каналом. Параллельно происходит кэширование, если установлен кэширующий сервер. Сложность состоит в том, что сервер хранит несколько видеофайлов с различным разрешением. Например, скорость потока видео в одном случае не превышает 300 кбит/сек, в другом составляет в среднем 2.5 Мбит/сек. Могут быть несколько промежуточных значений, например, 600 кбит/сек и 1.2 Мбит/сек. Качество транслируемого видео в Smooth Streaming версии 2.0 может достигать качества HD видео 1280x720p (High Definition - высокая четкость). Скорость потока в динамичных сценах может достигать значения 10 Мбит/сек. На рис. 5.13 показано как меняется скорость потока и число кадров в секунду (качество видео) в зависимости от состояния канала и загрузки процессора.

При адаптивном вещании видео источник разделен на множество мелких "кусочков" (" chunks ") по 2-4 секунды длиной. С точки зрения видеокодека, например mpeg-2, этот кусочек является набором кадров, начинающийся с ключевого кадра. Последующие кадры определяются по алгоритму, заданному кодеком, но на основе ключевого кадра. Начало кусочка с ключевого кадра дает возможность декодировать его вне зависимости от остальных кусочков.

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

При изготовлении такого адаптивного видео источник кодируется со множеством битрейтов и создается множество кусочков длиной несколько секунд. Клиент может выбирать между кусочками разного размера. Т.к. веб сервер обычно доставляет кусочек с той скоростью, которая определяется каналом интернета, клиент легко может рассчитать кусочек какой длины ему следует загружать в следующий момент времени. Размер буфера можно задать.

Обобщая вышесказанное можно сказать следующее. Для пользователя плюсом использования Smooth Streaming является:

Для серверов плюсом использования Smooth Streaming является:

Роль HTTP протокола

Есть несколько причин использования HTTP протокола в качестве транспорта для Smooth Streaming:

Кроме того, сейчас Интернет построен в основном на HTTP и оптимизирован под HTTP.

Примеры реализации Smooth Streaming

http://www.smoothhd.com/ - образцы видео

http://www.iis.net/media/experiencesmoothstreaming - можно увидеть качество потока, транслируемое сервером

http://hdbeta.ctv.ca/ - образцы видео

Smooth Streaming и Silverlight

Silverlight поддерживает воспроизведение видео Smooth Streaming, включая обработку MPEG-4, загрузку по протоколу HTTP, переключение между кусочками с различным битрейтом и управление в .NET коде. Это дает возможность разработчикам расширять возможности текущей версии Silverlight, не дожидаясь нового релиза.

Самая интересная часть Silverlight клиента Smooth Streaming - эвристический модуль, который определяет когда и как переключить битрейт. Функциональность Smooth Streaming требует от Silverlight клиента без промедления адаптироваться к изменяющимся условиям, а именно решить:

Для того чтобы минимизировать необходимость программирования для разработчика существуют:

Архитектура Smooth Streaming

Smooth Streaming это первый формат медиа файлов Microsoft кроме ASF. Он базируется на спецификации ISO/IEC 14496-12, больше известной, как MP4. Используется MP4, а не ASF, т.к.:

В Smooth Streaming полноразмерное видео записывается на диск как один файл (один файл с видео одного битрейта), но пересылается в виде небольших кусочков.

Типичный набор файлов Smooth Streaming состоит из:

Манифест - это XML файл. Серверный манифест основан на специализированном формате SMIL 2.0 XML.

Воспроизведение Smooth Streaming

Общий адаптивный подход к трансляции видео основывается на разделении длительного видео на небольшие кусочки. Чтобы скачать кусочки с веб сервера, необходимо последовательно скачать файлы 00001.vid, 00002.vid, 00003.vid и т.д. Smooth Streaming использует более сложную схему. Видео не разделено на множество файлов-кусочков, а виртуально разделено на фрагменты, которые расположены в одном MP4 файле. Обычно 1 фрагмент на 1 GOPGOP (Group of pictures) - группа кадров между ключевыми кадрами внутри кодируемого видеопотока. Это некая группа изображений, которая занимает определённый иерархический уровень (место) в потоке MPEG данных и содержит последовательность кадров. Такая последовательность может включать несколько кадров и должна обязательно начинаться с I-кадра. Остальные кадры вычисляются из предыдущих и ключевого . Это подразумевает определенные изменения в дизайне сервера и клиента:

Сначала плеер запрашивает сервер Smooth Streaming файл-манифест *.ismc. Там указано какой кодек используется, битрейт и разрешение, список имеющихся кусочков, их время начала и продолжительность. Вот примерная форма запроса фрагмента:

http://video.foo.com/NBA.ism/QualityLevels(400000)/Fragments(video=610275114)

Здесь 400000 - битрейт, 610275114 - начало фрагмента ( 1 = 100 наносекунд ). Эти значения берутся из манифеста клиента.

После запроса IIS сервер со Smooth Streaming ищет соответствующий файл *.ismv или *.isma на диске, как указано в манифесте сервера *.ism. Затем внутри файла сервер находит начало фрагмента и отсылает его клиенту, как отдельный автономный файл. Это принципиальное решение, т.к. такой файл легко кэшируется на клиенте и хранится на его диске или на кэширующем сервере.

Теперь о смене битрейта. Сервер в процессе переключения не играет ровно никакой роли. Клиентская часть анализирует время загрузки фрагмента, заполненность буфера, скорость обработки (рендеринга) кадров и решает запросить больший или меньший битрейт с сервера. Приложение Expression Encoder гарантирует правильность расположения кадров, индексацию, длину группы кадров и т.д. для обеспечения плавного воспроизведения видео при смене битрейта.