Webで動画解析 〜Google Meetの挙手とリアルの挙手を連動させるChrome拡張作った話〜 / sync-raise-hand

PWA Night 2022/10/21

Transcript

1. 8FCͰಈըղੳ
   ʙ(PPHMF.FFUͷڍखͱϦΞϧͷڍखΛ࿈ಈͤ͞Δ
   $ISPNF֦ுΛ࡞ͬͨ࿩ʙ
   18"/JHIU
   

   View Slide

2. !,BXBNBUB3ZP
   👨💻&OHJOFFS!-"13"4JOD
   🔥ݩফ๷࢜
   ❤ 5ZQF4DSJQU 7VF %FOP 3FBDU
   🏄ݒਨ ݸਓ։ൃ
   

   View Slide

3. ࠓ೔࿩͢͜ͱ💬
   

   View Slide

4. ɾ4ZOD3BJTF)BOEͷ঺հ
   ɾ$ISPNF&YUFOTJPOTͷ࣮૷
   ɾϋϯυτϥοΩϯάͷৄࡉ
   

   View Slide

5. 4ZOD3BJTF)BOETͱ͸ʁ✋
   

   View Slide

6. View Slide

7. ϦΞϧͳڍखͱ(PPHMF.FFU্ͷڍखϘλϯΛ
   ࿈ಈͤ͞Δ$ISPNF֦ு
   

   View Slide

8. %&.0📺
   

   View Slide

9. ͲͷΑ͏ʹڍखΛ൑ఆ͍ͯ͠Δʁ👁
   

   View Slide

10. )BOEUSBDLKTΛ࢖ͬͯڍखΛ൑ఆ🖐
    ϒϥ΢β্Ͱ8FCΧϝϥͷσʔλ͔Βɺ
    ϋϯυαΠϯΛ൑ఆͰ͖Δ
    )BOEUSBDLKTΛ࢖ͬͯڍखΛ൑ఆ
    

    View Slide

11. τϥοΩϯά։࢝
    

    View Slide

12. τάϧϘλϯ0/
    Ͱݺͼग़͠
    τϥοΩϯά։࢝
    

    View Slide

13. )BOE5SBDLKTͰͷ
    τϥοΩϯά։࢝
    τϥοΩϯά։࢝
    

    View Slide

14. ඵ͝ͱʹಈըΛݕূ
    ݕূ݁ՌΛݩʹϘλϯૢ࡞
    τϥοΩϯά։࢝
    

    View Slide

15. Ϙλϯૢ࡞
    ڍखϘλϯͷ%0.Λऔಘ
    

    View Slide

16. खͷܗ͕PQFOͱ൑ఆ͞Ε͍ͯͳ͍͔ͭ
    ڍखϘλϯ͕ԡ͞Ε͍ͯͳ͍৔߹͸ɺ
    ڍखϘλϯΛΫϦοΫ
    Ϙλϯૢ࡞
    

    View Slide

17. खͷܗ͕PQFOͱ൑ఆ͞Εͳ͍৔߹͔ͭɺ
    ڍखϘλϯ͕ΫϦοΫ͞Ε͍ͯΔ৔߹͸ɺ
    ڍखϘλϯΛΫϦοΫͯ͠ڍखΛ໭͢
    Ϙλϯૢ࡞
    

    View Slide

18. τϥοΩϯάఀࢭ
    

    View Slide

19. τϥοΩϯάఀࢭ
    τάϧϘλϯ0''
    Ͱݺͼग़͠
    

    View Slide

20. τϥοΩϯάఀࢭ
    )BOE5SBDLKTͷτϥοΩϯάΛఀࢭ
    ղੳͷΠϯλʔόϧΛղআ
    

    View Slide

21. )BOE5SBDLKT͸
    Ͳ͏΍ͬͯखͷܗΛ൑ఆ͍ͯ͠Δʁ🔎
    

    View Slide

22. )BOE5SBDLKTͷίʔυΛಡΉ👀
    

    View Slide

23. ⚠͔͜͜Βઌ͸งғؾͰઆ໌ͯ͠·͢ʜ
    5FOTPS'MPXKTΘ͔Βͳ͍😇
    

    View Slide

24. ॳظԽॲཧᶃ
    victordibia/handtrack.js/tree/master/src/index.js
    

    View Slide

25. ॳظԽॲཧᶃ
    victordibia/handtrack.js/tree/master/src/index.js
    ΦϒδΣΫτݕग़ͷΫϥεΛॳظԽ͠
    ͯϞσϧͷMPBEॲཧΛ࣮ߦ
    

    View Slide

26. ॳظԽॲཧᶄ
    victordibia/handtrack.js/tree/master/src/index.js
    

    View Slide

27. ॳظԽॲཧᶄ
    victordibia/handtrack.js/tree/master/src/index.js
    ύϥϝʔλʹదͨ͠
    ֶशࡁΈϞσϧͷύεΛઃఆ
    

    View Slide

28. ॳظԽॲཧᶄ
    victordibia/handtrack.js/tree/master/src/index.js
    5FOTPS'MPXKTΛ࢖ͬͯɺ
    ֶशࡁΈϞσϧΛϩʔυ
    

    View Slide

29. τϥοΩϯάελʔτ
    victordibia/handtrack.js/tree/master/src/index.js
    

    View Slide

30. τϥοΩϯάελʔτ
    victordibia/handtrack.js/tree/master/src/index.js
    OBWBHBUPSNFEJB%FWJDFTͰ
    ઀ଓ͞ΕͨΧϝϥΛऔಘ͠
    WJEFPλάͷιʔεʹ
    

    View Slide

31. खͷܗͷݕग़
    victordibia/handtrack.js/tree/master/src/index.js
    

    View Slide

32. खͷܗͷݕग़
    victordibia/handtrack.js/tree/master/src/index.js
    7JEFPͷϑϨʔϜΛ
    5FOTPSΦϒδΣΫτʹม׵
    

    View Slide

33. खͷܗͷݕग़
    victordibia/handtrack.js/tree/master/src/index.js
    ֶशࡁΈϞσϧʹ౉ͯ͠
    खͷܗΛݕग़
    

    View Slide

34. ޻෉ͨ͠ϙΠϯτ͸ʁ💡
    

    View Slide

35. ίϯτϩʔϥʔͷ6*🎮
    $ISPNFͷը໘ʹҧ࿨ײͳ༹͚͘ࠐΉΑ
    ͏ʹϚςϦΞϧσβΠϯͰελΠϦϯά
    ө૾ͷअຐʹͳΒͳ͍Α͏ʹ೚ҙͷՕॴ
    ʹ%%ͰҠಈՄೳʹ
    

    View Slide

36. ڍखϘλϯͷ֦େΞχϝʔγϣϯ🔘
    ڍखͷڍಈ͕෼͔Γ΍͍͢Α͏ʹɺ
    ڍखϘλϯʹ֦େɾॖখΞχϝʔγϣϯ
    Λ௥Ճ
    

    View Slide

37. 5FNQMBUFSFQPTJUPSZͰͷര଎։ൃ🏎
    7JUFΛ࢖ͬͨ$ISPNF֦ுػೳͷ
    UFNQMBUFSFQPTJUPSZͷ
    WJUFTTFXFCFYUΛ࢖͍ɺ։ൃ؀ڥߏங
    Λޮ཰ԽϝΠϯػೳͷ࣮૷ʹ஫ྗɻ
    

    View Slide

38. ͓ΘΓʹ🏁
    

    View Slide

39. ɾ)BOE5SBDLKTੌ͍ʂ
    ɾ5FOTPS'MPXKTͰ1ZUIPOͰ࡞ͬͨϞσϧ΋ར༻Ͱ͖Δ
    ɾ4ZOD3JTF)BOE࢖ͬͯͶ✋
    

    View Slide

40. 8F"SF)JSJOH
    

    View Slide

41. બߟ՝୊΋ެ։த💯
    

    View Slide