javascript - 未捕获的 ReferenceError:未定义 CCapture?
问题描述
我有一个简单的应用程序来创建画布并渲染它。我正在使用捕获 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);
}());
解决方案
推荐阅读
- python - 为什么在为 python 3.6 安装 ratfun 包时出现“错误命令错误,退出状态为 1”?
- postgresql - 无法从 pgAdmin 访问数据库
- angular - 如何在 Angular 8 中生成类的方法名称列表?
- apache-kafka - Kafka Connect Hbase 接收器
- excel - Excel 2010 和 2013 (OLEObject) 之间的 VBA 命令不兼容?
- performance - Selenium 中的并行自动化
- javascript - 是否可以通过 Optimizely 自定义代码引用 Tealium 的通用数据对象 (UDO)?
- python - Pandas Dataframe:IndexError:单个位置索引器超出范围
- r - R中nlm-package的时间复杂度?
- react-native - React Native onRegister 事件不起作用(iOS)