Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Twilio Video ハンズオン資料
Search
Kiminari Homma
April 28, 2016
Technology
1
370
Twilio Video ハンズオン資料
Twilio Video についての概要とハンズオン内容のpdfです。
Kiminari Homma
April 28, 2016
Tweet
Share
More Decks by Kiminari Homma
See All by Kiminari Homma
Twilio Meetup 東京 2022/11/11
honkimi
0
58
Twilio iOS 徹底攻略
honkimi
1
1.2k
2021年 Twilio Voice 報告
honkimi
0
310
WebRTC ビジネスの失敗と成功
honkimi
2
1.8k
最近の Twilio トレンド報告
honkimi
0
390
Twilio Meet Up
honkimi
0
75
利用ユーザーからみた Twilio の紹介
honkimi
0
91
Zendesk App を Heroku で作ってみた話
honkimi
0
130
国内における Twilio x Alexa
honkimi
0
750
Other Decks in Technology
See All in Technology
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
180
研究開発と製品開発、両利きのロボティクス
youtalk
1
250
生成AI時代のデータ基盤
shibuiwilliam
4
2.8k
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
300
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
1.3k
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
490
エラーとアクセシビリティ
schktjm
0
730
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
110
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
100
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
450
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
490
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
270
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Applications with DynamoDB
mza
96
6.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Agile that works and the tools we love
rasmusluckow
330
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Faster Mobile Websites
deanohume
309
31k
Transcript
Twilio Video ͷ֓ཁ selfree, llc Kiminari Homma (@kimihom)
ඞཁͳͷ • Twilio ΞΧϯτ (ମݧ൛Ͱ OK) • Firefox ͱ Chrome
• PHP or Ruby or Node.js Ͱ localhost Λ্ཱͪ ͛ΒΕΔڥ • ϝϞா(ΤσΟλʔ)
ࣗݾհ
ຊؒ ߖ @kimihom CTO at selfree,llc Twilio, Ruby on Rails,
Heroku, AWS, Android, iOS TwilioJP-UG ϝϯόʔ CallConnect (5Ͱి૭ޱΛ։ઃ) https://www.callconnect.jp
֓ཁฤ (20) Web RTC ͱ Twilio Video ʹ͍ͭͯ ϋϯζΦϯฤ (50)
͘͡
WebRTC (Web Real-Time Communication)
͍͍ͬͨԿऀʁ • ిɺϏσΦ௨Λϒϥβ͚ͩͰ࣮ݱ • ςΩετϑΝΠϧͷϢʔβؒૹड৴͕Մೳ • ϓϩάϥϛϯάʹΑͬͯԻɾө૾ΛૢΔ • P2P (Peer
to Peer) ٕज़ • ྫ͑ appear.in ͕༗໊
WebRTC ࣗମ2Ҏ্લ͔Β ొ࢝͠Ί͍ͯ·͢ɻ ↓ ͳͥࠓ͞Βʁ
WebRTC ͱ͔Ͳ͏ͤϒϥβґଘ Ͱ͍ͷʹͳΒͳ͍ͩΖww ॴḨ ݸਓಛఆͷؒͰ͏Ϩϕϧɻ (ͱ͋Δ Web ΤϯδχΞͷ৺ͷ)
ঢ়گ͕స͍ͯ͠·͢ • س·Θ͖͠ IE ͷݹ͍όʔδϣϯαϙʔτͷऴྃ • εϚϗར༻ऀͷٸ૿ • ֤ϒϥβͷ WebRTC
༷ͷਐԽ • Twilio Video ͳͲͷ։ൃ SDK ͷొ
WebRTC ͷબࢶ • WebRTC αʔϏεͷར༻ ɹ→ appear.in, 1meeting, BizMee ͳͲ
• WebRTC SDK Λར༻࣮ͯ͢͠Δ → Twilio Video, SkyWay ͳͲ • ੜ WebRTC Ͱ࣮͢Δ ߴ ࣗ༝
Why WebRTC SDK?
ϏσΦ௨ͷ࣮͚ͩʹूத • େΓ͍ͨ͜ͱͬͯಉͩ͡ΑͶ • WebRTC ͷ༷ͳͲΛؾʹ͢Δඞཁ͕ͳ͍ • UI ͱ ΠϕϯτॲཧΛॻ͚ͩ͘Ͱ
OK
Why not SkyWay but Twilio Video?
૬खͱͷ“ίϛϡχέʔγϣϯ”ͬͯ ϏσΦ͚ͩ͡Όͳ͍ɻ
ిɾνϟοτɾϏσΦ͕࿈ܞͨ͠ ΦϜχνϟωϧͳίϛϡχέʔγϣϯ ଏʹݴ͏ Contextual Communication จɹ຺ɹΛɹཧɹղɹ͠ɹͨɹސɹ٬ɹͱɹͷɹରɹ ͷ࣮ݱ͕༰қɻ
“SIGNAL” ʹʂ(1ϲ݄ޙ)
Twilio Video ͷ֓ཁ
ϦΞϧλΠϜͳϏσΦ௨ͷΠϯϑϥͱSDK ϞόΠϧΣϒΞϓϦͰߴػೳͳෳϏσΦ௨ ͱߴԻ࣭ͷԻମݧΛ࡞Γ·͠ΐ͏ɻTwilio Video ɺP2P௨ͷͨΊͷάϩʔόϧΫϥυ ΠϯϑϥͰࢧ͑ΒΕ͍ͯ·͢ɻ
Demo
Ͱ͖Δ͜ͱ • ϏσΦ௨ͷೝূͱొ • ௨ͷॳظԽ • ௨ͷൃ৴ͱண৴ • Data Channel
(COMING SOON) ϑΝΠϧσʔλͷ P2P ௨৴
ࢲ͕ͨͪ WebRTC ʹؔͯ͠৺ ͢Δ͜ͱ͋Γ·ͤΜɻ Twilio Video SDK Λ͏͚ͩͰ ϏσΦ௨ػೳΛ࣮ݱͰ͖·͢ɻ
$ISPNF ˕ 'JSFGPY ˓ *& º 4BGBSJ º .4&EHF ˚
ϒϥβαϙʔτ(β)
Video ͷ࣮Πϝʔδ 8FCαʔόʔ 5XJMJP3&45 4%, SID, API Key, Secret, Configuration
SID Token Token Ληοτ͢Δͱ Video ௨ػ ঢ়ଶɻ Video ൃ৴ ͱ ड৴࣌ͷΠϕϯτΛఆٛ ̍ ϦΫΤετ ̎ ̏ ̑ Video SDK (ϒϥβ, iOS, Android) ̐ Ϩεϙϯε
ݸਓతʹࢥ͏͜ͱ • ґવͱͯ͠ϒϥβαϙʔτո͍͠ • ࣮ࡍͷϢʔβʔར༻Λߟ͑Δͱ • ઌϢʔβʔ͚ɿChrome/Firefox ݶఆͰఏڙ • ҰൠϢʔβʔ͚ɿΞϓϦؒͰར༻
• Data Channel ʹΑΔσʔλૹड৴Ͱɺ։ൃͷ෯͕େ͖͕͘Γͦ͏
ࠓճͷϋϯζΦϯ Web ͷΈͰ͕͢ɺ iOS, Android ͷ࣮جຊతͳߏ ಉ͡Ͱɺॻ͖ํ͕ҧ͏ఔͰ͢ɻ ͥͻΞϓϦʹઓͯ͠Έ͍ͯͩ͘͞ɻ
ͦΕͰɺ Let’s Get Started!
Twilio Video Hands-On
ϋϯζΦϯ༰ • Twilio Video ͷαϯϓϧ (Web) Λಈ͔͢ • Twilio Video
ͷιʔείʔυΛཧղ͢Δ • Twilio Video ͷαϯϓϧΛ֦ு͢Δ • ΑΓਂ͘ Twilio Video ΛΔʹ
Video ͷ࣮Πϝʔδ 8FCαʔόʔ 5XJMJP3&45 4%, SID, API Key, Secret, Configuration
SID Token Token Ληοτ͢Δͱ Video ௨ػ ঢ়ଶɻ Video ൃ৴ ͱ ड৴࣌ͷΠϕϯτΛఆٛ ̍ ϦΫΤετ ̎ ̏ ̑ Video SDK (ϒϥβ, iOS, Android) ̐ Ϩεϙϯε ίί
ඞཁͳͷ • Twilio ΞΧϯτ (ମݧ൛Ͱ OK) • Firefox ͱ Chrome
• PHP or Ruby or Node.js Ͱ localhost Λ্ཱͪ ͛ΒΕΔڥ • ϝϞா(ΤσΟλʔ)
http://bit.ly/1NvGBxv ϋϯζΦϯ༰ (Qiita)
Twilio Video ͷࠓޙ • DataChannel ͰϑΝΠϧͷૹड৴͕Մೳʹ • REST API ͷొ
• ࢀՃऀͷ੍ޚ • ࢀՃऀ͝ͱͷཤྺͷऔಘ • iOS ͰͷεΫϦʔϯͷڞ༗
ΑΓਂ͘ Twilio Video ΛΔ • Twilio υΩϡϝϯτΛಡΉ • ඞཁʹԠͯ͡ API
υΩϡϝϯτΛಡΉ • Promise, EventEmitter ͳͲͷ࣮ΛΔ
Thanks.