ChromeのコンソールでYoutubeを観るやつ作った

便利

f:id:amagitakayosi:20140507072043g:plain

fand/console-tube · GitHub

何これ

普通にインターネットしてると一日数回、Chromeのデバッグコンソールでyoutube動画見たくなる事がある。

f:id:amagitakayosi:20140507062324p:plain

デバッグ中、「あっYoutube観なきゃｍ，見る必要がある」ってなる。

f:id:amagitakayosi:20140507062339p:plain

おもむろにタイプ

観れた!
音も出る！

使い方

README.md参照。

どうなってｒの

  1. console.tube(url) すると、現在ページに隠しvideo, canvasを追加
  2. 予め立てたexpressサーバにurl渡して、動画をストリームで返す。
  3. canvasにvideo描画
  4. 定期的に console.log("%c", "background: url(" + canvas.toDataURL() + ")"); する

小話

console.imageっていう便利ライブラリあって、真似したかった。
最初、Youtubeから直接動画読み込めないかなーとか頑張ったけど、クロスドメイン的な感じだったりして無理だった。
youtube-dlでサーバにダウンロードし、ffmpegでwebmにエンコしながら、ストリームでクライアントに返してる。

連番画像にしてsocket.ioでやろうとしたけど、無駄な処理増えそうだった。 動画返してクライアントで画像作った方が楽だし、音も出る！

express,

  app.get('/', function(){ stream(res); });

ってやると普通にストリームから返せて便利。

使い道

  • デバッグしてるフリしてモンティパイソンみたり、デバッグしてるフリしてゲーム実況みれる。
  • 仕事しながらヒンディー語の勉強とかできて、効率が二倍になる。
  • 可処分時間が増え、気持ちに余裕ができる。

あと、サーバの方、普通にweb上に立てておいて、メッチャ簡素なサイトと思いきや裏で動画配信してる、みたいな事ができる。

参考