Development

Recently, I was tasked with building a video player that would play live streams via IP Multicast on a supported network and automagically switch to Unicast on an unsupported network. Problem is, with IP Multicast the clients will make a connection and just wait around for data without bombing out. This is because the clients are connected to the IP Multicast address space via their network hardware and not a server endpoint in many other types of streaming.

In the past, this type of configuration might be implemented through a connection timeout in the video player logic. However, I wanted a seamless and immediate way to fall back without making the user have to wait. Enter Apache mod_rewrite.

The general workflow I wanted to follow was this:

  1. The end user hits the video player page on the Apache server
  2. The video player seamlessly and immediately point itself at the right stream.
  3. Everyone’s happy

I accomplished the above with a little mod_rewrite magic in my Apache config.

First, I needed to make sure clients on specific subnets would play back the live stream using Unicast. Second, I needed to properly redirect all other clients to the live stream using IP Multicast. Also, I needed to make sure that VOD requests would be ignored.

Here’s a gist of my rewrites along with some commentary.

Enjoy!

CSS Filters – Current Implementation and usage

Posted on July 16, 2014 at 11:32 am in Blog, Development

OVERVIEW

Almost two years ago, CSS filters were introduced and available as a preview in advance browser versions, such as Chrome Canary. Even using the latest builds, it was still necessary to enable extra flags for the features to work as concisely defined filters. SVG filter effects and Filter Elements can be used to produce similar results (-webkit-filter effects are essentially shorthand presets built using Filter Elements), but for the scope of this article we’ll stay focused on the current -webkit-filter options.

AVAILABLE FILTERS

I’ve created interactive demos of the current filter effects so that you can see them in action and get an idea of the values each one uses. To control the filters, simply drag the slider under each example image. The filter effect, along with the value it’s using, will update in realtime.

In order to play nicely with the data binding used to make things update in realtime, these previews currently only support the implementation for WebKit browsers (Safari, Chrome, Opera) at the moment.

GRAYSCALE

See the Pen CSS Filter – Grayscale by Jordan Pagels (@designerJordan) on CodePen.

SEPIA

See the Pen CSS Filter - Sepia by Jordan Pagels (@designerJordan) on CodePen.

SATURATE

See the Pen CSS Filter - Saturate by Jordan Pagels (@designerJordan) on CodePen.

HUE-ROTATE

See the Pen CSS Filter - Hue-Rotate by Jordan Pagels (@designerJordan) on CodePen.

INVERT

See the Pen CSS Filter - Invert by Jordan Pagels (@designerJordan) on CodePen.

OPACITY

See the Pen CSS Filter - Opacity by Jordan Pagels (@designerJordan) on CodePen.

BRIGHTNESS

See the Pen CSS Filter - Brightness by Jordan Pagels (@designerJordan) on CodePen.

CONTRAST

See the Pen CSS Filter - Contrast by Jordan Pagels (@designerJordan) on CodePen.

BLUR

See the Pen CSS Filter - Blur by Jordan Pagels (@designerJordan) on CodePen.

DROP-SHADOW

See the Pen CSS Filter - Drop-Shadow by Jordan Pagels (@designerJordan) on CodePen.

BROWSER SUPPORT

Browser implementation is still far from standard, but WebKit browsers (Chrome, Safari, Opera) support prefixed filter styles in all current mainstream versions. There are possibilities for implementation in Firefox and IE as well, but the approach is not nearly as straightforward, and there’s a fair bit more code involved. To achieve the same effect across these browsers, you’ll need to use SVG Filters or Filter Element syntax.

It is worth noting that this is entirely different than the Microsoft IE -ms-filter property in terms of implementation and browser handling.

CSS Filter Effects are supported in recent versions of Chrome (18.0+), OSX Safari (6.0+), Opera (15.0+), iOS Safari (6.0–6.1+), and Android Browser (4.4+) as reported by caniuse.com. Firefox is listed as offering Partial Support since version 3.6, although that is using the SVG url() syntax.

IE is listed as not supporting CSS Filter Effects, even into 11.0 - although this MSDN Article from 2011 previews SVG filter implementation that seems to have been slated for IE10.

IMPLEMENTATION

The CSS Filter Effects, as addressed in the examples, are currently implemented in WebKit browsers only and use the following syntax style:

-webkit-filter: [filter name](value);
filter: [filter name](value);

Filter Effects using an SVG filter with the url() syntax are not quite so straightforward and require a separate <svg> element (either in an external file, or included in the page’s HTML) in order to work. The Mozilla Developer Network provides a great article on Applying SVG effects to HTML content.

WRAP UP

Given the wide variance in implementation and guaranteed support, CSS filters (and their cousins) are still a ways from being advisable for any key functionality of a site. That being said, caniuse.com currently lists browser support at almost 65% (includes partial support). With this in mind, CSS filters create some very interesting possibilities for Progressive Enhancement of carefully considered elements.

I’ve been asked a lot of questions and have done a lot of work recently around security hardening for HTTP Streaming with Adobe Media Server (AMS) and Apache. Content protection and sever security and hardening is an evolving beast and the best thing to do is to keep in mind what needs to be secure and how it can possibly be circumvented. However, there’s some basic things to know and a couple tips I can shed some light on within the span of a blog post.

First, with HTTP streaming I think of security in three major categories:

  1. Server security
  2. Content protection over the wire
  3. Content protection while at rest and preventing unauthorized access

Server Security

When considering the origin of your content, you need to follow the general server hardening and security processes:

  • Decreasing access to root level accounts.
  • Protecting authentication info such as passwords and certs. Changing them from time to time as well.
  • Keeping the Operating System and server applications patched.
  • Using firewalls to decrease the network attack surface of your server.
  • Auditing the server files and logs and using some IDS systems.
  • The list goes on…

After you’ve done due diligence when it comes to your server, then next you need to concern yourself with AMS and Apache as well. Here’s a couple tips to keep in mind:

Adobe Media Server

Apache Server

The version of Apache bundled with AMS is 2.2.x. Unfortunately, due to the modules needed for HTTP Streaming you can’t upgrade to a newer version of Apache such as 2.4. However, you can lock 2.2 down as far as you need. Here’s some tips on that:

AMS and Apache – Ongoing

A really good way to see how well your lockdown efforts are going is to run a vulnerability scanner against your server. This not only will give you an idea of what’s still exposed, but it’s also a good way to check your server from time to time as new vulnerabilities are found. Here’s a scanner that I like using: http://go.beyondtrust.com/community

Content Protection Over the Wire

Now that your server is secure, you need to figure out how to protect your content as it traverses the network between your AMS/Apache origin and the end-user’s video player. SSL is always an option, but did you know that AMS has some built-in DRM protection that doesn’t need to use SSL?

Content Protection While at Rest and Preventing Unauthorized Access

How do we prevent unauthorized access and protect the content that the end user has streamed to their local machine?

Prevent Unauthorized Access

There’s a number of things you can do to prevent unauthorized access. Without going too far into implementation details, this step requires:

  1. Some co-ordination with the application developers on your team to basically create a binding between the video player and the wrapping application. For instance, the video player would require some kind of token to be passed in before it will play back content. This token can be anything from a shared secret to some information acquired through a valid SSO sign-on.
  2. If you’re using PHDS, once the player is bound to your system, then you can leverage Protected SWF Verification for PHDS to make sure only your player can play back the PHDS content: http://www.adobe.com/devnet/adobe-media-server/articles/swf-verification-protected-http-dynamic-streaming.html
  3. If you’re using HLS, it’s much trickier and not quite as all encompassing, but someting you might keep in mind is locking down requests for content through token rewrites that have a short expiration ttl: https://code.google.com/p/mod-auth-token/

Content Protection While at Rest

This one’s easy…for now. If you use PHDS or PHLS as mentioned in the previous section, the data itself is protect with DRM. Basically, a simple AMS bundled version of Adobe Access DRM. :)

Closing thoughts

Don’t consider this article and the referenced links as an end-all be all to HTTP Streaming Security with AMS/Apache. It’s just a quick summary of some of the things to consider.

In my consulting experience, I’ve had a wide variety of consulting clients each with varying needs for security. Some implement everything, some a subset and most of the time there’s custom development, consulting, and testing involved. Also, security is a trade-off, the more secure you make something the less functionality there will be for you to leverage. So, implement your security while keeping your required functionality in mind. And test, Test, TEST your configurations against your production use cases.

Hope you enjoyed the read. If you’re ever in need of advice or help with implementing your HTTP Streaming Security, feel free to drop us a line: http://www.realeyes.com/contact/

CSS SHAPES

INTRO

Back in 2012, Adobe proposed CSS Shapes as a new feature to the Official Specifications of The Internet W3C. Earlier this spring, a portion of the proposed features reached Candidate Recommendation status. While that is still a far cry from becoming official by any definition, it is a very encouraging step. Some elements of the functionality are also becoming available to experiment with in the “bleeding edge” versions of major browsers, Chrome Canary, and the Webkit Nightly Builds.

CodePen Example

An example on CodePen by Adobe Web Platform

WHAT IT IS

CSS Shapes are an attempt to bring some of the benefits of working with type and layout in print to the modern web. Module 1 focuses primarily on how text wraps around a shape (the shape-outside property).

WHAT IT ISN’T

Despite both being aspects of CSS that relate to Shapes, CSS Shapes discussed in this article are actually quite different from the very cool little examples showcased at CSS-Tricks’ The Shapes of CSS.

Those shapes are created almost entirely through the clever manipulation of individual border and border-radius properties, with the main intent of rendering shapes in the browser with pure CSS code.

The CSS Shapes defined in the spec are in fact full geometric shapes:

inset() = inset( <shape-arg>{1,4} [round <border-radius>]? )

circle() = circle( [<shape-radius>]? [at <position>]? )

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

Created with the main intention of wrapping and flowing text around and through the elements of a page, while providing the flexibility required to responsively accomodate the ever-growing ecosystem of devices and screen resolutions being used today.

The most concise explanation I’ve found is these illustrations from the current W3C Document

normal-wrap

margin-box-wrap

AVAILABILITY

Chrome Canary

  • Open up Chrome Canary and type “chrome://flags” into the address bar
  • You should see a large list of experimental features, with the option to Enable or Disable each one
    • Be very careful on this page because you actually can break things here
  • Find the entry titled “Enable experimental Web Platform features.” and set it to Enabled
  • Restart Canary and the following properties should be available to use:
    • shape-image-threshold: 0;
    • shape-margin: 0px;
    • shape-outside: none;

Webkit Nightly

  • As of the current version at the time of writing (r168728) some CSS Shapes are available by default, in the standard download:
    • -webkit-shape-image-threshold: 0;
    • -webkit-shape-margin: 0px;
    • -webkit-shape-outside: none;

Once you’re set up with a browser that supports these experimental features, you can checkout the Web Platform Live Example of shape-outside and instead of layout that everyone else sees,

Without Shapesyou should see that block of text fit nicely between the two triangles.

With Shapes

COMING SOON – BUT NOT YET

It will probably still be quite a while before these features will reach a level of implementation and adoption that they can actually be used, but it’s always good to keep an eye on what’s coming.

Here are some great resources for learning more, and seeing what sort of experiments people are trying already:

RESOURCES

DIRECTLY RELATED

LOOSELY RELATED

Last month we had the pleasure of attending the NAB 2014 conference in Las Vegas, Nevada.

I even came out of Lost Wages a little ahead, so for now I can still call it Las Vegas. We’ll just have to wait until my next visit to see what I call it after I leave.

Since this was my first time in attendance, I wanted to see as much as I possibly could without saturating my brain with products and information. When you’re at a conference with 90,000+ attendees and hundreds of exhibitors, it’s easy to get overwhelmed. With that in mind, I made a little mental agenda to focus on relevance versus irrelevance.

What’s really cool about working for a small software development, consulting, training, and integration company like RealEyes, is that we get to deal firsthand with many real world use cases that are never the same. It keeps all of us on our toes and helps us be more knowledgeable in our niche.

Now back to NAB. To anyone who is reading this blog post and has been there before or is familiar with the conference overall knows that it’s the big leagues. Companies from all over the world that either already have an impact or are trying to have an impact are there. From hardware to software and everything in between, they’re there.

One thing I had never considered was how many moving parts go into broadcasting. It’s insane. Since my primary focus deals in streaming solutions, encoding and web collaboration, I never think about what it takes to produce the content, just how to get it out there and deliver it successfully. And since I don’t think we’re going to be delving into video and/or broadcast production any time soon (or are we?), we have to be resourceful with best practices for content delivery.

Varnish Plus is what we feel will offer the proverbial, “icing on the cake” for our end-to-end solution approach. What is it exactly? It’s an HTTP accelerator. Simply put, it’s like supercharging your car. While it’s already been established as the web accelerator of choice in Europe, we are excited to be the premiere Varnish Plus resale, implementation and training partner here in the United States.

Please contact us directly to find out how you can supercharge your content delivery.

Adobe Experiment “Project Parfait”

Posted on April 30, 2014 at 5:39 pm in Blog, Development

Project Parfait

Photoshop has been popular for building pixel-perfect web-design comps for many years now, and has had at least some level of support intended specifically for that purpose for just about as long. With the end of development on Fireworks, and the introduction of the Edge line of products, Adobe has been working on integrating Photoshop more and more seamlessly with tools that are built for developers.

Last week Adobe unveiled it’s latest experiment to the public, which for the time being, is called Project Parfait.

Project Parfait Screenshot

Overview

Project Parfait is a new experiment from Adobe that’s currently online and free to try out and use. The general idea of Project Parfait, is that it is an online service which will allow you to log in with your Adobe ID, and upload a PSD comp of an app or website – without any extra formatting, organizing, or labelling – and it will then display in your browser almost exactly as it did in Photoshop*.

* All the files I’ve experimented with so far have rendered exactly as I’d expected them to, but the current FAQ does call out that there may be occasional discrepancies. 

Instead of any elements or layers being editable, however, clicking on any of them will display all sorts of incredibly useful information specific to your selected element. Selecting two elements at the same time will give you an exact pixel measurement between those two items.

The information panel will also display some overall specs of the file which have traditionally been a bit more difficult to compile in Photoshop than one would like.

Highlights

Fonts

Project Parfait - Fonts

My personal favorite so far, is the complete list of all fonts and font styles used in the file. A complex design comp can easily contain well over a hundred layers, nested, and hidden, and generally difficult to assess all at once, even when filtering for certain types. Compiling a list of all the fonts used, and at what weights and styles, can be tedious even with a PSD created yourself. If you’re working with a PSD provided by another designer, it can border on maddening. While there are plugins to address this issue, I haven’t been completely satisfied with the ones I’ve tried. Project Parfait though does a grand job.

Project Parfait - Fonts

If you click on and select any text layer, you will be able to view the exact properties of that instance, as well as get the CSS styling rules, in a remarkably clean, and a la carte format.

Colors

Another very useful bit of information that Project Parfait provides as soon as you load a file, is a clear list of colors used in the file. Any element or layer with a solid fill color will be sampled for the list of swatches, while image layers will not. This gives you an immediate overview of the site’s palette.

Project Parfait - Colors

Clicking on an individual swatch will give you the numeric color values, available in RGB, Hex, or HSL. As well as place marker overlays on the comp to point out each instance of that specific color.

Project Parfait - Colors

One great use for this, is tightening up your color palette, as it allows you to be much more conscious of the exact color values implemented. In this instance, I have several grey values that are only a few tics away from each other, and can probably be pulled into one single value for a more defined overall palette.

As with the text elements, directly selecting any of these elements will provide you with a clean, a la carte list of CSS rules, which you can drop directly into your style sheet. Transparent layers are even accounted for, and will provide CSS using RGBA values, as opposed to HEX values.

Gradients

This functionality is more or less identical to the color functionality discussed above, except that it will identify elements with a gradient fill.

Project Parfait - Gradients

The major difference is in the CSS generated. Even simple gradients can require some fairly sizeable chunks of code to be rendered with CSS, and while using any number of available CSS3 gradient generators will provide that code, they require you to recreate the specific values used in your comp in order to render your gradient correctly. Project Parfait will generate that CSS directly from your PSD, to save you that step and cut down on the chances of code straying from your design.

Measurements

Project Parfait - Measurements

Opinion seems a bit divided on this feature in the Project Parfait forums so far, but I personally would call this out as my other favorite feature to be released so far. Clicking to select any element in your document will display clear and prominent pixel dimensions for both the width and heighth and the xy position of that element. This same information is readily available in Photoshop, but the ease of selecting elements and the prominence with which the information is displayed are extra convenient.

Project Parfait - Measurements

The magic happens (for me at least), once you already have one element selected, and then shift-click to select a second element. Regardless of the two element’s placement, shape, or (lack of) alignment with one another, you get exact pixel dimensions of their offset from one another. You don’t have to add any guides, zoom in to verify that your ruler is set precisely, or worry about any of the little quirks involved with using the Photoshop Ruler Tool. It’s even easy to determine and double-check the exact alignment of text elements within their containers.

Exporting Image Assets

By default, when you load up Project Parfait, you will see the Styles Tab on the right-hand side of the screen, which contains everything discussed thus far. There are also tabs titled “Layers” and “Assets” which can be explored. The Layers Tab functions more or less the way the Layers Panel in Photoshop does. When you first open a file, the visibility of the layers will be in the same state they were when you saved the PSD. Using the familiar eye icon you can toggle the visibility of any layers or layer groups that contain different pages or states of the design.

Project Parfait - Layers

The two main differences in Project Parfait, are a Reset Layers button, which will set all the layers back to the state they were in when you opened the file, and a down arrow visible on the right side of selected layer’s rows in the list.

Project Parfait - Extract

This relatively inconspicuous little down arrow will in fact allow you to extract and generate an image element in a variety of formats. In essence, this is a slickly streamlined workflow replacement for selecting an element’s layer, hiding all other layers, trimming transparent pixels, and then starting the “Save For Web and Devices” dialog.

Closing thoughts and Caveats

Despite it’s still-very-experimental and very-much-in-development status, Project Parfait offers some incredibly useful little tools and timesavers to anyone working from PSD comps. This seems to be an incredibly well-formed example of the capabilities being given to JavaScript as a fully-implemented language for Adobe Extensions and Scripting.

It is well worth giving the official FAQ at least a quick read to see the latest status of the project, and what features are currently in development.

360Flex 2014 – Why you should register

Posted on April 21, 2014 at 12:23 pm in Blog, Development, Training

Here’s a number of reasons of why you should consider registering for 360Flex this year:

  1. There will be a series of mobile development sessions and labs give by our very own Jun Heider and OmPrakash Muppirala to help you build applications for both Android and iOS devices.
  2. Alex Harui will be there to talk about FlexJS which allows you to leverage your existing Flex skills to build JavaScript based applications.
  3. Ted Patrick will be there to help you make the move from Flex to Web Standards if that is how you choose to go.
  4. As always, we have multiple sessions of Michael Labriola. He’s always got something slick up his sleeve to discuss.
  5. There’s a number of other great sessions and speakers as well.

So what are you waiting for? Register and experience the awesome this May!

Using the AngularJS $logProvider

Posted on April 16, 2014 at 12:11 am in Blog, Development

Logging and debugging is a daily occurrence when developing JavaScript based applications. AngularJS provides a simple, effective way to enable logging in your applications – the $logProvider. $logProvider is used to enable logging and the $log object is used to log within your applications objects.

Enabling

Enabling the $logProvider is as simple as injecting the $log object into your object and then calling $log.debug(); to send logs to the console.
Example:

Turning off logging

You can disable logging (AngularJS 1.1.2+) by calling
$logProvider.debugEnabled(false);
Example:

Extending

AngularJS provides a mechanisms to extend the built in $logProvider, $provider.decorator(). An example will get the point across much more quickly than me trying to explain it all.
Example:

Basically we intercept the call using decorate so we can add on the features and functionality we need to the $log.debug() call.

AngualrJS version 1.2.16 was used as a basis for this article.
Thanks to Burleson Thomas and this post for the extension example.

Women Who Code JavaScript: A Successful Study Group

Posted on March 26, 2014 at 12:11 pm in Blog, Development

This week RealEyes hosted the first Women Who Code Denver JavaScript Study Group with 11 women in attendance. Many different experience levels were represented making for a great opportunity to share and learn together.

Women Who Code Study Groups provide the opportunity for an evening of dedicated work time on a specific programming topic, in this case JavaScript. Participants bring their own computers and either come with something to work on or work with the group leader to get started. This particular study group also includes a short presentation on a related topic at the beginning of each meeting.

RealEyes will continue to host the WWC JavaScript Study Group. The next meeting will be in April. Checkout the meetup group for more information.

Mysteries of AMS Stream Recording

Posted on March 19, 2014 at 12:11 pm in Blog, Development

When delving into the deeper realms of Adobe Media Server, sometimes you find some interesting gems. Sometimes you unleash code balrogs. In a recent project where we were setting up recording of a continuously running live video stream, we stumbled upon one of the latter; a bug so bedeviling that I am compelled to write about it in the hopes that I might save fellow coders from falling prey to such a fiendish bug.

Here’s the situation: we had a client who wanted to consume many different live video feeds that were running 24/7. They wanted record them for later review, and also provide limited DVR functionality on the live stream. In the AMS server-side application we wrote, we would consume a stream from a remote server and spawn a Stream object to record it locally on the server using Stream class’ record method. At the same time, AMS was republishing the stream from the Stream object with DVR functionality for a Flash client app. We would record the stream for 30 minutes, then stop recording on that Stream object, clean that object up, update the file name for the next segment, and then start recording again on a different Stream object. After 24 hours, we would end up with a day’s worth of video broken up into 30 minute chunks with minimal gaps in playback. That’s pretty cool. In addition to the recording, we had an FFMPEG job running on the recorded videos to generate thumbnails. Because of the server load, we staggered the recording intervals of the different streams so recordings wouldn’t finish at the same time.

Everything seemed to be working OK for the most part. Videos were recorded. Thumbnails were generated. The client app could view video. The only confounding thing was that occasionally, without rhyme or reason, the video would play back in the client app with audio, but no video. The thumbnails generated were blank. Even more confounding was that if we played back a problem video as live, we could get video. Only with DVR playback we would not be able to see the video. What was going on?

We found there were some NetStream.Record.NoAccess status messages in the application logs. That can happen if the client doesn’t have file permissions, or the stream is still playing when you tried to record it. Unfortunately that did not always correspond to a file that had audio, but no video. We tried the recommended methods for stopping a recording. We called streamObj.record( false ); and streamObj.play( false ); We also nulled out the Stream object. No luck. The problem would still happen randomly and seemingly without cause.

We ran one of the problem video files through the FLVCheck tool and received this message: error: -18 Truncated box. Some research showed that this is from the recording not stopping properly. The question was, why wasn’t our stopping of the recording working?

In short, we never found out. However, after much debugging and researching, we did find another way. We simplified things down by splitting our app in two. One app did the recording and another did the DVR work. The live stream would be published into our recording app, which would republish it to the DVR playback app using ns.publish( republishStreamName, "record" );. This way we would end up with a recording and the DVR app could make the stream available for playback on the client app. To stop, we would just do ns.publish( false ); and null out the reference to the NetStream object. That solved the issue and we no longer encountered truncated boxes or videos that played back without video.

So, the short of it is, using the NetStream’s publish method with its “record” parameter solved the issue, rather than using the Stream class’ record method. Arm yourself with this knowledge as you tread the lower reaches of AMS and hopefully you can tell this particular code balrog, “You shall not pass!”