All geek questions in one place

Draw video on HTML5 canvas

I am trying to draw a video on canvas. To do this, I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (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 one I create must be stopped, and the new one must be played. Two problems:

1) the video does not play (the function only draws the first frame), but its sound does

2) how can I delete videos previously stopped?

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/

+5
source share
3 answers

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

2) Call method pause () to stop the video.

For example, the following code starts the timer cycle (for drawing frames) with the mouse up and stops any previous video on the 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); } }
+2
source

You need to set up continuous rendering. You create only the first frame of the video. The canvas is dumb and does not know about the video. You just dropped the pixels from the video onto the canvas. You need to constantly update the canvas.

The best way to use requestAnimationFrame is that everything is in sync with native browser rendering.

In the example below, rendering starts when the video loads. Be sure to complete previous updates if you upload 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>
+2
source

In the last few days, Iā€™m working on the same project called the color grading effect, which consists of mixing two videos. After searching the long internet, I found an api called RecordRTC, this API can give you a solution.

-1
source

Source: https://habr.com/ru/post/1236465/

More articles:


All Articles