WebSocketでカメラの映像を共有してみた

WebSocketのバイナリメッセージとWebRTCのカメラを利用して、映像の共有をしてみました

Transcript

1. WebSocketͰ Χϝϥͷө૾Λ ڞ༗ͯ͠Έͨ 2018-02-28 ࣾ಺ษڧձ onozaty
2. WebSocket • αʔόͱΫϥΠΞϯτؒͰ૒ํ޲௨৴Λߦ͏ ٕज़ • 1ͭͷίωΫγϣϯͰ૒ํ޲௨৴͕ߦ͑Δ • ϦΞϧλΠϜͳ௨৴Λ࣮ݱͰ͖Δ
3. ͲΜͳ΋ͷʹ޲͍ͯΔ͔ • ϦΞϧλΠϜʹ৘ใΛ΍ΓͱΓ͍ͨ͠΋ͷ • ͨͱ͑͹ΦϯϥΠϯήʔϜͱ͔
4. ϒϥ΢βͷରԠঢ়گ Ҿ༻ݩ: https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API#Browser_compatibility
5. ͱΓ͋͑ͣ Կ͔࡞ͬͯΈ͍ͨ
6. ࠷ॳʹ࡞ͬͨ΋ͷ • WebSocketͷ୊ࡐʹΑ͕͋͘ΔνϟοτΛ ࡞ͬͯΈͨ • αʔό͸Spring BootͰ • https://github.com/onozaty/spring-boot-sandbox/ tree/master/spring-boot-websocket
7. ͋·Γʹ΋؆୯͗ͨ͢
8. ଞͷ୊ࡐΛ୳ͦ͏
9. ଞͷ୊ࡐΛߟ͑Δ • WebSocket͸όΠφϦϝοηʔδ΋ඈ͹ͤΔ ͱ͍͏ͷ͕໘നͦ͏ • Χϝϥ΋WebRTCʹؔ࿈ͯ͠؆୯ʹૢ࡞Ͱ͖ ΔΑ͏ʹͳ͍ͬͯΔΒ͍͠ͷͰɺͦΕ΋Ұॹ ʹࢼͤΕ͹
10. ΧϝϥͰࡱӨͨ͠ը૾Λ WebSocketͰڞ༗͢Δ
11. ཁ݅ • ΫϥΠΞϯτؒͰΧϝϥͷө૾Λڞ༗͢Δ • ϦΞϧλΠϜʹߋ৽͠ɺಈըͬΆ͘ݟͤΕΔ Α͏ʹ
12. αʔόଆͷ࣮૷ • ड৴ͨ͠όΠφϦσʔλ(ը૾)ʹɺૹ৴ݩΛҰ ҙʹࣝผ͢Δ৘ใΛ෇༩ͨ͠͏͑ͰɺશΫϥ ΠΞϯτʹϒϩʔυΩϟετ • ΫϥΠΞϯτ͔Β੾அΛݕ஌ͨ͠Βɺۭͷσʔ λΛશΫϥΠΞϯτʹૹͬͯදࣔ಺༰ΛϦηο τ
13. ΫϥΠΞϯτଆͷ࣮૷ • getUserMedia()Λ௨ͯ͡ΧϝϥͷσόΠεΛऔ ಘ͠ɺ<video>Ͱಈըͱͯ͠දࣔ • ҰఆपظͰ<video>ͷ಺༰Λ<canvas>ʹॻ͖ࠐ ΜͰɺjpegը૾ͷόΠφϦʹͯ͠αʔόʹૹ৴ • αʔόଆ͔Βड͚औͬͨը૾͸ɺόΠφϦͷઌ ಄෦෼ʹ෇༩͞Εͨૹ৴ݩΛࣝผ͢Δ৘ใΛݩ ʹɺૹ৴ݩຖʹදࣔ
14. ৄ͍͠಺༰͸ Լهͷίʔυࢀর https://github.com/onozaty/shared-camera-websocket/ tree/master/shared-camera-server
15. σϞ
16. σϞ • ԼهͷϓϩδΣΫτΛHerokuͰσϓϩΠ • https://github.com/onozaty/shared-camera-websocket • ը૾Λେྔʹ഑৴͢Δ͜ͱʹͳΔͷͰɺ௨৴ ྔʹ஫ҙ • ΪΨ͕ݮΔ
17. ը໘Πϝʔδ
18. ײ૝ • ΧϝϥΛJavaScript͔Β৮Δͷ͸ɺࢥͬͨҎ্ ʹ؆୯ͩͬͨ • όΠφϦϝοηʔδΛ΍ΓͱΓͰ͖Δͷ͸ɺ ͍Ζ͍ΖԠ༻͕͖͖ͦ͏ • Herokuศར
19. ͓·͚ • ࠓճͷσϞͰ͸΍Βͳ͔͕ͬͨɺRaspberry Piʹ઀ ଓͨ͠Χϝϥ͔Β഑৴͢ΔΫϥΠΞϯτ΋࡞ͬͨ • Ұ൪ۤઓͨ͠ͷ͸͜͜ • Node.jsɺPythonɺJavaͱࢼ͢ϋϝʹ • ͜ΕΛ࢖͏ͱɺՈʹ͓͍ͨRaspberry PiͷΧϝϥͰ ࡱӨͨ͠ը૾Λඈ͹ͯ͠ɺ֎ग़ઌ͔Β֬ೝ͢ΔΑ͏ ͳ͜ͱ΋Ͱ͖Δ