Twilio Video ハンズオン資料

Twilio Video についての概要とハンズオン内容のpdfです。

Transcript

1. Twilio Video ͷ֓ཁ
   selfree, llc
   Kiminari Homma (@kimihom)
   

   View Slide

2. ඞཁͳ΋ͷ
   • Twilio ΞΧ΢ϯτ (ମݧ൛Ͱ OK)
   • Firefox ͱ Chrome
   • PHP or Ruby or Node.js Ͱ localhost Λ্ཱͪ
   ͛ΒΕΔ؀ڥ
   • ϝϞா(ΤσΟλʔ)
   

   View Slide

3. ࣗݾ঺հ
   

   View Slide

4. ຊؒ ߖ੒ @kimihom
   CTO at selfree,llc
   Twilio, Ruby on Rails, Heroku, AWS, Android, iOS
   TwilioJP-UG ϝϯόʔ
   CallConnect (5෼Ͱి࿩૭ޱΛ։ઃ)
   https://www.callconnect.jp
   

   View Slide

5. ֓ཁฤ (20෼)
   Web RTC ͱ͸
   Twilio Video ʹ͍ͭͯ
   ϋϯζΦϯฤ (50෼)
   ΋͘͡
   

   View Slide

6. WebRTC
   (Web Real-Time Communication)
   

   View Slide

7. ͍͍ͬͨԿऀʁ
   • ి࿩ɺϏσΦ௨࿩Λϒϥ΢β͚ͩͰ࣮ݱ
   • ςΩετ΍ϑΝΠϧͷϢʔβؒૹड৴͕Մೳ
   • ϓϩάϥϛϯάʹΑͬͯԻ੠ɾө૾ΛૢΔ
   • P2P (Peer to Peer) ٕज़
   • ྫ͑͹ appear.in ͕༗໊
   

   View Slide

8. WebRTC ࣗମ͸2೥Ҏ্લ͔Β
   ొ৔࢝͠Ί͍ͯ·͢ɻ
   ↓
   ͳͥࠓ͞Βʁ
   

   View Slide

9. WebRTC ͱ͔Ͳ͏ͤϒϥ΢βґଘ
   Ͱ࢖͍΋ͷʹͳΒͳ͍ͩΖww
   ॴḨ ݸਓ΍ಛఆͷؒͰ࢖͏Ϩϕϧɻ
   (ͱ͋Δ Web ΤϯδχΞͷ৺ͷ੠)
   

   View Slide

10. ঢ়گ͕޷స͍ͯ͠·͢
    • س·Θ͖͠ IE ͷݹ͍όʔδϣϯαϙʔτͷऴྃ
    • εϚϗར༻ऀͷٸ૿
    • ֤ϒϥ΢βͷ WebRTC ࢓༷ͷਐԽ
    • Twilio Video ͳͲͷ։ൃ SDK ͷొ৔
    

    View Slide

11. WebRTC ͷબ୒ࢶ
    • WebRTC αʔϏεͷར༻
    ɹ→ appear.in, 1meeting, BizMee ͳͲ
    • WebRTC SDK Λར༻࣮ͯ͠૷͢Δ
    → Twilio Video, SkyWay ͳͲ
    • ੜ WebRTC Ͱ࣮૷͢Δ
    ௿
    ߴ
    ࣗ༝౓
    

    View Slide

12. Why WebRTC SDK?
    

    View Slide

13. ϏσΦ௨࿩ͷ࣮૷͚ͩʹूத
    • େ఍΍Γ͍ͨ͜ͱͬͯಉͩ͡ΑͶ
    • WebRTC ͷ࢓༷ͳͲΛؾʹ͢Δඞཁ͕ͳ͍
    • UI ͱ ΠϕϯτॲཧΛॻ͚ͩ͘Ͱ OK
    

    View Slide

14. Why not SkyWay but Twilio Video?
    

    View Slide

15. ૬खͱͷ“ίϛϡχέʔγϣϯ”ͬͯ
    ϏσΦ͚ͩ͡Όͳ͍ɻ
    

    View Slide

16. ి࿩ɾνϟοτɾϏσΦ͕࿈ܞͨ͠
    ΦϜχνϟωϧͳίϛϡχέʔγϣϯ
    ଏʹݴ͏
    Contextual Communication
    จɹ຺ɹΛɹཧɹղɹ͠ɹͨɹސɹ٬ɹͱɹͷɹରɹ࿩
    ͷ࣮ݱ͕༰қɻ
    

    View Slide

17. “SIGNAL” ʹ஫໨ʂ(1ϲ݄ޙ)
    

    View Slide

18. Twilio Video ͷ֓ཁ
    

    View Slide

19. ϦΞϧλΠϜͳϏσΦ௨࿩ͷΠϯϑϥͱSDK
    ϞόΠϧ΍΢ΣϒΞϓϦͰߴػೳͳෳ਺ϏσΦ௨
    ࿩ͱߴԻ࣭ͷԻ੠ମݧΛ࡞Γ·͠ΐ͏ɻTwilio
    Video ͸ɺP2P௨࿩ͷͨΊͷάϩʔόϧΫϥ΢υ
    ΠϯϑϥͰࢧ͑ΒΕ͍ͯ·͢ɻ
    

    View Slide

20. Demo
    

    View Slide

21. Ͱ͖Δ͜ͱ
    • ϏσΦ௨࿩ͷೝূͱొ࿥
    • ௨࿩ͷॳظԽ
    • ௨࿩ͷൃ৴ͱண৴
    • Data Channel (COMING SOON)
    ϑΝΠϧσʔλͷ P2P ௨৴
    

    View Slide

22. ࢲ͕ͨͪ WebRTC ʹؔͯ͠৺഑
    ͢Δ͜ͱ͸͋Γ·ͤΜɻ
    Twilio Video SDK Λ࢖͏͚ͩͰ
    ϏσΦ௨࿩ػೳΛ࣮ݱͰ͖·͢ɻ
    

    View Slide

23. $ISPNF
    ˕
    'JSFGPY
    ˓
    *&
    º
    4BGBSJ
    º
    .4&EHF
    ˚
    ϒϥ΢βαϙʔτ(β)
    

    View Slide

24. Video ͷ࣮૷Πϝʔδ
    8FCαʔόʔ
    5XJMJP3&45
    4%,
    SID, API Key, Secret,
    Configuration SID
    Token
    Token Ληοτ͢Δͱ Video ௨࿩଴ػ ঢ়ଶ΁ɻ
    Video ൃ৴ ͱ ड৴࣌ͷΠϕϯτΛఆٛ
    ̍ ϦΫΤετ
    ̎
    ̏
    ̑ Video SDK (ϒϥ΢β, iOS, Android)
    ̐ Ϩεϙϯε
    

    View Slide

25. ݸਓతʹࢥ͏͜ͱ
    • ґવͱͯ͠ϒϥ΢βαϙʔτ͸ո͍͠
    • ࣮ࡍͷϢʔβʔར༻Λߟ͑Δͱ
    • ઌ୺Ϣʔβʔ޲͚ɿChrome/Firefox ݶఆͰఏڙ
    • ҰൠϢʔβʔ޲͚ɿΞϓϦؒͰར༻
    • Data Channel ʹΑΔσʔλૹड৴Ͱɺ։ൃͷ෯͕େ͖͘޿͕Γͦ͏
    

    View Slide

26. ࠓճͷϋϯζΦϯ͸ Web ͷΈͰ͕͢ɺ
    iOS, Android ͷ࣮૷΋جຊతͳߏ଄͸
    ಉ͡Ͱɺॻ͖ํ͕ҧ͏ఔ౓Ͱ͢ɻ
    ͥͻΞϓϦʹ΋௅ઓͯ͠Έ͍ͯͩ͘͞ɻ
    

    View Slide

27. ͦΕͰ͸ɺ
    Let’s Get Started!
    

    View Slide

28. Twilio Video Hands-On
    

    View Slide

29. ϋϯζΦϯ಺༰
    • Twilio Video ͷαϯϓϧ (Web) Λಈ͔͢
    • Twilio Video ͷιʔείʔυΛཧղ͢Δ
    • Twilio Video ͷαϯϓϧΛ֦ு͢Δ
    • ΑΓਂ͘ Twilio Video Λ஌Δʹ͸
    

    View Slide

30. Video ͷ࣮૷Πϝʔδ
    8FCαʔόʔ
    5XJMJP3&45
    4%,
    SID, API Key, Secret,
    Configuration SID
    Token
    Token Ληοτ͢Δͱ Video ௨࿩଴ػ ঢ়ଶ΁ɻ
    Video ൃ৴ ͱ ड৴࣌ͷΠϕϯτΛఆٛ
    ̍ ϦΫΤετ
    ̎
    ̏
    ̑ Video SDK (ϒϥ΢β, iOS, Android)
    ̐ Ϩεϙϯε
    ίί
    

    View Slide

31. ඞཁͳ΋ͷ
    • Twilio ΞΧ΢ϯτ (ମݧ൛Ͱ OK)
    • Firefox ͱ Chrome
    • PHP or Ruby or Node.js Ͱ localhost Λ্ཱͪ
    ͛ΒΕΔ؀ڥ
    • ϝϞா(ΤσΟλʔ)
    

    View Slide

32. http://bit.ly/1NvGBxv
    ϋϯζΦϯ಺༰ (Qiita)
    

    View Slide

33. Twilio Video ͷࠓޙ
    • DataChannel ͰϑΝΠϧͷૹड৴͕Մೳʹ
    • REST API ͷొ৔
    • ࢀՃऀͷ੍ޚ
    • ࢀՃऀ͝ͱͷཤྺͷऔಘ
    • iOS ͰͷεΫϦʔϯͷڞ༗
    

    View Slide

34. ΑΓਂ͘ Twilio Video Λ஌Δ
    • Twilio υΩϡϝϯτΛಡΉ
    • ඞཁʹԠͯ͡ API υΩϡϝϯτΛಡΉ
    • Promise, EventEmitter ͳͲͷ࣮૷Λ஌Δ
    

    View Slide

35. Thanks.
    

    View Slide