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
630
LIFF通話
ufoo68
July 27, 2020
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
23
M5Stack用の指紋認証デバイスを試す
ufoo68
0
340
結婚式のクイズアプリを自作した話
ufoo68
0
350
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
480
KASHIKOIHAKO
ufoo68
0
400
LIFF通話をつくろう!
ufoo68
0
950
KASHIKOIHAKO計画その4
ufoo68
0
220
AWS CDKで作るLINE bot
ufoo68
0
310
解説!LINE bot開発
ufoo68
0
210
Other Decks in Technology
See All in Technology
0→1開発における技術選定において一番大切なこと
bicstone
1
330
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
日本におけるデータエンジニアリングのこれまでとこれから
foursue
14
2.7k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
14
35k
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
170
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
700
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
Databricks における 『MLOps』
databricksjapan
2
140
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
社内勉強会運営のコツ
senoo
6
1.2k
オブザーバビリティの Primary Signals
onk
PRO
0
550
Postman v10リリース後を振り返る
nagix
0
140
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Rails Girls Zürich Keynote
gr2m
91
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Docker and Python
trallard
33
2.7k
Faster Mobile Websites
deanohume
297
30k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
4 Signs Your Business is Dying
shpigford
175
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
The Mythical Team-Month
searls
215
42k
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記事を書いておくとメモ代わりになる