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
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
Охота на косуль у древних
ashapiro
0
110
偏光画像処理ライブラリを作った話
elerac
1
180
日経のデータベース事業とElasticsearch
hinatades
PRO
0
250
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.1k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
440
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
770
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.8k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.7k
Share my, our lessons from the road to re:Invent
naospon
0
150
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Applications with DynamoDB
mza
93
6.2k
Become a Pro
speakerdeck
PRO
26
5.2k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Writing Fast Ruby
sferik
628
61k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Pragmatic Product Professional
lauravandoore
32
6.4k
GraphQLとの向き合い方2022年版
quramy
44
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
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記事を書いておくとメモ代わりになる