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
650
LIFF通話
ufoo68
July 27, 2020
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
37
M5Stack用の指紋認証デバイスを試す
ufoo68
0
410
結婚式のクイズアプリを自作した話
ufoo68
0
410
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
520
KASHIKOIHAKO
ufoo68
0
420
LIFF通話をつくろう!
ufoo68
0
1k
KASHIKOIHAKO計画その4
ufoo68
0
240
AWS CDKで作るLINE bot
ufoo68
0
310
解説!LINE bot開発
ufoo68
0
230
Other Decks in Technology
See All in Technology
How to Think Like a Performance Engineer
csswizardry
4
590
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
地理情報とAPIのトレンド
nagix
0
160
簡単に始めるSnowflakeの機械学習
nayuts
1
190
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Six Lessons from altMBA
skipperchong
24
3.2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Debugging Ruby Performance
tmm1
71
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
A designer walks into a library…
pauljervisheath
201
24k
Typedesign – Prime Four
hannesfritz
37
2.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
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記事を書いておくとメモ代わりになる