$30 off During Our Annual Pro Sale. View Details »

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

ryo
September 19, 2022

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

PWA Night 2022/10/21

ryo

September 19, 2022
Tweet

More Decks by ryo

Other Decks in Technology

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