Draw video on canvas HTML5

10
votes

I'm trying to draw a video on a canvas. To achieve this I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (that I need to set the position, width and height of the video inside the canvas).

Therefore, every time I draw a video on the canvas, the previous I create should be stopped and the new one has to be played. Two problems:

1) the video doesn't play (the function only draws the first frame), but his audio does

2) how can I get previously drawn videos to stop?

Demo: http://jsfiddle.net/e3c3kore/

<body>
    <canvas id="canvas" width="800" height="600"></canvas>
</body>



var canvas, context, xStart, yStart, xEnd, yEnd;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);

function mouseDown(e) {
    xStart = e.offsetX;
    yStart = e.offsetY;
}

function mouseUp(e) {
    xEnd = e.offsetX;
    yEnd = e.offsetY;
    if (xStart != xEnd && yStart != yEnd) {
    var video = document.createElement("video");
                        video.src = "http://techslides.com/demos/sample-videos/small.mp4";
                        video.addEventListener('loadeddata', function() {
                            video.play();
                            context.drawImage(video, xStart, yStart, xEnd-xStart, yEnd-yStart);
                        });
    }
}

Demo: http://jsfiddle.net/e3c3kore/

3
javascripthtmlcanvas
video-canvas is a small module that links your video to the canvas and handles the drawing. You can link both videos to the same canvas and then video1.pause(); video2.play() – fregante

3 Answers

6
votes

1) The drawImage() method was only be called once. It needs to be called once per frame.

2) Call pause() method to stop video.

For example, the follow code starts a timer loop (for drawing the frames) on mouse up and stops any previous video on mouse down.

var canvas, context, video, xStart, yStart, xEnd, yEnd;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);

function mouseDown(e) {
    if (video) {
        video.pause();
        video = null;
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
    xStart = e.offsetX;
    yStart = e.offsetY;
}

function mouseUp(e) {
    xEnd = e.offsetX;
    yEnd = e.offsetY;
    if (xStart != xEnd && yStart != yEnd) {
        video = document.createElement("video");
        video.src = "http://techslides.com/demos/sample-videos/small.mp4";
        video.addEventListener('loadeddata', function() {
            console.log("loadeddata");
            video.play();
            setTimeout(videoLoop, 1000 / 30);
        });
    }
}

function videoLoop() {
    if (video && !video.paused && !video.ended) {
        context.drawImage(video, xStart, yStart, xEnd - xStart, yEnd - yStart);
        setTimeout(videoLoop, 1000 / 30);
    }
}
4
votes

You need to set up a continuous rendering. You are only rendering the first frame of the video. Canvas is dumb and does not know about videos. You have just dumped pixels from the video onto the canvas. You need to update the canvas continuously.

The best way is to use requestAnimationFrame this makes sure everything is synced up with the browsers own rendering.

In the example below the rendering is started when the video is loaded. Be sure to end the previous updates if you load a second video.

var canvas = document.getElementById("canV");
var ctx = canvas.getContext("2d");

var video = document.createElement("video");
video.src = "http://techslides.com/demos/sample-videos/small.mp4";
video.addEventListener('loadeddata', function() {
  video.play();  // start playing
  update(); //Start rendering
});




function update(){
  ctx.drawImage(video,0,0,256,256);   
  requestAnimationFrame(update); // wait for the browser to be ready to present another animation fram.       
}
#canV {
  width:256px;
  height:256px;
}
<canvas id="canV" width=256 height=256></canvas>
-1
votes

From last few days i am working on same project called as chroma keying effect which consist f mixing of two videos.so after searching a long on internet i found an api called RecordRTC this API can give you a solution.