LoginSignup
29
27

More than 5 years have passed since last update.

Canvasに描画するとWebM動画を作ってくれる「Whammy」を使ってみた

Last updated at Posted at 2012-12-26

とりあえずChromeで動かすことができたので、そのメモ

準備

フレームレート決めてNewする

var video = new Whammy.Video(15);

WebMの動画に入れたいシーンの登録

勝手にCanvasに描画したものを記録するわけではなく、
プログラムで任意のタイミングで、フレームを追加する必要があります。

Canvasから取得したContextを追加

ctx = canvas.getContext('2d');
video.add(ctx);

WebMを作成する

createObjectURLでURLを作り、このURLをVideoタグのsrcに指定すると
はい出来上がり!

var output = video.compile();
var url = webkitURL.createObjectURL(output);
document.getElementById('videoItem').src = url;

2017年10月 追記*

ということで、createObjectURLは廃止予定だそうです。

が、2017/10/26現在 Whammyの公式のリポジトリでは、とくにこれに対応するなどの話もなさそうな気配。。。

Jsdo.itで実際に動くサンプル

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

Whammyのサイト

Whammy

関連記事

29
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
27