HTML5 camera buffering and delay (delayed mirror)

Question

I'm not yet very familiar with HTML5 but have been looking for a project to delve into it.

Would the following functionality be possible using HTML5 and camera access?

• Stage1: live camera replay with adjustable delay (aka delayed mirror)

• Stage2: selecting parts of the previously recorded live stream and have replay options available (continuous loop, slow motion, drawing into the picture etc.)

Ideally this should run on an Android tablet.

This is meant as an application to provide immediate visual feedback for coaches and athletes.

Thanks for any feedback, it is much appreciated! :)

Tom

Answer 1

The MDN tutorial on taking pictures with a webcam provides most of the pieces you need to implement this in a simple way.

• Request a video media stream and connect it to a video element.
• Draw the video element to a canvas.
• Copy the canvas either to a data URL or raw image data.
• After a delay show it on another canvas or in an img element.

Here is an example I wrote implementing a delayed mirror.

This is fine for a few seconds of video. For example, I can practice dance moves with it. Recording and playing back longer streams, you might run into memory problems.