程序员经验分享-hwhale

如何通过服务器端node.js运行CCapture？

2024-02-26

我试着跑CCapture.js https://github.com/spite/ccapture.js via node.js基本代码（用于测试）为

global.navigator = {userAgent: 'node.js'};
global.window = new Object();

var ccaptureJs = require("ccapture.js");

但是当我执行该文件时node cap.js（上面的代码）在终端中，它给出了错误：

$ node cap.js
/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1
(function (exports, require, module, __filename, __dirname) { function download(t,e,n){function i(t){var e=t.split(/[:;,]/),n=e[1],i="base64"==e[2]?atob:decodeURIComponent,r=i(e.pop()),o=r.length,a=0,s=new Uint8Array(o);for(a;a<o;++a)s[a]=r.charCodeAt(a);return new m([s],{type:n})}function r(t,e){if("download"in l)return l.href=t,l.setAttribute("download",w),l.innerHTML="downloading...",l.style.display="none",f.body.appendChild(l),setTimeout(function(){l.click(),f.body.removeChild(l),e===!0&&setTimeout(function(){h.URL.revokeObjectURL(l.href)},250)},66),!0;var n=f.createElement("iframe");f.body.appendChild(n),e||(t="data:"+t.replace(/^data:([\w\/\-\+]+)/,d)),n.src=t,setTimeout(function(){f.body.removeChild(n)},333)}var o,a,s,h=window,d="application/octet-stream",u=n||d,c=t,f=document,l=f.createElement("a"),p=function(t){return String(t)},m=h.Blob||h.MozBlob||h.WebKitBlob||p,g=h.MSBlobBuilder||h.WebKitBlobBuilder||h.BlobBuilder,w=e||"download";if

TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.<anonymous> (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:16590)
    at e (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:10557)
    at Object.<anonymous> (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:11348)
    at e (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:10557)
    at Object.<anonymous> (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:19591)
    at Object.<anonymous> (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:19609)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)

您不能直接要求 CCapture。 CCapture 取决于开箱即用的环境。但你可以使用jsdom https://github.com/jsdom/jsdom去模仿它。

为此，您需要：

  1. 安装jsdom：npm i jsdom.
  2. Install node-canvas https://www.npmjs.com/package/canvas as jsdom does not support Canvas API by default.
    • brew install pkg-config cairo libpng jpeg giflib- 安装依赖项（Mac OS，有关其他操作系统说明，请参阅包文档）
    • npm i canvas- 安装包
  3. 现在您可以像这样在后端使用 CCapture （请参阅我的评论）：
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const fs = require("fs");
const _ = require("lodash");

const { window } = new JSDOM(
  `
<body>
    <script src='./node_modules/ccapture.js/build/CCapture.all.min.js'></script>
    <canvas id='animation' width='400' height='200'></canvas>
</body>
`,
  // We need these options to allow JSDOM to require CCapture from node_modules
  { runScripts: "dangerously", resources: "usable" }
);

const document = window.document;

// Do our stuff after DOM is ready.
window.onload = () => {
  const canvas = document.getElementById("animation");
  const ctx = canvas.getContext("2d");

  // Doing some random animation here
  const render = () => {
    ctx.fillStyle = "blue";
    ctx.font = "30px Impact";
    ctx.rotate(_.random(0.1, 0.2));
    ctx.fillText("Awesome!", 50, 100);
  };

  // Framerate for capturer is 1 per second just for example
  const capturer = new window.CCapture({
    format: "png",
    framerate: 1,
    verbose: true
  });

  capturer.start();

  // Doing 3 renders, and capture the canvas
  const interval = setInterval(() => {
    render();
    capturer.capture(canvas);
  }, 1000);

  // Now clearing the interval, stopping capturer
  setTimeout(() => {
    clearInterval(interval);

    capturer.stop();

    // Saving the file using FileReader (from JSDOM) and node.js API
    capturer.save(blob => {
      const reader = new window.FileReader();
      reader.onload = () => {
        const arrayBuffer = reader.result;
        const uint8Array = new Uint8Array(arrayBuffer);

        // Sync for simplicity
        fs.writeFileSync("./images.tar", uint8Array, { encoding: "binary" });
      };

      reader.readAsArrayBuffer(blob);
    });
  }, 4000);
};

上面的脚本生成一个.tar文件与png images:

Caveat:至于现在jsdom不支持webm格式。虽然完美配合png.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

nodejs

如何通过服务器端node.js运行CCapture？ 的相关文章

随机推荐

热门标签