Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Twilio Video ハンズオン資料
Kiminari Homma
April 28, 2016
Technology
1
270
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
3
Twilio iOS 徹底攻略
honkimi
1
470
2021年 Twilio Voice 報告
honkimi
0
140
WebRTC ビジネスの失敗と成功
honkimi
2
1.1k
最近の Twilio トレンド報告
honkimi
0
240
Twilio Meet Up
honkimi
0
56
利用ユーザーからみた Twilio の紹介
honkimi
0
34
Zendesk App を Heroku で作ってみた話
honkimi
0
60
国内における Twilio x Alexa
honkimi
0
590
Other Decks in Technology
See All in Technology
- Rでオブジェクト指向プログラミング- クラス設計入門の入門
kotatyamtema
1
720
S3とCloudWatch Logsの見直しから始めるコスト削減 / Cost saving S3 and CloudWatch Logs
shonansurvivors
0
210
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
140
地方自治体業務あるある ーアナログ最適化編-
y150saya
1
130
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.2k
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
130
03_ユーザビリティテスト
kouzoukaikaku
0
170
ECテックカンファレンス2023 EC事業部のモバイル開発2023
tatsumi0000
0
270
【NGK2023S】 ノードエディタ形式の画像処理ツール「Image-Processing-Node-Editor」
kazuhitotakahashi
0
260
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
150
日本ディープラーニング協会主催 NeurIPS 2022 技術報告会講演資料
tdailab
0
1.1k
Dev Containers ことはじめ - 失敗から学ぶ開発環境運用法
streamwest1629
0
320
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
How STYLIGHT went responsive
nonsquared
89
4.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
A Philosophy of Restraint
colly
193
15k
A Modern Web Designer's Workflow
chriscoyier
689
180k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Code Reviewing Like a Champion
maltzj
508
38k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Designing the Hi-DPI Web
ddemaree
273
32k
How to train your dragon (web standard)
notwaldorf
66
4.2k
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.