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

There are actually a few js libs that can record a webcam feed. Check out RecordRTC . Here is some example code that might work (I haven't tested).

navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotVideoStream(localMediaStream) {
  var video = document.querySelector("video");
  var recordRTC = RecordRTC(mediaStream); 
  recordRTC.startRecording(); 
  recordRTC.stopRecording(function(videoURL) { 
      var playbackVideo = document.getElemenById('playback-vid');
      playbackVideo.src = videoURL; // set src for playback
      playbackVideo.playbackRate = .5; // slow down playback
  });

  // set src for live preview
  video.src = window.URL.createObjectURL(localMediaStream);
  video.play();
}

function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}

// get things rolling
navigator.getUserMedia({video: true}, gotVideoStream, error);

If that doesn't work, Google the subject for more resources.

Answer 2

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.