Twilio Video ハンズオン資料

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

Transcript

1. Twilio Video ͷ֓ཁ selfree, llc Kiminari Homma (@kimihom)
2. ඞཁͳ΋ͷ • Twilio ΞΧ΢ϯτ (ମݧ൛Ͱ OK) • Firefox ͱ Chrome • PHP or Ruby or Node.js Ͱ localhost Λ্ཱͪ ͛ΒΕΔ؀ڥ • ϝϞா(ΤσΟλʔ)
3. ࣗݾ঺հ
4. ຊؒ ߖ੒ @kimihom CTO at selfree,llc Twilio, Ruby on Rails, Heroku, AWS, Android, iOS TwilioJP-UG ϝϯόʔ CallConnect (5෼Ͱి࿩૭ޱΛ։ઃ) https://www.callconnect.jp
5. ֓ཁฤ (20෼) Web RTC ͱ͸ Twilio Video ʹ͍ͭͯ ϋϯζΦϯฤ (50෼) ΋͘͡
6. WebRTC (Web Real-Time Communication)
7. ͍͍ͬͨԿऀʁ • ి࿩ɺϏσΦ௨࿩Λϒϥ΢β͚ͩͰ࣮ݱ • ςΩετ΍ϑΝΠϧͷϢʔβؒૹड৴͕Մೳ • ϓϩάϥϛϯάʹΑͬͯԻ੠ɾө૾ΛૢΔ • P2P (Peer to Peer) ٕज़ • ྫ͑͹ appear.in ͕༗໊
8. WebRTC ࣗମ͸2೥Ҏ্લ͔Β ొ৔࢝͠Ί͍ͯ·͢ɻ ↓ ͳͥࠓ͞Βʁ
9. WebRTC ͱ͔Ͳ͏ͤϒϥ΢βґଘ Ͱ࢖͍΋ͷʹͳΒͳ͍ͩΖww ॴḨ ݸਓ΍ಛఆͷؒͰ࢖͏Ϩϕϧɻ (ͱ͋Δ Web ΤϯδχΞͷ৺ͷ੠)
10. ঢ়گ͕޷స͍ͯ͠·͢ • س·Θ͖͠ IE ͷݹ͍όʔδϣϯαϙʔτͷऴྃ • εϚϗར༻ऀͷٸ૿ • ֤ϒϥ΢βͷ WebRTC ࢓༷ͷਐԽ • Twilio Video ͳͲͷ։ൃ SDK ͷొ৔
11. WebRTC ͷબ୒ࢶ • WebRTC αʔϏεͷར༻ ɹ→ appear.in, 1meeting, BizMee ͳͲ • WebRTC SDK Λར༻࣮ͯ͠૷͢Δ → Twilio Video, SkyWay ͳͲ • ੜ WebRTC Ͱ࣮૷͢Δ ௿ ߴ ࣗ༝౓
12. Why WebRTC SDK?
13. ϏσΦ௨࿩ͷ࣮૷͚ͩʹूத • େ఍΍Γ͍ͨ͜ͱͬͯಉͩ͡ΑͶ • WebRTC ͷ࢓༷ͳͲΛؾʹ͢Δඞཁ͕ͳ͍ • UI ͱ ΠϕϯτॲཧΛॻ͚ͩ͘Ͱ OK
14. Why not SkyWay but Twilio Video?
15. ૬खͱͷ“ίϛϡχέʔγϣϯ”ͬͯ ϏσΦ͚ͩ͡Όͳ͍ɻ
16. ి࿩ɾνϟοτɾϏσΦ͕࿈ܞͨ͠ ΦϜχνϟωϧͳίϛϡχέʔγϣϯ ଏʹݴ͏ Contextual Communication จɹ຺ɹΛɹཧɹղɹ͠ɹͨɹސɹ٬ɹͱɹͷɹରɹ࿩ ͷ࣮ݱ͕༰қɻ
17. “SIGNAL” ʹ஫໨ʂ(1ϲ݄ޙ)
18. Twilio Video ͷ֓ཁ
19. ϦΞϧλΠϜͳϏσΦ௨࿩ͷΠϯϑϥͱSDK ϞόΠϧ΍΢ΣϒΞϓϦͰߴػೳͳෳ਺ϏσΦ௨ ࿩ͱߴԻ࣭ͷԻ੠ମݧΛ࡞Γ·͠ΐ͏ɻTwilio Video ͸ɺP2P௨࿩ͷͨΊͷάϩʔόϧΫϥ΢υ ΠϯϑϥͰࢧ͑ΒΕ͍ͯ·͢ɻ
20. Demo
21. Ͱ͖Δ͜ͱ • ϏσΦ௨࿩ͷೝূͱొ࿥ • ௨࿩ͷॳظԽ • ௨࿩ͷൃ৴ͱண৴ • Data Channel (COMING SOON) ϑΝΠϧσʔλͷ P2P ௨৴
22. ࢲ͕ͨͪ WebRTC ʹؔͯ͠৺഑ ͢Δ͜ͱ͸͋Γ·ͤΜɻ Twilio Video SDK Λ࢖͏͚ͩͰ ϏσΦ௨࿩ػೳΛ࣮ݱͰ͖·͢ɻ
23. $ISPNF
    ˕ 'JSFGPY
    ˓ *&
    º 4BGBSJ
    º .4
    &EHF
    ˚ ϒϥ΢βαϙʔτ(β)
24. Video ͷ࣮૷Πϝʔδ 8FC
    αʔόʔ
    5XJMJP
    3&45
    4%, SID, API Key, Secret, Configuration SID Token Token Ληοτ͢Δͱ Video ௨࿩଴ػ ঢ়ଶ΁ɻ Video ൃ৴ ͱ ड৴࣌ͷΠϕϯτΛఆٛ ̍ ϦΫΤετ ̎ ̏ ̑ Video SDK (ϒϥ΢β, iOS, Android) ̐ Ϩεϙϯε
25. ݸਓతʹࢥ͏͜ͱ • ґવͱͯ͠ϒϥ΢βαϙʔτ͸ո͍͠ • ࣮ࡍͷϢʔβʔར༻Λߟ͑Δͱ • ઌ୺Ϣʔβʔ޲͚ɿChrome/Firefox ݶఆͰఏڙ • ҰൠϢʔβʔ޲͚ɿΞϓϦؒͰར༻ • Data Channel ʹΑΔσʔλૹड৴Ͱɺ։ൃͷ෯͕େ͖͘޿͕Γͦ͏
26. ࠓճͷϋϯζΦϯ͸ Web ͷΈͰ͕͢ɺ iOS, Android ͷ࣮૷΋جຊతͳߏ଄͸ ಉ͡Ͱɺॻ͖ํ͕ҧ͏ఔ౓Ͱ͢ɻ ͥͻΞϓϦʹ΋௅ઓͯ͠Έ͍ͯͩ͘͞ɻ
27. ͦΕͰ͸ɺ Let’s Get Started!
28. Twilio Video Hands-On
29. ϋϯζΦϯ಺༰ • Twilio Video ͷαϯϓϧ (Web) Λಈ͔͢ • Twilio Video ͷιʔείʔυΛཧղ͢Δ • Twilio Video ͷαϯϓϧΛ֦ு͢Δ • ΑΓਂ͘ Twilio Video Λ஌Δʹ͸
30. Video ͷ࣮૷Πϝʔδ 8FC
    αʔόʔ
    5XJMJP
    3&45
    4%, SID, API Key, Secret, Configuration SID Token Token Ληοτ͢Δͱ Video ௨࿩଴ػ ঢ়ଶ΁ɻ Video ൃ৴ ͱ ड৴࣌ͷΠϕϯτΛఆٛ ̍ ϦΫΤετ ̎ ̏ ̑ Video SDK (ϒϥ΢β, iOS, Android) ̐ Ϩεϙϯε ίί
31. ඞཁͳ΋ͷ • Twilio ΞΧ΢ϯτ (ମݧ൛Ͱ OK) • Firefox ͱ Chrome • PHP or Ruby or Node.js Ͱ localhost Λ্ཱͪ ͛ΒΕΔ؀ڥ • ϝϞா(ΤσΟλʔ)
32. http://bit.ly/1NvGBxv ϋϯζΦϯ಺༰ (Qiita)
33. Twilio Video ͷࠓޙ • DataChannel ͰϑΝΠϧͷૹड৴͕Մೳʹ • REST API ͷొ৔ • ࢀՃऀͷ੍ޚ • ࢀՃऀ͝ͱͷཤྺͷऔಘ • iOS ͰͷεΫϦʔϯͷڞ༗
34. ΑΓਂ͘ Twilio Video Λ஌Δ • Twilio υΩϡϝϯτΛಡΉ • ඞཁʹԠͯ͡ API υΩϡϝϯτΛಡΉ • Promise, EventEmitter ͳͲͷ࣮૷Λ஌Δ
35. Thanks.