We Are JavaScripters! @18th 登壇資料 #wejs

1. ブラウザからカメラを呼び出
し手書きのサインを読み取っ
て認証するぞ @kawasako
We Are JavaScripters! @18th

2. @kawasako3
かわさこ

3. 今日は
コード出てきません！

4. 発端

5. ロゴステッカー作ろうぜ

6. せっかく配るなら何か
遊びたい 🤔

7. また来たいな∼と
思ってもらいたい

8. 塚田○場

9. ステッカーが会員証に
なったらおもろくない？

10. でも印刷時にバーコー
ドを刷るというのも…

11. 署名だ

12. ストーリー
• ステッカーを配る
• ステッカーにマジックでサインしてもらう
• サインしたステッカーをカメラで読み取って
ユーザー名を登録してもらう

13. ストーリー
• ステッカーをカメラ読み取ったらユーザー名がわかる！
• 受付が簡単になる とか
• 参加者同士でフレンド登録できる？ とか
• それで前に会った人が今日参加してるかわかる とか
• ブラウザで実現すればアプリを入れてもらう必要もない！

14. やるぞ 🙄

15. 要素技術
• カメラ MediaDevices.getUserMedia
• 画像処理 OpenCV (wasm-build)
• 二階調化
• 輪郭検出
• 透視変換
• 画像モーメント

16. MediaDevices.getUserMedia

17. MediaDevices.getUserMedia
• カメラ呼び出すやつ
• streamが得られるのでmediaElementに渡す
• 一旦canvasにdrawImageすると好きに加工できる

19. OpenCV (wasm-build)

20. OpenCV (wasm-build)
• 画像処理するやつ
• 古くからあるので知見が豊富
• emscriptenでcompileする
• new Mat()したやつdeleteし忘れるとメモリリークする
• めんどい

21. レシピ 🍳

22. 二階調化
白黒の世界 = 形だけの世界

23. 輪郭検出
五角形かつ一定以上の面積があるものだけ抽出

24. 透視変換 (1)
元のロゴについて最小矩形を作っておく
Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License https://www.w3.org/html/logo/

25. 透視変換 (2)
入力画像についても最小矩形を作る

26. 透視変換 (3)
元のロゴに矩形を合わせるようにして変形する

27. 二階調化 (再)
閾値を調整 特に赤っぽい色が0になるように

28. デモ

29. ロゴを認識してサインを
抽出できてえらい！🎉

30. ここからが本題

31. どうやってマッチングするか
• 1:1の比較ではないので単純な画像比較で登録された全データと
照合するわけにはいかない
• どの方式で数値化すれば速度面と精度面が担保できるか
• ベクトルとして？
• 面積・重心？
• 特異点？
• コーナー検出？

32. まだテスト中

33. ちょっと思ってること
• 今まで所謂フロントエンドエンジニアと他の技術領域は少
し距離があった
• これからは一気に距離が近づくかもしれない ブラウザか
らデバイスにアクセスするAPI 機械学習系ライブラリ
Tensorflow.jsの登場など
• どこまでがフロントエンドエンジニアか？とか気にしなく
ていい 昨今はJSの知識でなんでも挑戦できる 楽しい

34. 完成したらまた発表し
に来ます！たぶん！

35. Thanks!