未捕获的引用错误：CCapture 未定义？

Question

我有一个简单的应用程序来创建画布并渲染它。我在我的应用程序中使用 capture js 和 FFmpeg 模块来转换视频，但是当我运行该应用程序时，出现以下参考错误：

Uncaught ReferenceError: CCapture is not defined
    at test.js:67`

这是 test.js：

(function() {
  "use strict";

  var framesPerSecond = 60;
  var numFrames = 20; //framesPerSecond * 60 * 2;
  var thickness = 100;
  var speed = 4;
  var frameNum = 0;

  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  canvas.width = 1280;
  canvas.height = 720;

  var progressElem = document.getElementById("progress");
  var progressNode = document.createTextNode("");
  progressElem.appendChild(progressNode);

  function onProgress(progress) {
    progressNode.nodeValue = (progress * 100).toFixed(1) + "%";
  }

  function showVideoLink(url, size) {
    size = size ? (" [size: " + (size / 1024 / 1024).toFixed(1) + "meg]") : " [unknown size]";
    var a = document.createElement("a");
    a.href = url;
    var filename = url;
    var slashNdx = filename.lastIndexOf("/");
    if (slashNdx >= 0) {
      filename = filename.substr(slashNdx + 1);
    }
    a.download = filename;
    a.appendChild(document.createTextNode(url + size));
    document.body.appendChild(a);
  }

  var capturer = new CCapture( {
    format: 'ffmpegserver',
    //workersPath: "3rdparty/",
    //format: 'gif',
    verbose: false,
    framerate: framesPerSecond,
    onProgress: onProgress,
    //extension: ".mp4",
    //codec: "libx264",
  } );
  capturer.start();

  function drawLines(ctx) {
    for (var xx = -canvas.width; xx < canvas.width; xx += 2) {
      var l = (xx - (-canvas.width)) / (canvas.width * 2);
      ctx.beginPath();
      ctx.moveTo(xx, -canvas.height);
      ctx.lineTo(xx,  canvas.height);
      ctx.strokeStyle = "hsla(" + ((l * 360 * 24) % 360) + ",100%,50%,0.5)";
      ctx.stroke();
    }
  }

  function render(time) {
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "#FFF";
    for (var xx = 0; xx < canvas.width + thickness * 2; xx += thickness * 2) {
      var x = xx - (frameNum * speed % (thickness * 2));
      ctx.fillRect(x, 0, thickness, canvas.height);
    }

    ctx.save();
    ctx.globalCompositeOperation = "difference";

    ctx.font = "400px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(frameNum, canvas.width / 2, canvas.height / 2);


    ctx.save();
    ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
    ctx.rotate(frameNum * 0.01);
    ctx.translate(canvas.width * 0.25, 0);
    drawLines(ctx);
    ctx.restore();

    ctx.save();
    ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
    ctx.rotate(frameNum * -0.013);
    ctx.translate(canvas.width * 0.37, 0);
    drawLines(ctx);
    ctx.restore();

    ctx.restore();

    capturer.capture(canvas);

    ++frameNum;
    if (frameNum === numFrames) {
      capturer.stop();
      capturer.save(showVideoLink);
    } else {
      requestAnimationFrame(render);
    }
  }
  requestAnimationFrame(render);
}());

Answer 1

在引用 test.js 之前，请检查您是否已在 html 文件中导入了捕获器库。

即

<script src="CCapture.all.min.js"></script>
<script language="javascript" type="text/javascript" src="test.js"></script>

必须按照这个顺序。