トップページ | 全エントリー一覧 | RSS購読

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック
トラックバック送信先 :
コメント

HTML5とJavaScriptでQRコード読み取り駆動アプリ

この投稿はHTML5 Advent Calendar 2012の5日目の投稿です。

Chrome 21が夏にリリースされて、普通のStable版でもWebRTCが使えるようになりました。

そこで、

Webカメラで読み取ったQRコードの画像をデコードして、音楽を奏でるWebアプリを作ってみました。
HTML5 と Web カメラで QRコード 読み取り

HTML5が絡むのはWebRTC(Webカメラ)の読み取りの他は、Video、Canvas、Audioと基本的なヤツだけなんですが、
Flashを使わなくても、こんなのできるよ、ということで。


処理の流れは、こんな感じです。

①WebRTC初期化(Webカメラのみ要求)
②Video要素のSrcにWebRTCのメディアストリームを設定
③VideoのキャプチャをCanvasに転写
④CanvasのバイトデータをZXing(QRデコーダ)に渡す
⑤ZXingからデコードした文字列メッセージを受け取る
⑥メッセージに対応した音をAudio要素で鳴らす


順番に処理を追ってみましょう。

①WebRTC初期化(Webカメラのみ要求)
②Video要素のSrcにWebRTCのメディアストリームを設定


ここはonload時の初期化です。

getUserMediaの引数は、文字列かオブジェクトかで仕様が揺れてましたが、オブジェクトで統一されました。




ちなみに、第一引数のオブジェクトにtoStringメソッドを実装して、"video,audio"とか返せれば、下位互換を保てるそうです。
こんな感じですね。



③VideoのキャプチャをCanvasに転写

Videoの表示内容をCanvasに移して加工するのは、定番ですね。





④CanvasのバイトデータをZXing(QRデコーダ)に渡す
⑤ZXingからデコードした文字列メッセージを受け取る



Canvasのバイト配列のデータを、ZXingでごにょごにょしてもらいます。
ZXingのJavaScriptの移植版がなかったので、C#版を元に、Script#の力を借りて、JavaScriptに変換しました。
もっさりしないか不安でしたが、予想外に動作が速くてびっくりです。
(変換サイズに上限があったようで、QR以外のコードを削り落としてます。最新版だと直ってると良いなぁ)






作ってみて、正直、ZXingを動くようにするのが一番苦労しました。
マルチバイト文字のバイナリ値を文字列に戻すのは諦めました。

なんだか、ほとんどHTML5と関係ないというか、初歩的なことしか使ってないですが、気にしない!


スポンサーサイト
トラックバック
トラックバック送信先 :
コメント

プロフィール

とむころり

Author:とむころり
24時間システムエンジニア。研究開発など何でも屋を担当。知的でおもてなし精神に満ちたシステム(サービス)が作りたい。
@tomcat_ch

最新記事

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

検索フォーム

RSSリンクの表示

リンク

ブロとも申請フォーム

QRコード

QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。