mixlab-nodes/webApp/p5_export/p5-widget/preview-frame.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Preview</title>

<body>
  <!-- <script src="./p5.js"></script> -->
  <script src="./src/CCapture.js"></script>
  <script>
    let capturer = new CCapture({
      format: 'png',
      framerate: 60,
      verbose: true
    });


    var capturer_start = (t = 1) => {
      if (frameCount === t && capturer) {
        capturer.start();
      }
    }


    var capturer_end = (t = 24) => {
      // console.log(frameCount < t, frameCount, t)
      if (frameCount < t && capturer) {
        capturer.capture(canvas, t);
      } else if (capturer) {
        capturer.save((frames) => {
          window.parent.postMessage(
            {
              frames,
              from: 'p5.widget',
              status: 'save',
              encoder: true
            },
            '*'
          )
        });
        capturer.stop();
        capturer = null;
      }
    }

    // 监听来自iframe的消息
    window.addEventListener('message', (event) => {
      const data = event.data;
      if (data.from === 'p5.widget' && data.status === 'stop') {
        window.location.reload()
      }
    });

  </script>

  <script src="./preview-frame.bundle.js"></script>
</body>