导出p5.js中的视频

Question

我在p5.js中创建一个简单的动画程序.当用户单击"保存"按钮时,我想下载动画视频.

我有一个名为frames每个键被标记的对象frame_1,frame_2依此类推.与每个键关联的值是array构成该帧的线段之一.

我试图想出一种方法来获取这些数据并创建一个mp4视频.p5.j​​s有一个内置的保存功能,我认为可能会有所帮助,但它本身并不是一个完整的解决方案.我可以将每个帧保存为单个图像,然后以某种方式将这些图像拼接在客户端,但我还没有找到解决方案.

任何其他方法也会很棒.唯一的要求是它是客户端完成的.

Answer 1

由于p5.js是基于Canvas API构建的,因此在现代浏览器中,您可以使用MediaRecorder来完成这项工作.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
<button>start recording</button><br>

Answer 2

ccapture与 p5.js 配合得很好，可以实现记录画布上显示内容的目标。

这是使用 p5.js 的 ccapture演示。源代码随演示一起提供。

此方法不会输出延迟视频，因为它不会记录您在屏幕上看到的内容，这可能会延迟。相反，它将每一帧写入视频并告诉视频以固定的帧速率播放。因此，即使只计算一帧需要几秒钟，输出视频也会流畅播放，而不会在帧之间显示任何延迟。

但是，有一个警告。此方法仅适用于 Chrome。