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
700
LIFF通話
ufoo68
July 27, 2020
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
82
M5Stack用の指紋認証デバイスを試す
ufoo68
0
630
結婚式のクイズアプリを自作した話
ufoo68
0
550
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
620
KASHIKOIHAKO
ufoo68
0
510
LIFF通話をつくろう!
ufoo68
0
1.3k
KASHIKOIHAKO計画その4
ufoo68
0
270
AWS CDKで作るLINE bot
ufoo68
0
350
解説!LINE bot開発
ufoo68
0
260
Other Decks in Technology
See All in Technology
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
270
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
130
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
340
クラウド食堂とは?
hiyanger
0
110
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
260
日経のデータベース事業とElasticsearch
hinatades
PRO
0
230
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
330
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
540
Goで作って学ぶWebSocket
ryuichi1208
3
2.7k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.1k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
170
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
What's in a price? How to price your products and services
michaelherold
244
12k
The Language of Interfaces
destraynor
156
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Designing for humans not robots
tammielis
250
25k
Practical Orchestrator
shlominoach
186
10k
KATA
mclloyd
29
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Writing Fast Ruby
sferik
628
61k
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記事を書いておくとメモ代わりになる