Firefox3のCanvasにFlashが映るのでYouTubeをスライスできるからやった(でもWindowsはだめ)

Twitter / dotimpact: firefox3b4いれたら非互換addonがあるとクラッシュしたというのを見て、今回はバージョンあげるのやめとこうかなと思いながらもMozilla Firefox 3 Beta 4 Release Notesで何が変わったのかを見ていたら

[Improved in Beta 4!] Full page zoom: from the View menu and via keyboard shortcuts, the new zooming feature lets you zoom in and out of entire pages, scaling the layout, text and images, or optionally only the text size. Your settings will be remembered whenever you return to the site.

というのがあって、たぶんこれはCanvasのzoomを使って実現してるんだろうと推測していたので、もしこれでFlashが映るようになっていたらcapture.tumblr.js ブラウザでキャプチャしてtumblrにpostするやつもFlashが映るようになってるかも、と思ってやってみたらFlashが映るようになってるのです！Firefox3になってから試してなかったのでFirefox3であれば映るのかもしれませんが、とにかくFirefox3beta4からCanvasにFlashの中が映るようになりました。でもこれOSXだけ(?)なのかWindowsのFirefox3beta4ではやっぱりCanvasにFlashの中は映りません。FirefoxのFull page zoom機能ではWindowsでもちゃんとFlashがzoomされるので、原理的には映るような気もするけどそもそもfull page zoomはCanvasでできてる、という推測が違うのかな。

それで、もうなにがきっかけだったか忘れちゃったけど、ずっと前からやりたかったTAGIRIみたいにYouTubeの動画を一定時間ごとにキャプチャしてスライスを作る、というのができるようになってうれしい。YouTube – Fujiya & Miyagi Ankle Injuriesを使ってビデオのスライスを作った。上に数ピクセルゴミが入ってるのと、コントローラが入ってるのはてきとうに調整してあげたらなくせるけど面倒なだけでやればできるからそのままにしてある。

1秒に1回でローカルディスクに書くのだとコマ落ちせずにいけるかんじ。

そのあと1秒に1回でcapture.tumblr.jsのコードをちぎって貼ってtumblrにアップロードしてみると、tumblr側がレスポンスを返してくるのに5~10秒くらいかかるのでだんだんリクエストがたまるんだけど、結果的には問題なさそう。

jsでFlashのプレイヤーを操作したり、ビデオの長さを得たりできるとスクリプトで自動的にキャプチャを止められるんだけど、そのへんは詳しくないので手動で止めた。後で調べたら再生時間はswfArgs.lに書いてあった。

480×394のサイズでキャプチャ。87ファイルで35MBになった。PNGでエンコードして1ファイル平均で400kBくらい。jpegだとたぶん1/3くらいのサイズになる。

ためしてないけどYouTubeだけじゃなくて任意のFlashのプレイヤーのやつが撮れるはず。

ダウンロード

使ったJSActionsスクリプト。参考までに。
youtubeのページを開いて再生してる状態で実行すると1秒単位でスライスして /home/kuma/Desktop/miyagi/ にたくさんファイルができる状態になってます。てきとうに書き換えたらtumblrにアップロードされるようにもなる。

tagiru.tumblr.js

APNGと組み合わせる

APNG Edit :: Firefox Add-onsで使われているMozilla2:Image Encoding – MozillaWikiを使えば、これでスライスした画像をそのままAnimation PNGにするとかもできる。理論的には可能だけど実際やったらメモリの都合でできなかったりしそうだけど。

ビデオで、特定の部分だけ切り出してそこだけ動画にしてpostする、みたいなのがさくっとできるようになるといいなーと思います。このアプローチじゃ絶対に音が出ないので使えないんだけど。

参考

getBoundingClientRect を翻訳、 getClientRects を更新 – A Better Project＠はてなダイアリー

getBoundingClientRect()を知らなくて困っていたところで助けられました。どうでもいいけどおなじくIE由来でFirefox3で導入されたdocument.activeElementもすごい便利で助けられてます。

プラダを着た悪魔

こないだ、服かわいいなー、これ全部スライスしたいなーと思いながら見てました。

SCRAPBLOG : canvas要素によるWebページのスクリーンショット保存機能

Code snippets:Canvas – MDC