UTCamera風な画像をブラウザでできるプラグイン作った。
※WebRTCの機能が対応してて、有効設定されてるブラウザのみで動作します。ご注意ください。
※PC版のChromeなら動きます。
以下にソースを公開してあります。
https://github.com/wakasamasao/bcam/
使い方は以下のソースを参照ください。
https://github.com/wakasamasao/bcam/blob/master/bcam.html
流れとしては
- WebRTCの機能を用いてブラウザがWebCamにアクセスを試みる
-> ブラウザから使用許可を求められるので許可が必要です
- 200ms毎(ブラウザの処理によって遅延することが多い)にカメラ画像を取得
- 10回撮影したら画像を合成しGIFアニメに変換
- base64にエンコードした文字列が返ってくる
という形です。
設定で撮影秒間や回数、ループするしない、フィルムロールのようにコマ撮り写真にするなどいろいろ変更できます。
とりあえず、こんなのが作成できます。
GIFアニメのはループリバースがかかってるため、自然に繰り返してるように見えます。
なお読み込み時のJSですが、GIFアニメ化するかしないかで必要とするプラグイン変わるのですが、
<script src="js/gifencoder/b64.js"></script>
<script src="js/gifencoder/LZWEncoder.js"></script>
<script src="js/gifencoder/NeuQuant.js"></script>
<script src="js/gifencoder/GIFEncoder.js"></script>
に関してはGIFアニメ化するのに必要なライブラリです。読み込まなかったらGIFアニメにはできず、フィルムロールタイプしか生成できません。
パラメータは以下のような感じで設定すると色々変わります。
width:200, // 生成される画像の横幅
height:200, // 生成される画像の縦幅
times:10, // 繰り返し回数
timing:200, // 取得タイミング(ms)
type:"animation", // 出力タイプ animation:GIFアニメ , pict:Film roll風
playtiming:100, // GIFアニメの場合の再生スピード
format:"png", // typeでpict指定の場合の出力フォーマット png | jpeg
layout:"horizontal", // 現在使ってないが設定
reverse:true, // アニメーション終了後に逆再生して繰り返しに違和感無いにするかどうか
videoObj:null, // ここにvideo tagのオブジェクトを指定するとそこにカメラ画像を表示
insertvideo:false, // 実行してるdomにキャプチャ用のvideoを表示するかどうか
oncomplete:null, // 終了後のイベント
onend:null, // キャプチャ終了後のイベント
onstart:null, // キャプチャ開始のイベント
onerror:null, // エラー時のイベント
onwarning:null, // 警告時のイベント
万華鏡タイプのエフェクトとか色々やろうとは思ってるんですが頓挫中。
他にフィルムロール状態が縦並びとか正方形とか色々並べ替えたり・・いやなんでもない。
そもそもこれを使ったサービスを先に作れ・・と・・・・・・。ゴフゥ（吐血
あ、アイディアはあるんですよ？つ、作ってたら凝りだして・・いや・・ね・・（汗
