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
LIFF通話
Search
ufoo68
July 27, 2020
Technology
1
620
LIFF通話
ufoo68
July 27, 2020
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
21
M5Stack用の指紋認証デバイスを試す
ufoo68
0
310
結婚式のクイズアプリを自作した話
ufoo68
0
330
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
460
KASHIKOIHAKO
ufoo68
0
390
LIFF通話をつくろう!
ufoo68
0
930
KASHIKOIHAKO計画その4
ufoo68
0
220
AWS CDKで作るLINE bot
ufoo68
0
300
解説!LINE bot開発
ufoo68
0
210
Other Decks in Technology
See All in Technology
自己完結な開発者組織を支える プラットフォーム作り
recruitengineers
PRO
2
230
UIからの自動テスト事例
tomasagi
8
3.3k
パフォーマンスを改善するには仕様変更が1番はやい
yamamotohiroya
12
4.6k
10年モノのレガシーPHPアプリケーションを移植しきるまでの泥臭くも長い軌跡 / legacy-php-app-migration
toshimaru
0
690
Feature Flag Deep Dive
biwashi
20
5k
Autonomous Database サービス・アップデート (FY24)
oracle4engineer
PRO
0
360
Datadog による 自己完結的アプリケーションモニタリング
recruitengineers
PRO
3
130
第131回 雲勉【オンライン】AWSを9年触ってきて経験した落とし穴、ハマったポイント
iret
6
470
【Cyber-sec+】ログの森で出会ったCloudTrail との奇妙な旅
hssh2_bin
1
220
Beginner's Guide to Partitioning vs. Sharding in Postgres | Claire Giordano | Nordic PGDay 2024
clairegiordano
0
210
理想の組織も自分たちで作ろう! ―LayerXの「全員採用」を支える文化 / How to create our own ideal team
ar_tama
6
2.1k
Proposal for a fictitious company presented by JAWS-UG DE&I team 'Naniwa Musume'
hiroramos4
PRO
0
120
Featured
See All Featured
Designing for humans not robots
tammielis
247
25k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
930
How to Ace a Technical Interview
jacobian
272
22k
Code Reviewing Like a Champion
maltzj
512
39k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Product Roadmaps are Hard
iamctodd
43
9.6k
What's in a price? How to price your products and services
michaelherold
236
11k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Rails Girls Zürich Keynote
gr2m
91
13k
Faster Mobile Websites
deanohume
296
30k
Navigating Team Friction
lara
177
13k
Transcript
LIFF通話 #lifflt
自己紹介 • 名前 ◦ 松永勇太(@ufoo_yuta) • 出身地 ◦ 滋賀県 •
やってること ◦ スポーツIoTLT主催 • 最近やったこと ◦ AWS-CDKとLINE Botのハンズオン
とても感動的な出来事
これはもう何か作るしかない 応募しなきゃ(使命感)
考えたこと ビデオチャットが覇権を握る時代(多分)なのでLIFFでも作ってみたい!
実際につくったもの LIFFを用いたビデオ通話アプリ DEMO
使い方(ざっくり) CALLする側の流れ
使い方(ざっくり) CALLされる側の流れ
使った技術 • SkyWay • LIFF • React • TypeScript ソースコード(GitHub)
ビデオ通話の実装 SkyWayというSDKを用いてP2P(Peer to Peer)の通信をする Peer Peer • Peer ID •
メディアストリーム
通信のやりとり 1. 通信をかけたい側(Caller)がPeer IDを生成 2. Peer IDをクエリストリング用いて通信をかけられる側(Callee)にURLを共有 3. CalleeはURLを開いて共有されたPeer IDとコネクションを行って、メディアストリー
ム(カメラ映像と音声)を送信する 4. Callerはメディアストリームを受け取ったらCalleeに自分のメディアストリームを送り 返す URL?id={Peer ID}
Peer IDの共有方法 LIFFのShareTargetPicker機能を用いてLINEの友達に送信する Caller Callee liff.shareTargetPicker([ { type: ‘text’, text:
`https://xxx?id=${myid}` } ])
ReactでSkyWayを使う実装例 自分の記事を参照した
TypeScriptでLIFF開発するには 今まではliff-typeという非公式のnpmパッケージを使っていた
しかし今回は @line/liffという公式のnpmパッケージが使える!
公式パッケージの嬉しいところ • npmパッケージを使う利点 ◦ ReactやVueなどの開発がやりやすい ◦ エディタの入力補完機能が使える • liff-typeとの比較 ◦
htmlに<script>タグをつける必要がない ◦ tsconfigのcompilerOptionsの変更がいらない
React+TypeScriptでのLIFF実装例 自分の記事を参照した
ShareTargetPickerの実装例 自分の記事を参照した
まとめ • SkyWayを用いればビデオ通話アプリが簡単に作成できる • LIFFのライブラリでLINEアカウント連携機能を用いたウェブアプリケーションが実装 できる • 公式のLIFFのnpmパッケージでReact+TypeScriptでのLIFF開発がさらにやりや すくなる •
自分用にQiita記事を書いておくとメモ代わりになる