Enhance your live stream with HTML5 motion graphics

Adding HTML5 graphic elements to live content has become a popular method to enhance linear broadcasts. This popularity is largely due to the ease of creation. Because these graphical elements are built using standard web technologies, content creators no longer need to use proprietary authoring or rendering tools. Common use cases include adding scoreboards and team stats to sporting events, creating a scrolling lower third for a news channel, showing now and next banners on episodic content, or simply adding a channel logo. In response to growing customer demand, AWS has added support for rendering HTML5-based graphics to both its cloud-based AWS Elemental MediaLive and on-premises AWS Elemental Live video processing solutions.

The graphic elements are defined in an HTML5 webpage. For example, turning individual elements on/off, updating scores, and setting opacity are all controlled within the graphics page itself. AWS Elemental MediaLive and AWS Elemental Live then overlay the graphics on top of the video during the encode process. The general approach to enabling graphics on MediaLive and Elemental Live is similar, but with a few differences.

Enabling motion graphics with MediaLive

To get started with MediaLive, you first enable the motion graphics option located under the general settings section of your MediaLive channel configuration. Once enabled, MediaLive deploys additional resources required to overlay graphics when the channel starts.

You then use schedule actions to control where to get the graphics from and when to turn them on and off. Using the Motion Graphics Activate action, you define the URL of the graphics page along with access credentials if required. You also specify the duration (in milliseconds) to keep the graphics on screen. Specifying a zero duration tells MediaLive to keep overlaying graphics until you either schedule a Motion Graphics Deactivate action or stop the channel. You can also use the AWS SDKs or AWS CLI to control scheduled actions.

Enabling motion graphics with Elemental Live

Elemental Live has been able to insert motion graphics from MOV, PNG, and action-based SWF sources for several years. Version 2.21.0 GA enhances this capability to include rendering from HTML sources. As with MediaLive, you enable the capability at the channel level, however with Elemental Live you also specify your input URL within the channel (event) configuration.

You then define whether Elemental Live should immediately activate the graphics overlay when the channel starts and optionally enable control via the motion_image_inserter REST API endpoint and/or SCTE-35 markers presented in the incoming stream. With SCTE-35 Control, SCTE-35 or SCTE-104 messages can be inserted upstream of the encoder to specify points in the stream where the overlay should be enabled or disabled, with or without specifying a duration. For SCTE-35, the system will react to time_signal() messages with a segmentation_type_id of 0x38 (Provider Overlay Placement Opportunity Start) and type 0x39 (Provider Overlay Placement Opportunity End).

Pricing

For MediaLive, motion graphics pricing is pay-as-you go, charged for the runtime of a channel with the motion graphics feature enabled irrespective of whether the graphics are active or not. Refer to the MediaLive pricing page for full details.

For Elemental Live, HTML5 graphics are included as part of a paid motion graphics add-on license. This perpetual license enables motion graphics capability for any or all channels running on the appliance. It is important to consider the effect that enabling motion graphics has on channel density. Elemental Live will assign compute resource to the motion graphics task and, depending on your configuration, this additional load can reduce the number of concurrent channels you are able to run on each appliance.

You can generate your own HTML5 graphics pages, or to get started quickly or for more advanced features such as graphic templates and operator or data driven updates, you can use solutions from third parties such as LIGR Systems, Singular.live, and Videoflow.

If you have questions, feedback, or would like to get involved in discussions with other community members, visit the AWS Developer Forums: Media Services.