videoconverter.jsを試す

Canvasに描画した画像を動画にするには

何とかして以下のようなfilesを作って呼び出す

worker.postMessage({
      type: "command",
      arguments: args,
files: [
        {
          "name": "input001.png",
          "data": imgArray[index++]
        },
        {
          "name": "input002.png",
          "data": imgArray[index++]
        },
/*** **/
        {
          "name": "input999.png",
          "data": imgArray[index++]
        }
]});

Jsdo.itで動かすには

ffmpeg.jsとworker.jsをjsdo.itのドメインで動かす必要がある。

ファイルアップロードはサイズオーバーでNG

分割すればいいじゃない

1. ファイルを分割する 任意のドロップされたファイルを指定したバイト数でブツ切りにする
2. 既存のJSコードをpngにするヤツでそれぞれを画像化

ツールを作った

• でかいファイルをドロップして1MB以内の複数の画像にする

demoを元に任意の動画を処理するには

sampleVideoDataの中身を任意の対象データにすれば良いだけ この形式はUint8Arrayである必要がある。

worker.jsをJsdo.it向けに改造する

越えられない壁を越える

importScripts('../build/ffmpeg.js');

DOMの使えないワーカー内で評価しないといけないからevalするしかないか。。

worker不用説

function print(text) {
  console.log(text);
  });
}

var message={};
message.files = [
        {
          "name": "input001.png",
          "data": imgArray[index++]
        },
        {
          "name": "input002.png",
          "data": imgArray[index++]
        },
/*** **/
        {
          "name": "input999.png",
          "data": imgArray[index++]
        }
];

var Module = {
      print: print,
      printErr: print,
      files: message.files || [],
      arguments: message.arguments || [],
      TOTAL_MEMORY: message.TOTAL_MEMORY || false
      // Can play around with this option - must be a power of 2
      // TOTAL_MEMORY: 268435456
};

 var result = ffmpeg_run(Module);

関連Jsdo.it作品

• http://jsdo.it/kjunichi/wt2Md

• リアルタイムでレイトレして、GIFに記録するヤツ

• リアルタイムでレイトレして、WebMに記録するヤツ

Emscriptenのファイルの扱い

• Emscriptenでファイルを読み込むソースをJavaScriptに変換するには

Link

• http://bgrins.github.io/videoconverter.js/