Javascript Video Telestrator: Proof of Concept


Instructions:

Use to start recording your telestration.
Then use the tools to draw on the video, play/pause the video, zoom, pan, etc.
When you are done, press the button to stop recording.
Then play back your telestration with the button.
To Delete the telestration and start over, press: .

Saving a Telestration:

This is an example of how a telestration can be saved. In this case, we save it using your browsers LocalStorage. However, it would be easy to save to a server side component. (If you don't have Local Storage enabled on your browser this won't work.)



Saving and loading could be used to allow users to save their telestration and come back to it later to finish it. It could also be used to display the telestration on a "play-only" page that displays the telestration, but does not allow for creating a telestration. It might also be adapted to create animations to play back on the play only screen, without video as a background. If could be used to capture and playback different types of user interaction, for example, capturing the process of someone using the mouse to sign their name.

Limitations:

The javascript telestrator does not work well on mobile devices including iPads. Mobile devices put limitations on how much control javascript has over loading and manipulating videos. This is done to prevent HTML pages from choosing to use your bandwidth, so that the user can decide.

About the Telestrator:

The telestrator is a proof of concept exercise for a browser-based video telestration tool. The tool was designed to be used as part of a system for training baseball hitters. While we were able to get pretty far building the javascript telestrator, ultimately, we built an OS X application in Swift to allow for better voiceovers and encoding the telestration into an mp4 video.
There are some problems with the telestrator, depending on what browser you use. However, it works reasonably well for a proof of concept and was valuable in helping with the decision of how to precede with the project. It also helped us design the drawing tools that might be useful for the trainers, by having them try them out.
This example version of the telestrator is stand alone without a server side component. However, when there is a server side component, it is capable of storing telestrations for others to view, as well as allowing the user to choose from a list of videos on the server.
(The telestrator uses the "video.js" HTML5 player framework with a frame-by-frame plugin. I did not write the frame-by-frame plugin or video.js.)
While the code is not perfect, and it's pushing the limits of HTML5 video and javascript, it's a good example of a relatively small amount of code to create a complex tool. It's easily extensible by adding new tools to the telestrator with very little code. I'm happy with the separation of the core telestrator from the UI on the page, so that it would be easy to change the controls for the telestrator without changing the core code or to make a play-only html page.
It is not well documented and is not covered by any tests, so it is not a complete work. However, it is a good proof of concept and could be used as a basis for production code.
We also created an iOS version of the telestrator which does not playback or save. It is used by trainees to examine their own videos. See Video Etch on iTunes.
The javascript for the TelestratorContainer which is used for managing the videos, drawing, and playback is in telestrator.js.
The javascript for manipulating the UI and interacting with the TelestratorContainer is in this HTML document.

About the Development:

We worked remotely to design and construct this proof of concept, along with the related webapp, mobile apps, and OS X application for the Spladap sports training platform. I developed the system with a small team consisting of a scrum master, one other software engineer, and me. We had daily stand-up meetings and worked on portions of it using pair programming via screen sharing. We met with project stakeholders at least once a week to show them progress and get feedback.