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
1
31
初めて開発リーダーをやってみた話
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
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
670
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
130
はじめてのOSS開発からみえたGo言語の強み
shibukazu
4
1k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
「Linux」という言葉が指すもの
sat
PRO
4
140
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Unsuck your backbone
ammeep
671
58k
Building an army of robots
kneath
306
46k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Embracing the Ebb and Flow
colly
87
4.8k
4 Signs Your Business is Dying
shpigford
184
22k
Side Projects
sachag
455
43k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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記事を書いておくとメモ代わりになる