Bandwidth Considerations

Overview

In many instances when creating an application for the CloudTV H5™ platform, a developer will be forced to make adjustments for bandwidth constraints. Just about every aspect of the user interface affects the bit rate, meaning there are multiple avenues to adjusting the bandwidth that an application consumes. This is an overview of the major design elements that affect bandwidth and how to best utilize them when bandwidth restriction is necessary.

Images

In general, the more complex an image the more bandwidth is required to render the image. Intricate detailed background images and gradient backgrounds are examples of what should be avoided when designing applications to run in low bandwidth environments. Background images take up the full resolution of the screen so they are a considerable factor in the outcome of an application’s bandwidth requirements. Also to consider is how any type of dynamic content is drawn. It is better to only update the area that is being affected and not update other areas of the screen image. An example of this would be updating just a button when a user selects the button as opposed to updating an entire background image with a new button state rendered into the background image. Although the screen might look the same to the end user, the platform is forced to render every pixel again, and that takes bandwidth.

Animations-CSS

Animations can add a sophisticated appearance to an application. However, animations also increase the required bandwidth of an application, which is something a developer should be cognizant of. When an application runs out of bandwidth, the user interface suffers, often resulting in skipped frames and unresponsive control. In scenarios where bandwidth is a concern, it is wiser to use animations and transforms sparingly, if at all. A good practice is to enable an application to either 1) be configured or 2) configure itself, to toggle the use of animations and transforms depending on the bandwidth available. When in doubt, it is better to have a stable functional application than one that attempts to do fancy tricks, but fails.

Fonts

When deciding on which font to use in an application, it is better to choose san serif fonts as they are both easier to view on television and they require less bandwidth to render. Serif fonts and script fonts require more bits to draw the subtle details, and just like images, more bandwidth is required to render more complex type faces.

Video

One of the strengths of the ActiveVideo CloudTV H5™ platform is the use of video, especially the ability to display multiple video objects with varying sources simultaneously on the screen. Video bit rates are encoded based on the setting of the application bandwidth. The more bandwidth the application has, the more bandwidth the videos will be encoded with. Videos require a constant steady stream of bits that consume from the application’s total bit rate, so it is necessary to be aware of this factor and plan accordingly. Having fewer videos on-screen or decreasing the dimensions of video objects are methods to maintain a lower bandwidth.

Stagger the load

One of the largest consumers of bandwidth is a scene transition. When drawing a scene there is a significant “burst” of the bitrate to load the entire contents of the page. In applications with low bit-rate requirements it is wise to stagger the load of elements on the page to allow for each one to draw in a different frame. In a North American cable system, an application runs at 29.97 frames per second (almost 30 frames per second). What that means is, in one second or 1000 milliseconds; the screen is drawn 30 times. If you apply this knowledge into a scene that you want to stagger the loading of the elements, you can wait 33 milliseconds between the loading of objects. The JavaScript setTimeout function comes in handy for this purpose.

  • Wednesday, 21 November 2012

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2017 Active Video Networks. All Rights Reserved