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

LINE RevUp 2022 - TwilioVideo

LINE RevUp 2022 - TwilioVideo

2022年10月22日に開催された LINE Rev UP 2022内でご紹介した資料になります。

Katsumi Takahashi

October 22, 2022
Tweet

More Decks by Katsumi Takahashi

Other Decks in Business

Transcript

  1. גࣜձࣾ,%%*΢Σϒίϛϡχέʔγϣϯζߴڮࠀݾ
    -*''ͱ5XJMJP'MFYͰ࡞Δ

    ϏσΦ௨࿩ʹΑΔපӃ༧໿γεςϜ

    View full-size slide

  2. ͓࿳ͼ
    පӃड෇γεςϜͬͯॻ͍ͯ͋ΔͷͰ͕͢ɺ
    ͋·ΓපӃؔ܎ͳ͍Ͱ͆͢
    ൚༻ͷϏσΦड෇γεςϜͱͯ͠ݟͯͶ ɾТ
    ͯ΁΃Ζ

    View full-size slide

  3. גࣜձࣾ,%%*΢Σϒίϛϡχέʔγϣϯζ


    ϚʔέςΟϯάຊ෦
    ΤόϯδΣϦετ
    Katsumi Takahashi


    facebook: katsumi.takahashi


    Twitter: _katsumi


    github: mobilebiz


    qiita: mobilebiz
    #赤い芸人
    ⾃⼰紹介 ઌि຤ͷϋοΧιϯͰɺࠓճͷωλΛ࡞Ζ͏ͱࢥͬͨͷͰ͕͢ɺ
    ݁ہผͷΛ࡞ͬͯ͠·͍ɺࠓि͸͜ͷωλ࡞ΓͰࢮʹͦ͏Ͱͨ͠ɻ

    View full-size slide

  4. 0WFSWJFX
    ຊ೔͓࿩͢Δ಺༰
    • システムのシナリオ


    • Twilioについて


    • Twilio Videoについて


    • Twilio Flexについて


    • LIFFアプリについて


    • まとめ

    View full-size slide

  5. γεςϜͷγφϦΦ

    View full-size slide

  6. ͜ͷΞϓϦͷҐஔ͚ͮ
    ঱ঢ়͕ग़͔ͯΒපӃͰͷॳ਍Λ͏͚Δ·Ͱͷϓϩηε
    • 病院を探す(GoogleMapとかが多いはず)


    • 連絡先を探す(診療時間も合わせて検索)


    • 予約をする(できれば症状を伝えておきたい)


    • 病院にいく(待合室で待たされるの嫌だなぁ)


    • 問診票を記⼊する(予想通り待たされるorz)


    • 初診を受ける(結局他の病院を勧められることもある)
    ίί
    -*/&ͷڧΈ͸ຊདྷ͸͜ͷ͋ͨΓ
    γεςϜͷγφϦΦ

    View full-size slide

  7. γεςϜϑϩʔ
    ˓✕ҩӃ
    5XJMJP'MFY
    5XJMJP7JEFP
    5XJMJP7PJDF
    -*/&ίʔϧ
    1MVT
    -*''ΞϓϦ
    ຊ೔঺հ͢Δͷ͸

    ͪ͜ΒͷΞϓϦ
    -*/&ίʔϧ1MVTΛ࢖ͬͯి࿩Ͱ༧໿
    5XJMJP7JEFPΛ࢖ͬͯ

    ςϨϏి࿩Ͱ༧໿
    γεςϜͷγφϦΦ

    View full-size slide

  8. ͦΕɺ-*/&ίʔϧͰΑ͘Ͷʁ
    ެࣜΞΧ΢ϯτͷ-*/&ίʔϧͰԻ੠௨࿩΋ϏσΦ௨࿩Ͱ͖ΔΑͶʁ
    γεςϜͷγφϦΦ

    View full-size slide

  9. &YBDUMZʢ͔֬ʹʣʂ
    ͦΕͰ΋'MFYΛ࢖͏ҙຯʹ͍ͭͯ
    • 複数のオペレータがブラウザで対応できる


    • 最⼤5万席まで


    • 待ち呼処理やACDによるオペレータ選択ができる


    • 話中にならず、最適なオペレータが応答できる


    • ビデオ通話に付加価値をつけられる


    • 画⾯共有や字幕、録画などの機能を追加可能


    • 同じツールに集約できる


    • チャット、ビデオ、⾳声を同じ画⾯で対応できる
    γεςϜͷγφϦΦ
    ண৴Ͱ͖ͳ͍৔߹

    View full-size slide

  10. ·ͣ͸%&.0ΛΈͯΈΑ͏
    γεςϜͷγφϦΦ

    View full-size slide

  11. 5XJMJPʹ͍ͭͯ

    View full-size slide

  12. 5XJMJPͱ͸
    "CPVU
    ʮτΡΠϦΦʯͱൃԻ͠·͢ɻ
    2008೥ αʔϏε։࢝
    ຊࣾ͸αϯϑϥϯγεί
    ϩϯυϯɺχϡʔϤʔΫɺϚυ
    Ϧʔυɺ߳ߓɺγϯΨϙʔϧɺ
    ೔ຊͳͲɺੈք26ϲॴʹڌ఺
    2016೥6݄ʹIPOʢNYSEʣ
    重要!
    5XJMJPʹ͍ͭͯ

    View full-size slide

  13. 5XJMJP7JEFPʹ͍ͭͯ

    View full-size slide

  14. 5XJMJP7JEFPͱ͸
    ϏσΦίϛϡχέʔγϣϯ"1*
    • WebRTC※1ベースのビデオプラットフォーム


    • ルームの種類は3つ


    • Go: 最⼤2名までの制限はあるが、無料で使えるルーム


    • P2Pルーム:サーバーを介さず最⼤10名まで使えるルーム


    • グループルーム:最⼤50名まで使える⾼機能なルーム


    • ⾳声・ビデオ・データの3種類のトラックを利⽤可能


    • JavaScript、iOS、AndroidのSDKを⽤意
    5XJMJP7JEFPʹ͍ͭͯ
    ˞ϦΞϧλΠϜ௨৴Λ8FCٕज़্Ͱ࣮ݱ͢Δ͘͠Έ

    View full-size slide

  15. 8FC35$ͬͯԿʁ
    8FC3FBM—5JNF$PNNVOJDBUJPO
    7JEFP"VEJP%BUBUSBDLT
    γάφϦϯά γάφϦϯά
    ϒϥ΢β ϒϥ΢β
    5XJMJP7JEFPϓϥοτϑΥʔϜ
    USBDLT USBDLT

    View full-size slide

  16. άϧʔϓϧʔϜͷಛ௕
    ʙ໊Ͱ࢖͑Δ4'6˞ϕʔεͷ7JEFPϓϥοτϑΥʔϜ
    • VP8 サイマルキャストのサポート


    • ドミナントスピーカーの検知


    • 品質管理に関する各種APIのサポート


    • 録画のサポート


    • 録画データの組み⽴て


    • PSTN接続のサポート


    • ノイズキャンセリング機能の提供
    5XJMJP7JEFPʹ͍ͭͯ
    ˞4'6 4FMFDUJWF'PSXBSEJOH6OJU
    Ի੠΍ө૾Λαʔόʔܦ༝Ͱ഑৴͢Δٕज़

    View full-size slide

  17. 5XJMJP'MFYʹ͍ͭͯ

    View full-size slide

  18. 5XJMJP'MFY
    ϑϧΧελϚΠζ͕ՄೳͳίϯλΫτηϯλʔιϦϡʔγϣϯ
    5XJMJPͷ֤छαʔϏεΛ૊Έ߹Θͤͨίϯ
    λΫτηϯλʔͷ౷߹ιϦϡʔγϣϯɻ
    6*͸΋ͪΖΜɺ*73΍"$%ͳͲͷϑϧΧ
    ελϚΠζ͕Մೳɻ
    ΦϖϨʔλ഑ஔͷ࠷దԽ͢Δ͜ͱ͕Ͱ͖
    Δ'MFY*OTJHIU΋แؚ͞Ε͍ͯ·͢ɻ
    Ϋϥ΢υ
    5XJMJP'MFYʹ͍ͭͯ

    View full-size slide

  19. IUUQTKQUXJMJPDPNEPDTUBTLSPVUFSIPXUBTLSPVUFSXPSLT
    5XJMJP'MFYʹ͍ͭͯ
    7JEFP
    λεΫΛੜ੒

    View full-size slide

  20. -*''ΞϓϦʹ͍ͭͯ

    ʢίʔυղઆ͠ͳ͕Β঺հʣ

    View full-size slide

  21. 8FC35$PO-*''
    ͦ΋ͦ΋ಈ͘ͷ͔ʁ
    • 結論


    • 動きます!(ただし、バージョンに依存します)


    • LIFFブラウザの仕様※1


    • iPhone: WKWebView、Android: Android WebView


    • Android WebViewは、Android7からChromeエンジン


    • WKWebViewは、iOS14.3でgetUserMediaをサポート
    ˞IUUQTEFWFMPQFSTMJOFCJ[KBEPDTMJ
    ff
    PWFSWJFXMJOFBQJVTFDBTF
    -*''ΞϓϦʹ͍ͭͯ

    View full-size slide

  22. γʔέϯεਤ
    શମਤ
    -*''ΞϓϦʹ͍ͭͯ

    View full-size slide

  23. w -*''ϒϥ΢β͸MJ
    ff
    JOJU
    Ͱࣗಈతʹ
    MJ
    ff
    MPHJO
    ΋࣮ߦ͞ΕΔ
    w ֎෦ϒϥ΢β͸ผ్MJ
    ff
    MPHJO
    ͕ඞ

    w *%5PLFOΛαʔόʔʹ౉ͯ͠ɺαʔ
    όʔ্ͰϢʔβ৘ใΛऔಘ͢Δ
    -*''ΞϓϦʹ͍ͭͯ

    View full-size slide

  24. w ·ͣ͸ࣗ෼͕ϧʔϜʹ
    ೖΓɺͦͷޙλεΫΛ
    ৽ن࡞੒ͯ͠ΦϖϨʔ
    λΛݺͼग़͢
    w ΦϖϨʔλ΋τʔΫϯ
    Λऔಘͯ͠ϧʔϜʹ઀

    -*''ΞϓϦʹ͍ͭͯ

    View full-size slide

  25. -*''ΞϓϦͷߏ੒
    ϩϏʔը໘
    w -*''ىಈ௚ޙͷը໘
    w 3FBDUͷ"QQKTY಺ͰMJ
    ff
    JOJU
    Λ࣮ߦ
    w HFU1SP
    fi
    MF
    ͱHFU*%5PLFO
    ΋࣮ߦ
    w ΨΠυϥΠϯ˞ʹै͍ɺϩϏʔը໘
    ͰɺΧϝϥىಈલʹϢʔβʔʹ֬ೝ
    ͕ඞཁ
    ˞IUUQTEFWFMPQFSTMJOFCJ[KBEPDTMJ
    ff
    EFWFMPQNFOUHVJEFMJOFTMJ
    ff
    EFWFMPQNFOUSVMFT
    -*''ΞϓϦʹ͍ͭͯ

    View full-size slide

  26. -*''ΞϓϦͷߏ੒
    ϧʔϜը໘
    )FBEFS
    1BSUJDJQBOU
    5PPM#BS
    w ϧʔϜը໘͸ɺͭͷ)FBEFSίϯ
    ϙʔωϯτͱɺͭͷ5PPM#BSίϯ
    ϙʔωϯτɺࢀՃऀͷਓ਺෼ͷ
    1BSUJDJQBOUίϯϙʔωϯτɺը໘
    ڞ༗ͷ4DSFFOίϯϙʔωϯτ͔Β
    ߏ੒͞ΕΔ
    w Χϝϥ0O0
    ff
    ɺϚΠΫ0O0
    ff

    w &YJUͰ-*''ΞϓϦ΋ऴྃ
    4DSFFO
    -*''ΞϓϦʹ͍ͭͯ

    View full-size slide

  27. ·ͱΊ
    • LIFFブラウザでもWebRTCはちゃんと動く


    • LIFF開発ガイドラインは重要なので必ず読もう


    • LIFFブラウザのデバッグには、li
    ff
    -inspectorプラグイン


    • VideoプラットフォームにはTwilioを使ってね(WebRTC GOなら無料)


    • Flexと組み合わせることで⾳声やビデオのマルチチャネルが可能


    • 本⽇の資料は後ほど公開します。

    View full-size slide

  28. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ,%%*΢Σϒίϛϡχέʔγϣϯζ

    5XJMJPΤόϯδΣϦετ

    ߴڮࠀݾ

    View full-size slide