个人中心
gpt4 book ai didi

javascript - 后端服务器端使用Nodejs进行动画渲染

转载 作者：太空宇宙 更新时间：2023-11-04 01:35:29 25 4
gpt4 key购买 nike

我使用 create js 和 ffmpegserver.js 创建了简单的动画。

ffmpegserver.js。

这是一个简单的 Node 服务器和库，它将 Canvas 帧发送到服务器并使用 FFmpeg 压缩视频。它可以独立使用，也可以与 CCapture.js 一起使用。

这里是仓库:video rendering demo .

在 public 文件夹中，我有演示，例如 test3.html 和 test3.js

测试3.html

<!DOCTYPE html>
<html>
<head>
    <title>TweenJS: Simple Tween Demo</title>
<style>

canvas {
          border: 1px solid #08bf31;
          justify-content: center;
          display: flex;
          align-items: center;
          margin: 0px auto;
          margin-bottom: 40px;
      }

      a {
        width: 150px;
        height: 45px;
        background: red;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 300px;
        color: white;
      }
      #container{
        flex-direction: column;
        justify-content: center;
        display: flex;
        align-items: center;
        margin: 0px auto;
      }
    #progress{
        margin: 30px;
    }
    #preview{
        margin: 40px;
        width: 150px;
        height: 45px;
        background: deepskyblue;
        color: white;
        border: none;
        border-radius: 300px;
    }


</style>

</head>
<body onload="init();">

<div>

<div id="container">
        <h1>Simple Tween Demo</h1>
    <canvas id="testCanvas" width="500" height="400"></canvas>
    <div id="progress"></div>
</div>
</div>
<script src="http://localhost:8081/ffmpegserver/CCapture.js"></script>
<script src="http://localhost:8081/ffmpegserver/ffmpegserver.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.js"></script>
<script src="test3.js"></script>
</body>
</html>

Test3.js

/* eslint-disable eol-last */
/* eslint-disable no-undef */
/* eslint-disable quotes */
var canvas, stage;
    function init() {
        var framesPerSecond = 60;
        var numFrames = framesPerSecond * 5; // a 5 second 60fps video
        var frameNum = 0;

        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("Download"));
          var container = document.getElementById("container").insertBefore(a, progressElem);

        }

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


        canvas = document.getElementById("testCanvas");
        stage = new createjs.Stage(canvas);
        var ball = new createjs.Shape();
        ball.graphics.setStrokeStyle(5, 'round', 'round');
        // eslint-disable-next-line quotes
        ball.graphics.beginStroke('#000000');
        ball.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
        ball.graphics.setStrokeStyle(1, 'round', 'round');
        ball.graphics.beginStroke('#000000');
        ball.graphics.moveTo(0, 0);
        ball.graphics.lineTo(0, 50);
        ball.graphics.endStroke();
        ball.x = 200;
        ball.y = -50;
        createjs.Tween.get(ball, {loop: -1})
            .to({x: ball.x, y: canvas.height - 55, rotation: -360}, 1500, createjs.Ease.bounceOut)
            .wait(1000)
            .to({x: canvas.width - 55, rotation: 360}, 2500, createjs.Ease.bounceOut)
            .wait(1000)
            .to({scaleX: 2, scaleY: 2}, 2500, createjs.Ease.quadOut)
            .wait(1000)
        stage.addChild(ball);
        createjs.Ticker.addEventListener("tick", stage);


        function render() {
            requestAnimationFrame(render);
            capturer.capture( canvas );

            ++frameNum;
            if (frameNum < numFrames) {
            progressNode.nodeValue = "rendered frame# " + frameNum + " of " + numFrames;
            } else if (frameNum === numFrames) {
            capturer.stop();
            capturer.save(showVideoLink);
            }
        }

        render();
}

一切正常，如果需要，您可以通过克隆存储库自行测试。

现在动画渲染发生在客户端，我希望这个动画渲染发生在后端

我需要更改什么才能使用 Nodejs 在后端服务器端渲染此动画？任何帮助或建议将不胜感激。

最佳答案

由于您在 Canvas 中完成所有动画，因此可以使用 node-canvas在 Node.js 中执行相同的操作。 (不过，您必须仔细检查 create.js 是否也可以在 Node.js 中工作。如果不能，请查找另一个库或自己编写这些例程)。

将 ffmpeg 生成到它自己的进程中，通过管道接受输入(ffmpeg -i - -f rawvideo -pix_fmt rgba 等。根据您使用的服务器环境，管道可能会有所不同)。绘制每一帧后，使用 canvas.getContext('2d').getImageData(0, 0, width, height).data 提取图像数组，并将结果通过管道传输到 ffmpeg。

关于javascript - 后端服务器端使用Nodejs进行动画渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54733131/

25 4 0
文章推荐： node.js - 如何使用nodeJs修复 "Oracle Client library is at version 0.0 but must be at version 11.2 or higher"
文章推荐： c - 尝试更改链表节点中的数据
文章推荐： python - python线程中的无限循环
文章推荐： python - 获取 ConfigObj 以引用字符串
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com