{"id":460,"date":"2010-11-08T13:10:58","date_gmt":"2010-11-08T10:10:58","guid":{"rendered":"http:\/\/blog.denivip.ru\/?p=460"},"modified":"2013-08-05T14:12:44","modified_gmt":"2013-08-05T10:12:44","slug":"ambilight-effect-in-flash-video-player","status":"publish","type":"post","link":"http:\/\/blog.denivip.ru\/index.php\/2010\/11\/ambilight-effect-in-flash-video-player\/?lang=en","title":{"rendered":"Ambilight effect in Flash Video Player"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Flash video players become more interesting and complex, and almost as functional as home video systems. We wrote some time ago about DVR, dynamic bitrate and other functions (how to implement them in your player — not yet available in english at the moment). Now we will talk about implementing beautiful dynamic background lights like it made in Philips TV sets.
\n
\nIn order to make this design feature we need a little bit of ActionScript 3 programming and several minutes of Flash Media Server configuring. We will go through the process by creating simple OSMF video player with Ambilight effect applied. First of all let’s discuss mechanics: ambilight effect is getting done by applying Blur filter with big distortion (x and y) to the video screen. Blurred image is placed behind real video screen and blurred edges look like ambilight effect from video screen. Simple and nice.
\nFlash Media Server<\/strong>
\nIn order to apply Flash filters (i.e. Blur filter) to video stream Flash Media Server should give such permission. The permission gives access to the BitmapData of video frames from Flash video players. Responsible for the feature parameter is called VideoSampleAccess. You should enable it in Application.xml configuration file (probably you will find some template for that in file already). Sample config code:<\/p>\n

1
2
3
4
5
<\/div><\/td>
&lt;Client&gt;
\n&lt;Access&gt;
\n&lt;VideoSampleAccess enabled="true"&gt;\/&lt;\/VideoSampleAccess&gt;
\n&lt;\/Access&gt;
\n&lt;\/Client&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

The value «\/» gives access to all applications video data.
\nFlash Player<\/strong>
\nAfter this we are ready to develop simple video player. OSMF could help us to make this in less than an hour. Simplest video player code provided below:<\/p>\n

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

In the code above there are only two lines of difference from the sample OSMF video player. These are Ambilight object construction and adding it to the Stage. You could download Ambilight class here<\/a>.
\nAmbilight class is really simple and pretty well commented. It implements algorithm below.:<\/p>\n