デスクトップを録画するアプリを書いた #JavaScript

手軽にデスクトップ（or ウィンドウ）を録画できるアプリが欲しかった
Photon を使ってみたかった
Electron 楽しい

以上の動機で書いてみました。Rec って名前です（てきとー）。レポジトリはこちら。Mac であればバイナリを置いてあります。Windows は試していないです。

使い方

アプリを起動するとデスクトップとウィンドウの一覧がサイドバーに並ぶので、録画したいものをクリックしてから、カメラアイコンをクリックで録画開始です。止めるときは停止アイコンですね。仮想デスクトップをお使いの場合は、対象のデスクトップにアプリを移動して、右上のリフレッシュボタンをクリックです。

停止アイコンをクリックで録画された webm がダウンロードできますので、あとはご自由にどうぞ。

中身

Electron v0.36.0 から desktopCapturer モジュールが使えるようになりました。これを利用しています。

var desktopCapturer = require('electron').desktopCapturer;

desktopCapturer.getSources({
  types: [
    'window',
    'screen'
  ]
}, function(error, sources){
  if (error) {
    return;
  }

  console.log(sources);
});

sources の中にデスクトップ（or ウィンドウ）の ID、名前、サムネイルが入っています。録画で必要になるのは ID です。

navigator.webkitGetUserMedia({
  audio: false,
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: sources[n].id,
      minWidth: 580,
      maxWidth: 580,
      minHeight: 545,
      maxHeight: 545
    }
  }
}, function(stream){
  var video = document.createElement('video');
  document.body.appendChild(video);
  video.src = window.URL.createObjectURL(stream);
  video.play();
});

chromeMediaSourceId へ sources に入っているデスクトップ（or ウィンドウ）の ID を渡してあげます。で、コールバックでストリームが返却されてくるので、<video/> を作ってあげて src へ流し込めば OK です。

ちなみに、この録画アプリ自体を選択すると合わせ鏡になりますので注意してください。

// frames に canvas で描いた画像が入っている
var webm = Whammy.fromImageArray(frames, 1000 / 60),
  a = document.createElement('a'),
  click = document.createEvent('MouseEvents');

a.href = window.URL.createObjectURL(webm);
a.download = Date.now() + '.webm';
click.initEvent('click', false, true);
a.dispatchEvent(click);

ファイルへの書き出しは Whammy を使っています。<video/> で再生しながら、<canvas/> へ書き出して、それを一枚一枚配列に格納しています。録画が停止されたら、最後に Whammy で webm にします。あとは <a/> 作って href へ window.URL.createObjectURL してあげた webm を入れれば OK ですね。

まとめ

手軽に録画できるようになりました。まだまだ録画サイズの指定など、細かい所ができていないのでちょこちょこ手を加えていこうと思います。おしまい。