Convertir HTML5 Canvas Séquence d'un Fichier Vidéo

Firefox dispose d'une fonctionnalité expérimentale (désactivé par défaut) qui est appelée HTMLCanvasElement.captureStream()

Essentiellement, il saisit la toile de l'élément de flux vidéo qui peut ensuite être envoyé à un autre ordinateur à l'aide de RTCPeerConnection() ou peut-être vous pouvez utiliser le YouTube Live Streaming API stream directement.

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

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

FileSaver.js + ffmpeg en ligne de commande

Avec FilSaver.js on peut télécharger chaque toile image comme PNG: Enregistrer sur un Fichier Local de Blob

Alors que nous venons de convertir le format Png pour n'importe quel format vidéo avec ffmpeg en ligne de commande: Comment créer une vidéo à partir d'images avec FFmpeg?

Chrome 75 vous demande si vous souhaitez autoriser à enregistrer plusieurs images. Ensuite, une fois que vous dites oui, il télécharge automatiquement les images une par une, en vertu de votre dossier de téléchargement, nommé 0.png, 1.png, etc.

Il a également travaillé dans Firefox 68, mais moins bien, parce que le navigateur ouvre un tas de "voulez-vous enregistrer ce fichier" windows. Ils ont un "faire la même chose pour les mêmes téléchargements" popup, mais vous devez être rapide pour le sélectionner et appuyez sur entrée, ou bien un nouveau popup vient!

Pour l'arrêter, vous devez fermer l'onglet, ou ajouter un bouton d'arrêt et un peu de JavaScript logique.

JS:

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);

HTML:

<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>

GitHub en amont.

Voici une image au format GIF en utilisant ceci à la place: https://askubuntu.com/questions/648244/how-do-i-create-an-animated-gif-from-still-images-preferably-with-the-command-l

Obtenir des images ignorées si le FPS est trop élevé

Cela peut être observé par la réduction de la taille de la toile dans la démo ci-dessus pour accélérer les choses. Au 32x32, mon Chrome 77 télécharger en morceaux d'environ 10 fichiers et des sauts d'environ 50 fichiers entre...

Malheureusement, il n'y a aucun moyen d'attente pour les téléchargements à la fin... fermer la fenêtre après l'enregistrement du fichier dans FileSaver.js

Donc la seule solution que je peux voir si vous avez une haute fréquence d'images framerate limite... Le contrôle de fps avec requestAnimationFrame?

Peut-être qu'un jour quelqu'un va répondre:

• H. 264 encodeur vidéo en javascript
• L'exécution de ffmpeg dans le navigateur - options?

et ensuite, nous serons en mesure de télécharger la vidéo directement!

Ici est une version d'OpenGL si vous décidez que le navigateur n'est pas pour vous 🙂 Comment utiliser GLUT/OpenGL pour le rendu d'un fichier?

Testé sur Ubuntu, 19.04.