Search code examples
htmlcanvashtml5-canvaseaseljs

Render a single frame or a given portion of a video in HTML5 canvas with EaselJS

I'm using EaselJS to render videos in HTML5 canvases this way:

HTML

<div>
  <canvas id="terminal1" width="140" height="82">
  <video id="video1" loop="true" width="127" height="70" autoplay="true" src="/url/to/video.mp4"> 
  <source  type="video/mp4"/> 
  </video>
</div>

Javascript

function init() {
  stage = new Stage(document.getElementById("cnvs_images"));
  var videoTag = document.getElementById('videoTag');
  video = new Bitmap(videoTag);
  video.visible = true;
  terminal1 = new Stage(document.getElementById('terminal1'));
  stage.addChild(video);
}

function tick() {
  stage.update();
  stage_terminal1.update();
}

Don't pay too much attention to the JavaScript code. I've just synthesized to the basics I remember of my real code which is much more larger; it's just a reference to say that I'm rendering the video the EaselJS normal way given in many tutorials; so this snippet may not work but gives the idea. My real code works perfectly!

I just want to know if there's a way to just render a single frame of a video instead of playing it all.

I'm using many canvases for my application and when rendering all the videos needed (6 videos, 6 canvases) if not ultra slow, it slows down a little my app. I wish just to render a pre-visualization of the given video (some seconds of it) or just a single frame. It must be done with EaselJS as I have a lot of functional code done already.

Solution

  • to be honest I think it can hardly be done at the present time. I just deactivated the corresponding code-section in my application and simply overlayed the canvas on top of the video.

    the main problem is, that the video sometimes does not update quickly enough after seeking and the fired events don't really help either - unless the video is playing. I ended up drawing lots of black screens to my canvas. Using some timeout to call the proprietary copy2canvas function helped a little but as soon as your system or network is a little bit to slow, things don't work again.

    if you still want to try it, here is a tutorial: http://www.html5rocks.com/en/tutorials/video/basics/#toc-fun-canvas