#14 やってみよう画像処理『カメラのbyte列をいじる』（Javascriptで）

このエントリーはtech.kayac.com Advent Calendar 2013の14日目のエントリーです。

こんにちは！昨日後頭部をぐにょんぐにょんにされた@shogo82148です。

「Redis::Fastを本番投入したらメモリーリークして3時間半で駆逐された件」でも 書こうと思ってたんですが、悲しくなるだけなので予定変更することにしました。 昨日の記事には「(Androidで)」と書いてあったので、 きっと皆さん続編を期待していらっしゃることでしょう。 ぐにょんぐにょんにされたままでは悔しいので、僕もぐにょんぐにょんにして遊んでみることにします。 お手がるにJavascriptで。

スリットスキャン

昨日の記事より再掲。こんなの作ります。

本日の流れ

  • WebRTCを使ってカメラを扱う
  • Canvasでbyte配列を扱う
  • スリットスキャンにする

WebRTCを使ってカメラを扱う

Javascriptからカメラを扱うには、WebRTC(Web Real Time Communication)というものを使います。 使い方は簡単で、カメラの使用リクエストを出して、帰ってきたオブジェクトをVideo Elementに入れるだけです。 (現在のところgetUserMediaとURLにはベンダープレフィックスが必要です。)

navigator.getUserMedia(
    { video: true }, // constrains: 接続先のデバイス
    function successCallback(stream) { // アクセス成功！
        var video = document.getElementById('video');
        video.src = URL.createObjectURL(stream);
        video.autoplay = true;
    },
    function errorCallback() { // エラー!! }
);

これだけで、カメラの映像をブラウザ上で確認することができます。

Canvasでbyte配列を扱う

Video Element 上で再生されているだけではつまらないので、Canvas上に描画します。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
requestAnimationFrame(function render() {
    context.drawImage(video, 0, 0, width, height);
    requestAnimationFrame(render);
});

Canvas上に描かれたものは getImageData で簡単に取得できます。

var image_data = context.getImageData(0, 0, width, height);
var data = imgage_data.data; // RGBAの形式でbyte列が格納される

スリットスキャンにする

できた！！

おわり

ついJavascriptで遊んでしまいましたが、普段はサーバサイドでPerlいじってます。 Redis::Fastのメモリーリーク直してくれるやさしい人からの プルリクエストをお待ちしてます！

明日は@handlename先輩です。