Geek Answers Handbook

Convert HTML5 canvas sequence to video

I would like to convert the animation to HTML5 canvas into a video file that can be uploaded to YouTube. Is there any screen capture API or something that can allow me to do this programmatically?

+7
source share
4 answers

There is a whammy library that claims to create web video from still images using JavaScript:
http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/

Please note that there are limitations (as expected). This encoder is based on a web image format, which is currently only supported in Chrome (maybe in the new Opera too, but I have not tested it). This means that you cannot encode in other browsers unless you find a way to encode the image that you want to use as a web image in the first place (see this link for a possible solution for this).

In addition, there is no way to create a video file from images using JavaScript and canvas using the browser’s own APIs.

+9
source

Firefox has an experimental feature (disabled by default) called HTMLCanvasElement.captureStream ()

, canvas , RTCPeerConnection() , , API YouTube Live Streaming .

: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream

: https://developers.google.com/youtube/v3/live/getting-started

+8

FileSaver.js + ffmpeg

FilSaver.js PNG: BLOB-

PNG ffmpeg : FFmpeg?

Chromium 75 , . , "", , 0.png, 1.png ..

Firefox 68, , " ". " ", "Enter", !

, JavaScript.

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var pixel_size = 1;
var t = 0;

/* We need this to fix t because toBlob calls are asynchronous. */
function createBlobFunc(t) {
  return function(blob) {
    saveAs(blob, t.toString() + '.png');
  };
}

function draw() {
    console.log("draw");
    for (x = 0; x < canvas.width; x += pixel_size) {
        for (y = 0; y < canvas.height; y += pixel_size) {
            var b = ((1.0 + Math.sin(t * Math.PI / 16)) / 2.0);
            ctx.fillStyle =
                "rgba(" +
                (x / canvas.width) * 255 + "," +
                (y / canvas.height) * 255 + "," +
                b * 255 +
                ",255)"
            ;
            ctx.fillRect(x, y, pixel_size, pixel_size);
        }
    }
    canvas.toBlob(createBlobFunc(t));
    t++;
    window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
<canvas id="my-canvas" width="512" height="512" style="border:1px solid black;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
Hide result

GitHub upstream.

GIF, : https://askubuntu.com/questions/648244/how-do-i-create-an-animated-gif-from-still-images-preferably-with-the-command-l

enter image description here

, FPS

, , . 32x32 Chromium 77 10 50 ...

, ... FileSaver.js

, , , ... requestAnimationFrame? : https://cirosantilli.com/#html-canvas

, - :

!

Here is the version of OpenGL if you decide that the browser is not for you :-) How to use GLUT / OpenGL to render to a file?

Tested on Ubuntu 19.04.

+1
source

More articles:


All Articles