HTML5의 Canvas에서 애니메이션을 만들고 비디오를 내보낼 수있는 도구를 만들었습니다.

HTML5의 Canvas에서 애니메이션을 만들고 비디오 내보낼 수 있는 도구를 만들어 보았습니다.
명령행에서의 내보내기에도 대응하고 있습니다.

기주 b. 코 m / t t 네 t / e s-u ぇ- kan ゔ s s

왜 만들었는가

동적으로 동영상을 생성하고 싶지만 확립된 간단한 방법을 찾지 못했습니다.
Canvas로 만든 애니메이션이 그대로 비디오 내보낼 수 있으면 편하다고 생각했습니다.

만약 다른 간단한 방법을 아는 분이 계시면 꼭 코멘트를 주세요.

기능

JavaScript (HTML5 + Canvas)로 애니메이션을 만들 수 있습니다

브라우저에서 애니메이션을 쉽게 확인할 수 있습니다 (코드 수정 => 애니메이션 확인의 루프가 편합니다).

만든 애니메이션을 mp4에 내보낼 수 있습니다 (ffmpeg에 의존)

명령 줄에서 비디오를 내보낼 수 있습니다 (PhantomJS 사용)

명령 줄에 변수를 전달하여 비디오 내보내기 내용을 제어 할 수 있습니다.

음성 재생 대응

애니메이션 작성 예

구성은 간단하고 init() 과 update() 라는 함수를 작성해, 필요한 초기화와 애니메이션을 기술할 뿐입니다.
FabricJS를 사용합니다.

animation/sample.js

var rect = null;
animation.params = {
  size: 50
}
animation.init = function(config) {
  //this.audio.setSource('sample.mp3')
  config.width = 320
  config.height = 240
  config.frameRate = 24
  config.movieLength = 5

  // 矩形オブジェクトを作る
  rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: this.params.size,
    height: this.params.size
  });
  this.canvas.add(rect);

  var canvas = this.canvas
  fabric.Image.fromURL('img/bg_sample01.jpg', function(img) {
    canvas.setBackgroundImage(img);
    canvas.renderAll();
  });
}

animation.update = function(key) {
  //if ( key == 1 ) {
  //  this.audio.play()
  //}

  rect.left = 100 + key;
  rect.angle = key;
}

애니메이션 확인

node src/server.js로 서버를 시작하고 http://localhost:8000/을 열면 애니메이션을 확인하고 내보내는 화면이 표시됩니다.

명령줄에서 비디오 내보내기

이런 식으로 커맨드 라인에서 비디오 내보낼 수 있습니다.

phantomjs record.js

매개변수를 지정하여 비디오 내보내기

phantomjs record.js param.json

param.json

{
  "script": "sample.js",
  "params": {
    "size": 100
  }
}