プログラマラブルに動画制作ができるnpmパッケージのediltyを使ってみた #JavaScript

プログラマルブに動画制作ができるnpmパッケージ

CLIでの操作でも出来るし、functionを渡してあげればプログラマラブルに動画制作できてる https://t.co/v6xp958tT1
— Nash⚡️ReactNative書いてる (@snamiki1212) April 28, 2020

概要

GitHub - mifi/editly: Slick, declarative command line video editing

Editly is a tool and framework for declarative NLE (non-linear video editing) using Node.js and ffmpeg. Editly allows you to easily and programmatically create a video from set of clips, images and titles, with smooth transitions between and music overlaid.

⇒意訳：宣言的プログラミングで動画制作が出来るツール

Installation

version: 0.2.0 (1系にも来てないのでプロダクションレベルじゃないかも）

Requirementsを見ると、他にもffmpegとffprobeなるものが必要みたいです。

ffmpeg

ffmpegとは動画と音声を記録・変換・再生するためのフリーソフトウェアである。
FFmpeg - Wikipedia

ffprobe

ffprobeとはマルチメディアストリーム情報を解析し、人間もしくは機会が理解出来る形式で出力するツールです。
ffprobeはffmpegに含まれているのでffmpegをインストールします。
CompilationGuide/macOS – FFmpeg

ffmpegは動画系でよく使われる優秀なツールみたい、知らなかった。

ffmpegさえ入れればffprobeも一緒に入るみたいなので、ffmpegを入れます。

$ brew install ffmpeg

$ ffmpeg -version
ffmpeg version 4.2.2 Copyright (c) 2000-2019 the FFmpeg developers
...

edilty本体を入れます。

$ npm i -g editly

これで準備完了。

Hello WorldでText2Video

いざHelloWorldな動画をジェネレートしてみます。
ここでは「テキストを元に動画を生成」という観点で見ていきます。

CLI + オプション

$ editly title:"Hello World" --out ./output.gif
320x320 10fps
createFrameSource linear-gradient clip 0 layer 0
createFrameSource title clip 0 layer 1
  0%  25%  50%  75% Done with transition, switching to next clip
No more transitionFromClip, done
Done. Output file can be found at:
./output.gif
# これで作成完了

$ open -a 'Google chrome' ./output.gif # gifをchromeで開くだけです

output.gif

（ちょっとわかりにくいですが、gifで動画になってます）

gifが作成できた。

CLI + JSON5

CLIのオプションで指定していた内容をJSON5にしていきます。

my-video.json5

{
  outPath: "./result.gif",
  clips: [
    {
      duration: 2,
      layers: [
        {
          type: "title-background",
          text: "こんにちは、世界",
        },
      ],
    },
  ],
}

editly my-video.json
# > output.gif

gifができた。これで動画をJSONで管理できるようになりました。

TypeScript (or JavaScript)

CLIで実行していましたが次はJavaScriptで実行していきます。

index.js

const editly = require('editly')

const spec = {
  outPath: "./outputByLib.gif",
  width: 640,
  height: 640,
  clips: [
    {
      duration: 3,
      layers: [
        {type: "rainbow-colors"},
        {
          type: "subtitle",
          text: "JSで作られた",
        }
      ],
    },
  ],
}

editly(spec)
  .then(() => {console.log('finish')})
  .catch(err => console.error(err))

$ yarn init 
$ yarn --dev editly
$ node index.js
# => outputByLib.gif

gif が出来た。これで動画をプログラマティックに生成できるようになりました。

forで回せば簡単に複数の動画も作成できるし、動画の設定自体はJSON5で持たせておいてimportしてくることもできますね。

ちなみに、CLIで作った動画と違って背景が虹色になってたり、サイズが大きいのはJSONにて設定を入れてるからです。

他にもどんな感じで動画を作成できるか

詳細はこちらのexample参照です。

editly/examples at master · mifi/editly · GitHub

動画と動画をつなぎ合わせたり、音声を入れたり、フェード効果などもつけられます。

特に、JavaScriptのコードを呼び出すことでプログラマラブルに動画ジェネレートできるのはアツいです。

おわりに

きっかけ2020-04-29 0:20 JST時点でHacker Newsの上位にediltyというパッケージが上がってきたのでたまたま見つけました。

最近、「すっごい簡単なテキストベースの動画を、サクッと作成したいなー」という欲求があったので、自分のやりたいことを実現できる良いツールを見つけました。

これで動画をコード管理することが出来るのでエンジニア的には使い勝手の良いツールだと思います。