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)

    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