Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Twilio Video ハンズオン資料

Twilio Video ハンズオン資料

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

Kiminari Homma

April 28, 2016
Tweet

More Decks by Kiminari Homma

Other Decks in Technology

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αʔόʔ 5XJMJP3&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αʔόʔ 5XJMJP3&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.