#LGTM Camera on Web を作って #ABPro で発表した
ABPro というイベントがあり，そこで LGTM Camera on Web を作って発表した．
ABPro とは
「普通じゃない」プログラム 発表会である．
LGTM Camera とは
LGTM とは
Looks good to me.
LGTM Camera とは
LGTM な GIF 画像が撮れる．
問題点
わたしはAndroidしか持ってない
LGTM Camera on Web とは
ブラウザで動く LGTM Camera
LGTM な GIF 画像が撮れる．
https://LGTM.mikumiku.moe で使える．
（ただし，Chrome に限る）
さらに詳細
- LGTM な GIF 画像をカメラ映像から作れる
呑んでる pic.twitter.com/eKewCVWS5f
— 3846masa (@3846masa) September 24, 2016- 入れる文字も変えられる
- モードを変えると，シンゴジラっぽいのも撮れる
ミラノ風ドリア pic.twitter.com/3wROqj6s7c
— 3846masa (@3846masa) September 25, 2016
問題点
おわりに
せっかくなので使ってください
レポジトリもあるので，PR送ったりIssue送ったりForkしたり好きにしてください．
技術的な話を雑に書く
- iOS では（2016年9月現在）ブラウザからカメラは使えない
- WebRTC を使うときは adapter を入れるとよい
- yahoo/gifshot を使うと GIF が作れる
- 動画は muaz-khan/RecordRTC で撮った
- gifshot だけでもカメラ映像をGIFにできる
- 調整を入れたかったので動画を作ってから gifshot に投げた
- gifshot の中央揃えはうまく揃わない
textYCoordinateを手動で中央にするtextBaselineはmiddleにする
- シンゴジラっぽくするために明朝体も用意する
- Android には明朝体が入っていない
- シンゴジラ参考資料： https://twitter.com/shota_/status/761088270981697537
- 日本語フォントはサイズが大きいので使う分だけ取る
- 3846masa/Japont で Web フォントを動的に作る
- lodash.debounce で一定時間文字が変わらなければ取得
- フォントは IPAex明朝 で妥協する
- 本明朝EⅡ を使いたかった
- TypeSquare で使えるがお金がないので断念
- 長体と字詰めを gifshot で再現する
- gifshot の Canvas 操作は外から干渉できない
CanvasRenderingContext2D.prototypeを直接弄る
- eligrey/FileSaver.js で GIF を保存させる
- dataURL を Blob にするため，
fetchを通す
- dataURL を Blob にするため，
- ボタンの周りのタイマーを SVG でつくる
- 「ホーム画面に追加」するとアプリになるようにする
