Animate CC: Interactive HTML5 Canvas Video Projects

Since beginning this practice with the Adobe Generation Professional demo sessions, I’ve begun recording any live demos using Camtasia 9 and uploading them to YouTube. The full session with all speakers is linked below as well – but this segment has better audio and video. I also include the project files created during the session if you wish to download.


Part of the “Four Masters of Animate CC” session from December 10th, 2016.

Direct link: https://youtu.be/ViDw06N96MQ


Animate CC Demo Files

Joseph’s demo files (with video included) [176 MB]

Joseph’s demo files (no video) [20.7 KB]


Full Recording (Adobe Connect)

Full recording with Tom Green, Joseph Labrecque, Myra Ferguson, and Chris Georgenes: http://my.adobeconnect.com/p8mjp0ghp6s/

Adobe Media Server, Apache, and Windows

I’ve been meaning to write about this for some time, for the benefit of anyone else who encounters the problem. Things are going to get crazy around here, so I might as well get this out there and out of my drafts!


The problem itself is that we run a number of Adobe Media Server 5 instances at the University of Denver and after an upgrade over the Summer Quarter, streaming and stability pretty much went from 100% reliable to “we need to find another streaming solution”.

So the setup is AMS5, bundled Apache 2.4, and Windows Server 2012. On both live streams and VOD – we saw similar behavior… the services were all still running… but no content was being served. After looking at a number of parameters we discovered that our RTMP streams were actually running fine. It was the HLS streams which were constantly dying.

We were actually having to restart the services to get streams running again multiple times a day – for weeks. It was an incredibly frustrating experience and searches for this problem in regard to AMS yielded no workable results. I even tried reaching out to Adobe through my contacts with them and was met with complete silence. Absolutely frustrating.

It wasn’t until I began excluding the term “AMS” from my research – and looked only toward Windows and Apache HTTPD that I found anything close to what I was experiencing.

asf_logo

I found 2 different posts about what appears to be the exact same issue – not with AMS itself… but with Apache on Windows:

Both threads suggest the addition of the following parameters to the main Apache configuration file:

AcceptFilter http none
EnableSendfile Off
EnableMMAP off

Performing the mentioned adjustments to the Apache 2.4 configuration file within your AMS installation absolutely resolves this issue. Here is the modified httpd.conf located at {PROGRAMS}\Adobe\Adobe Media Server 5\Apache2.4\conf as an example:

#
# This is the main Apache server configuration file. It contains the
# configuration directives that give the server its instructions.
# See <URL:http://httpd.apache.org/docs/2.4/> for detailed information.
# In particular, see
# <URL:http://httpd.apache.org/docs/2.4/mod/directives.html>
# for a discussion of each configuration directive.
#
# Please see httpd.conf.orig for the configuration of a default
# (non-AMS) installation of apache.
Define AMS_BASE_PATH ".."
Define WEB_ROOT "/webroot"
Define AMS_WEB_ROOT ${AMS_BASE_PATH}${WEB_ROOT}
Listen 80
Listen 8134

LoadModule slotmem_shm_module modules/mod_slotmem_shm.so

# If you plan to run AMS as root on linux, you _must_ specify a
# valid user, with access to the AMS installation direction, or
# apache will not run.
#
# If you've used the default installer, nobody (or whatever other
# username you gave to the installer) will work here.
#
# If you're running a developer build under your own home directory,
# you should use your own username.

AcceptFilter http none
EnableSendfile Off
EnableMMAP off
AccessFileName .htaccess
ServerSignature On
UseCanonicalName Off
HostnameLookups Off

Timeout 120
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 15

This was an incredibly frustrating experience for myself and many others involved. I hope this post helps someone out there to resolve this problem without the weeks upon weeks of crap I had to deal with!

Lynda.com: HTML5 Canvas and WebGL in Flash Professional CC

Pleased to present a new course for Lynda.com: HTML5 Canvas and WebGL in Flash Professional CC!

Create a shared pool of content for a set of related projects—HTML5 video, a WebGL-rendered interactive ad, and an HTML5 Canvas game—using Flash Professional CC.

No longer restricted to only ActionScript and Flash Player, Flash Professional CC offers more publishing possibilities than ever before. Developers can now use Flash to build assets and animation that target platforms such as HTML5 video, Canvas, and WebGL. And adding JavaScript allows for playback on just about any modern desktop or mobile device.

This course focuses on using Flash Professional CC to create a shared pool of content for a set of related projects: an HTML5 video, an interactive ad, and a simple web-based game. Author Joseph Labrecque shows how use Flash’s familiar toolset to build and manage assets that fit into a modern web publishing workflow.

Topics include:

  • Using code snippets and actions
  • Assembling and animating a scene for video
  • Rendering the video
  • Laying out an ad with WebGL and JavaScript
  • Programming a game in HTML5 Canvas

 

Lynda.com: Building Custom HTML5 Video Playback with AngularJS

Pleased to present a new course for Lynda.com: Building Custom HTML5 Video Playback with AngularJS!

Develop a customized responsive video app that performs and appears great in all browsers, using AngularJS and Bootstrap.

HTML video doesn’t require plugins for playback, but the default experience differs drastically across browsers. Using a combination of Bootstrap and AngularJS, you can develop a customized responsive video app that performs and appears great in all browsers—unifying the user experience and allowing custom functionality, such as playlists and full-screen playback.

Join Joseph Labrecque for this start-to-finish course that guides you through every step in the process, from installing the software to employing a variety of foundational AngularJS directives. All you need to bring is the video and the time.

Topics include:

  • Setting up
  • Creating a video element
  • Making the video element responsive
  • Building controls
  • Setting up an AngularJS controller
  • Binding properties
  • Customizing the playback controls and time display
  • Enabling full-screen playback and playlist support
  • Using AngularJS directives and filters

 

Announcing AS3-WebVTT

AS3-WebVTT is a set of ActionScript 3.0 utility classes which enable the parsing and sorting of standard WebVTT (.vtt) files for video captioning.

AS3-WebVTTdemo

Why write a WebVTT parser in AS3? Simple. A lot of video is still served with Flash Player or AIR – we certainly still use it extensively at the University of Denver. Recently, we’ve found the need to integrate captioning through a standard format across our video delivery tools. We settled on support for the WebVTT standard and now make our work available for everyone. Another example of web standards and Flash innovation working hand in hand!

So how is it used?

  1. Download the code and include it in your project.
  2. Import edu.du.captions.utils.CaptionsHandler – this is the only class you need to interact with from your application code.
  3. Create a new instance of the CaptionsHandler class: captionsHandler = new CaptionsHandler();
  4. You will need to stream a video, and create a text field for the captions to display in. This should be in your app already apart from the text object for captions support.
  5. Invoke captionsHandler.gatherCaptions(captionsPath); passing in string representing a .vtt file location. It will then be loaded, read, and parsed.
  6. Invoke captionsHandler.renderCaptions(CurrentVideoTime, TextFieldForDisplay); – passing in the current playback time of the video and the text field object whenever appropriate to render captions to the screen. You could use a Timer, for instance.

The video and text objects are completely under your control. Experiment with text positioning and format to get the desired results. You can see an example of all of this in the demo project.

If you do improve the classes – please contribute back to the project! Everything is pretty solid right now but there is always room for improvement. Some pieces of the WebVTT specification (such as alignment) are currently ignored by the parser.

You can find the source code along with a set of demos over at: https://github.com/du-otl/AS3-WebVTT

I’ve also recorded a video to show how this works in both a pure AS3 environment and with using the visual tooling in Flash Professional CC: