Exportando un video en p5.js

Sé libre de divulgar nuestro espacio y códigos en tus redes, necesitamos de tu ayuda para aumentar nuestra comunidad.

Solución:

Dado que p5.js se basa en la API de Canvas, en los navegadores modernos, puede usar un MediaRecorder para hacer este trabajo.

const btn = document.querySelector('button'),
  chunks = [];

function record() 
  chunks.length = 0;
  let stream = document.querySelector('canvas').captureStream(30),
    recorder = new MediaRecorder(stream);
  recorder.ondataavailable = e => 
    if (e.data.size) 
      chunks.push(e.data);
    
  ;
  recorder.onstop = exportVideo;
  btn.onclick = e => 
    recorder.stop();
    btn.textContent = 'start recording';
    btn.onclick = record;
  ;
  recorder.start();
  btn.textContent = 'stop recording';


function exportVideo(e) 
  var blob = new Blob(chunks);
  var vid = document.createElement('video');
  vid.id = 'recorded'
  vid.controls = true;
  vid.src = URL.createObjectURL(blob);
  document.body.appendChild(vid);
  vid.play();

btn.onclick = record;

// taken from pr.js docs
var x, y;

function setup() 
  createCanvas(300, 200);
  // Starts in the middle
  x = width / 2;
  y = height;


function draw() 
  background(200);

  // Draw a circle
  stroke(50);
  fill(100);
  ellipse(x, y, 24, 24);

  // Jiggling randomly on the horizontal axis
  x = x + random(-1, 1);
  // Moving up at a constant speed
  y = y - 1;

  // Reset to the bottom
  if (y < 0) 
    y = height;
  

start recording

ccapture funciona bien con p5.js para lograr el objetivo de registrar lo que se muestra en un lienzo.

Aquí hay una demostración de ccapture trabajando con p5.js. El código fuente viene con la demostración.

Este método no generará videos con retraso porque no está grabando lo que ve en la pantalla, que puede tener retraso. En cambio, escribe cada cuadro en el video y le dice a los videos que se reproduzcan a una velocidad de cuadro fija. Entonces, incluso si se tarda unos segundos en calcular solo un cuadro, el video de salida se reproducirá sin problemas sin mostrar ningún retraso entre los cuadros.

Sin embargo, hay una advertencia. Este método solo funciona con Chrome.

Como especificó en los comentarios que un gif también funcionaría, aquí hay una solución:

A continuación se muestra un boceto p5 de muestra que registra la animación del lienzo y la convierte en un gif, usando gif.js.

Funciona en navegadores compatibles con Web Workers, File API y Typed Arrays.

Proporcioné este código para que pueda tener una idea de cómo usar esta biblioteca porque no se proporciona mucha documentación y me costó mucho descifrarlo.

var cnv;

var gif, recording = false;

function setup() 
    cnv = createCanvas(400, 400);

    var start_rec = createButton("Start Recording");
    start_rec.mousePressed(saveVid);

    var stop_rec = createButton("Stop Recording");
    stop_rec.mousePressed(saveVid);

    start_rec.position(500, 500);
    stop_rec.position(650, 500);

    setupGIF();


function saveVid() 
    recording = !recording;
    if (!recording) 
        gif.render();
    

var x = 0;
var y = 0;

function draw() 
    background(51);
    fill(255);
    ellipse(x, y, 20, 20);
    x++;
    y++;

    if (recording) 
        gif.addFrame(cnv.elt, 
            delay: 1,
            copy: true
        );
    


function setupGIF() 
    gif = new GIF(
        workers: 5,
        quality: 20
    );
    gif.on('finished', function(blob) 
        window.open(URL.createObjectURL(blob));
    );

Más información :

Este boceto comienza a grabar fotogramas cuando haces clic start_rec y se detiene cuando golpeas stop_rec, en su boceto es posible que desee controlar las cosas de manera diferente, pero tenga en cuenta que addFrame solo agrega un marco al gif, por lo que debe llamarlo en el draw función para agregar varios marcos, puede pasar en un ImageElement, a CanvasElement o un CanvasContext junto con otros parámetros opcionales.

En el gif.on función, puede especificar una función de devolución de llamada para hacer lo que quiera con el gif.

Si desea ajustar la configuración del gif, como quality, repeat, background, Usted puede leer más aquí. ¡Espero que esto ayude!

Si guardas algún recelo y capacidad de arreglar nuestro noticia puedes escribir una nota y con gusto lo interpretaremos.

---

---

Utiliza Nuestro Buscador