先日、旭川オープンソースコミュニティで勉強会がありました。
内容は「0から始めるAjax」ということでライトな話ではありましたが、実際にウェブ制作をしている方の話を聞けたのでとてもよかったです。
私もまたなにかしらネタを作って発表したりさせていただけたらなぁ、と思います。
というわけで、せっかくajax(主にjquery)について聞いてきたので何か作ってみようと思い、mjpg_streamerと絡めてやってみました。
題して 「 AAストリーミング 」 (`・ω・´)
こんな感じになりました。
左側が通常のストリーミング映像で、右側がその映像をAAに変換してブラウザで表示している様子。
どうやったかは続きにメモ。
AAストリーミング
ストリーミングの映像をAAに変換してブラウザで閲覧する(`・ω・´)
概要
ajax(jquery)を(むりやり)利用して、ウェブカメラの映像をアスキーアートに変換し、ブラウザにそれっぽく表示する。
準備
- Webカメラ
- mjpg_streamer
- netpbm
- ウェブサーバ(apacheなど)
やり方
簡単に
- mjpg_streamerをインストールしてストリーミングできるようにする。
- mjpg_streamerのoutput_fileプラグインを使ってJPEG出力する。
- JPEGファイルからnetpbmを利用してjpegファイルをAAのテキストに変換するスクリプトを作る。
- output_fileプラグインのコマンドオプションに上記のスクリプトを指定する。
- htmlファイルを作成して、ブラウザから閲覧できるようにする。
- jqueryで、$.getで、上記で出力したAAのテキストを連続して読み込む。
結果
結果は上の動画の通りです。
某くまさんは割と認識できますが、映像がごちゃっとしてる場合は、もうさっぱりわかりません。
今回はmjpg_streamerのoutput_fileプラグインで出力された画像に対してnetpbmコマンドを使いましたが、mjpg_streamer内で映像データを直接AA変換して標準出力に出力したりすることもできるはずです。
それができると、端末上でwebカメラの映像をなんとな〜く確認したりできて面白い気がします。
メモ
mjpg_streamerの起動スクリプト
[bash]
#!/bin/bash
export LD_LIBRARY_PATH=`pwd`
./mjpg_streamer
-i "input_uvc.so
-d /dev/video1
-r 320×240
-f 10
-y -n"
-o "output_http.so
-p 11080
-w ./www"
-o "output_file.so
-f /share/tmp/
-d 100
-c $LD_LIBRARY_PATH/image_to_aa.sh"
[/bash]
output_file.soに指定するスクリプト(JPEGからAAへの変換)
[bash]
#!/bin/bash
OUTPUT_FILE=/var/www/aa/aa.txt
jpegtopnm $1 | ppmtopgm | pnmscale -width 158 | pgmnorm | pgmtopbm | pbmtoascii -2×4 > $OUTPUT_FILE
[/bash]
AAストリーミングを閲覧するページ
[html]
<html>
<head>
<title> test aa </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
loadAA = function(){
$.get("/aa/aa.txt", function(data){
$("#aa").html($("<div>").text(data).html());
});
setTimeout("loadAA()",100);
}
setTimeout("loadAA()", 100);
})
</script>
</head>
<body>
<pre id="aa" style="font-size:10px;"></pre>
</body>
</html>
[/html]