Ambilight эффект во Flash видео плеере

Posted on by

This post is also available in: Английский

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

Для реализации такого дизайнерского трюка потребуется совсем немного ActionScript 3 и чуть-чуть конфигурирования Flash Media Server. Для этого мы создадим простой видео плеер и на примере посмотрим, как это реализуется. Прежде всего эффект Ambilight будем создавать при помощи Blur эффекта на заднем фоне (под видео экраном). Наложение Blur эффекта, да и эффектов вообще, на видео поток возможно лишь при наличии такого разрешения у источника потока, т.е. у Flash Media Server.
Flash Media Server
Сперва разрешим клиентским приложениям (Flash видео плеер) доступ к графической информации видео кадров. За это отвечает параметр VideoSampleAccess. Его нужно прописать в файле Application.xml (скорее всего там уже есть заготовка).

1
2
3
4
5
<Client>
<Access>
<VideoSampleAccess enabled="true">/</VideoSampleAccess>
</Access>
</Client>

Значение параметра «/» дает доступ к видео кадрам всех приложений этого сервера.
Flash Player
Напишем простой видео плеер при помощи OSMF среды. Делается это легко и быстро. В результате должно получиться что-то похожее на:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Import Ambilight class
import com.video.effects.Ambilight;
// Create video stream connection
var resource:StreamingURLResource = new StreamingURLResource("rtmp://FMS_ip/vod/content.f4v");
var loader:NetLoader = new NetLoader();
var videoElement = new VideoElement(resource, loader);
var mediaPlayer:MediaPlayer = new MediaPlayer();
mediaPlayer.media = videoElement;
// Add video screen to the stage and position it
var container:MediaContainer = new MediaContainer();
container.width = 800;
container.x = 110;
container.y = 110;
addChild(container);
// Link video screen to video source
container.addMediaElement(videoElement);
// Apply Ambilight video effect to video screen only
var amb:Ambilight = new Ambilight(container);
// Add Ambilight video effect to the stage
addChild(amb);

В приведенном выше коде от стандартного OSMF примера отличаются только две последние инструкции — это создание объекта Ambilight и добавление его на Stage. Скачать код этого класса можно здесь.
Упомянутый выше Ambilight класс также предельно простой. Он работает по следующему алгоритму:

  • При создании инициализирует объект BitmapData, в котором далее будет рисовать размытый видео экран
  • Подкладывает размытый видео экран под реальный видео экран (он передается ему в конструкторе)
  • Подписывается на событие ENTER_FRAME для прорисовки каждого кадра
  • В каждом кадре копирует картинку с реального видео экрана (дополнительно, для красоты применяя ColorTransform) и размывает ее

При дизайне эффекта, учтите, что лучше всего он смотрится на темном фоне. Ambilight эффект требует хорошей вычислительной мощности, поэтому в некоторых случаях его лучше отключать. Кроме того, при переходе в FullScreen тоже не забудьте отключить Ambilight иначе несмотря на его видимое отсутствие ресурсы все также будут потребляться.
Демо
Как этот замечательный эффект будет выглядеть для трейлера к фильму Аватар продемонстрировано здесь.