Fatal编程技术网
  • javascript/
  • 如何使用nodejs在服务器端将javascript动画转换为视频？

如何使用nodejs在服务器端将javascript动画转换为视频？

javascript node.js html animation ffmpeg

如何使用nodejs在服务器端将javascript动画转换为视频？,javascript,node.js,html,animation,ffmpeg,Javascript,Node.js,Html,Animation,Ffmpeg,我有一个应用程序，用户可以创建动画，我想能够将这些动画转换为服务器端的视频，所以用户可以保存和共享它们，如YouTube等 到目前为止，我已经使用create js和ffmpegserver.js创建了动画 ffmpegserver.js 这是一个简单的节点服务器和库，它向服务器发送画布帧，并使用FFmpeg压缩视频。它可以单独使用，也可以与CCapture.js一起使用 Test3.html <!DOCTYPE html> <html> <head>

我有一个应用程序，用户可以创建动画，我想能够将这些动画转换为服务器端的视频，所以用户可以保存和共享它们，如YouTube等

到目前为止，我已经使用create js和ffmpegserver.js创建了动画

ffmpegserver.js

这是一个简单的节点服务器和库，它向服务器发送画布帧，并使用FFmpeg压缩视频。它可以单独使用，也可以与CCapture.js一起使用

Test3.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>


TweenJS：简单的Tween演示
帆布{
边框：1px实心#08bf31；
证明内容：中心；
显示器：flex；
对齐项目：居中；
保证金：0px自动；
边缘底部：40px；
}
a{
宽度：150px；
高度：45px；
背景：红色；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：300px；
颜色：白色；
}
#容器{
弯曲方向：立柱；
证明内容：中心；
显示器：flex；
对齐项目：居中；
保证金：0px自动；
}
#进展{
利润率：30像素；
}
#预演{
利润率：40像素；
宽度：150px；
高度：45px；
背景：深蓝；
颜色：白色；
边界：无；
边界半径：300px；
}
简单吐温演示
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();
}

/*eslint禁用上次下线*/
/*eslint禁用无未定义*/
/*eslint禁用引号*/
油画、舞台；
函数init（）{
var framesPerSecond=60；
var numFrames=framesPerSecond*5；//5秒60fps的视频
var frameNum=0；
var progressElem=document.getElementById（“进度”）；
var progressNode=document.createTextNode（“”）；
progressElem.appendChild（progressNode）；
功能进展（进展）{
progressNode.nodeValue=（进度*100）.toFixed（1）+“%”；
}
功能showVideoLink（url、大小）{
大小=大小？（“[大小：”+（大小/1024/1024）.toFixed（1）+“meg]”：“[未知大小]”；
var a=document.createElement（“a”）；
a、 href=url；
var filename=url；
var slashNdx=filename.lastIndexOf（“/”）；
如果（slashNdx>=0）{
filename=filename.substr（slashNdx+1）；
}
a、 下载=文件名；
a、 appendChild（document.createTextNode（“下载”）；
var container=document.getElementById（“container”）.insertBefore（a，progressElem）；
}
var capturer=新的CCapture（{
格式：“ffmpegserver”，
//workersPath:“第三方/”，
//格式：'gif'，
//没错，
帧速率：帧秒，
onProgress:onProgress，
//扩展名：“.mp4”，
//编解码器：“libx264”，
} );
capturer.start（）；
canvas=document.getElementById（“testCanvas”）；
stage=newcreatejs.stage（画布）；
var ball=new createjs.Shape（）；
球.图形.固定行程（5，'圆形'，'圆形'）；
//eslint禁用下一行引号
ball.graphics.beginStroke（'#000000'）；
ball.graphics.Beginll（#FF0000”）.drawCircle（0,0,50）；
球.图形.设定行程（1，'圆形'，'圆形'）；
ball.graphics.beginStroke（'#000000'）；
ball.graphics.moveTo（0,0）；
球。图形。线条图（0，50）；
ball.graphics.endStroke（）；
球x=200；
ball.y=-50；
createjs.Tween.get（ball，{loop:-1}）
.to（{x:ball.x，y:canvas.height-55，旋转：-360}，1500，createjs.Ease.bounceOut）
.等等（1000）
.to（{x:canvas.width-55，旋转：360}，2500，createjs.Ease.bounceOut）
.等等（1000）
.to（{scaleX:2，scaleY:2}，2500，createjs.Ease.quadOut）
.等等（1000）
舞台。儿童（球）；
createjs.Ticker.addEventListener（“勾号”，阶段）；
函数render（）{
请求动画帧（渲染）；
捕获者。捕获（画布）；
++frameNum；
if（frameNum
一切正常，如果你想克隆回购协议，你可以自己测试

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

要使用Nodejs在后端服务器端进行动画渲染，我需要做哪些更改？欢迎提供任何帮助或建议。

您需要使用node.js和express（或任何类型的服务器Api Handler）构建Rest Api

。获得outpot动画后，必须向node.js服务器发出ajax post方法请求，并让服务器处理CCapture.js

服务器中的主页面看起来像这样

var app = require('express')();
var bodyParser = require('body-parser');
var upload = multer(); // for parsing multipart/form-data

app.post('/profile', function (req, res, next) {
  console.log(req.body);
  res.json(req.body);
});
还要检查NPM以了解node.js的更多包