【授業スライド】教員リムーバー

慶應義塾⼤学 B3 和田唯我 / Yuiga Wada

- About me
- Blog

Transcript

1. クラウドコンピューティング実験
   『教員リムーバー』
   4班
   ● XXXXXXX 和田唯我
   ● YYYYYYY
   ● ZZZZZZZ
   ● UUUUUU
   

   View Slide

2. 『教員リムーバー』
   ・自動で板書を撮り, webから各授業の板書を閲覧することができるシステム
   ・画像処理で教員を抹消する！！ (opencv + numpy)
   

   View Slide

3. 特徴
   ・時間割から板書を閲覧できる
   ・画像処理で教員を抹消する！！ (opencv + numpy)
   ・PDF化して板書をダウンロードできる
   

   View Slide

4. センシング概要
   

   View Slide

5. アーキテクチャダイアグラム
   

   View Slide

6. Demo
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. アーキテクチャダイアグラム
    

    View Slide

12. センシング
    

    View Slide

13. システムで用いたセンサ
    USBカメラ 障害物センサ
    ボタンセンサ
    

    View Slide

14. センシング
    ● Button
    起動
    ● IR Obstacle Avoidance Module(障害物センサ)
    物体の有無を検知
    ○ 物体(黒板消し)有→60秒ごとに撮影
    ○ 物体(黒板消し)無→5秒ごとに撮影
    撮影した画像をMQTTで送信
    黒板消し有
    黒板消し無
    

    View Slide

15. MQTTでの通信
    ・画像サイズを1280×720と指定したので、1度にデータを送れない(128 kBが上限らしいです)
    →base64にして画像を適当なサイズにばらして送信し、いったんS3に格納
    →最後のデータが送られてきたらS3のデータを集めて、再構築しS3保存
    ・通信がうまくいかないときがある
    →データの再送
    

    View Slide

16. カメラ
    得られた画像を4種類に分類
    ・background→ 起動時に1枚撮影 ・normal → 黒板消しがある状態で60秒ごとに撮影
    ・erasing → 黒板消しがない状態で5秒ごとに撮影 ・finish → 黒板消しが置かれたタイミングで撮影
    

    View Slide

17. Web: index (時間割)
    

    View Slide

18. View Slide

19. Web: index (時間割)
    ● 教室名を指定して, DynamoDBから時間割を取得
    ● 授業名からsid(後述)を計算し, 板書表示用のページ(presenter)に飛ばす
    (CSS-FrameworkはBulmaを使用)
    

    View Slide

20. Web: index → presenter
    name: 授業名
    sid: 授業名をutf-8→SHA256でハッシュ化
    ⇒ Query-StringとしてURLに付加
    

    View Slide

21. Web: presenter (板書表示)
    

    View Slide

22. View Slide

23. Web: presenter (板書表示)
    ● Web上にアップロードされた画像ではないため、ファイルの場所を指定できない
    → 画像のバイナリデータをbase64でエンコード
    → imgタグのsrc要素にエンコード結果を指定すると画像が表示できる
    ● 画像をスライドにして表示
    → スライダーが作れるJavaScriptライブラリ(Swiper)を利用
    ● Download！ボタンを押すと、PDF化
    → 極力lambda上でやりたくない
    ⇒ javascriptで行う. (jsPDF)
    

    View Slide

24. Download: 教員のいない板書
    

    View Slide

25. 画像処理 (CloudWatchで定期実行)
    

    View Slide

26. 画像処理: 背景差分
    背景差分 Gray Scale
    

    View Slide

27. 画像処理: 背景差分
    背景差分 (gray) 収縮 (次のスライド)
    

    View Slide

28. 画像処理: モルフォロジー変換
    収縮 (Erosion)
    → 黒板の文字だけ消す
    膨張 (Dilation) → 線を潰して面積を増やす
    

    View Slide

29. 画像処理: 教員抹消
    一次元に写像.
    教員を抹消するmaskを生成
    

    View Slide

30. 画像処理 ハマった点
    ● Lambda上でOpenCVを使うとドツボにハマる
    → opencv-python はOpenCV のビルドが必要
    → ビルド環境と実行環境を一致させる必要がある ( localでpip&zipだけではダメ)
    ⇒ Docker上でOpenCVをビルド
    ⇒ ビルドしたOpenCV + numpy + opencv-pythonを zipでlambdaに.
    ⇒ LambdaのLayer (Lambda Layers)を作成
    

    View Slide

31. ありがとうございました
    ページのURL: https://uaby7jdky5.execute-api.us-east-
    1.amazonaws.com/index
    

    View Slide