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
740
LIFF通話
ufoo68
July 27, 2020
Tweet
Share
More Decks by ufoo68
See All by ufoo68
OpenAIでクッキー型を作る
ufoo68
0
30
初めて開発リーダーをやってみた話
ufoo68
0
110
M5Stack用の指紋認証デバイスを試す
ufoo68
0
750
結婚式のクイズアプリを自作した話
ufoo68
0
620
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
670
KASHIKOIHAKO
ufoo68
0
570
LIFF通話をつくろう!
ufoo68
0
1.4k
KASHIKOIHAKO計画その4
ufoo68
0
290
AWS CDKで作るLINE bot
ufoo68
0
380
Other Decks in Technology
See All in Technology
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
450
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
140
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.3k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
370
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
320
AI開発ツールCreateがAnythingになったよ
tendasato
0
120
人工衛星のファームウェアをRustで書く理由
koba789
11
6.6k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
430
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.6k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
280
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Designing for Performance
lara
610
69k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Automating Front-end Workflow
addyosmani
1370
200k
A Tale of Four Properties
chriscoyier
160
23k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Done Done
chrislema
185
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building Adaptive Systems
keathley
43
2.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Making Projects Easy
brettharned
117
6.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
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記事を書いておくとメモ代わりになる