ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5ではgetUserMediaを使ってWebカムにアクセスできるのは良く知られています。しかしデータの入力元は他にも考えられます。その一つがディスプレイです。画面に表示されている内容は確かに出力データになるでしょう。

そんな画面の内容をキャプチャできる機能が最新のGoogle Chrome(35以上)から登場しています。その実験とも使い方を紹介するのがJSCaptureです。

JSCaptureの使い方

まず最初にGoogle Chromeの設定を有効にする必要があります。

設定を有効にしたら再起動しましょう。
設定を有効にしたら再起動しましょう。

まずはキャプチャです。JSCaptureのサイトで実際に試すことができます。キャプチャをクリックするとダイアログが出ます。

画面共有の確認が出ますので、はいを押します。
画面共有の確認が出ますので、はいを押します。

見事キャプチャされました。Downloadを押して画像として保存できます。
見事キャプチャされました。Downloadを押して画像として保存できます。

次にレコーディングです。結構負荷があります。
次にレコーディングです。結構負荷があります。

こちらもちゃんと録画できました。
こちらもちゃんと録画できました。

動画はWebm形式で保存されます。VLCなどで再生ができます。
動画はWebm形式で保存されます。VLCなどで再生ができます。

スクリーンキャプチャはGoogleハングアウトなどで画面共有するのに使われるのではないかと思います。とは言え技術は共通なものであって同じように画面共有を使って何ができるのか考えてみるのは面白そうです。

JSCaptureはJavaScript/HTML5製のオープンソース・ソフトウェア(MIT License)です。

JSCapture

mgechev/jscapture

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2