Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
LIFF通話 #lifflt
Slide 2
Slide 2 text
自己紹介 ● 名前 ○ 松永勇太(@ufoo_yuta) ● 出身地 ○ 滋賀県 ● やってること ○ スポーツIoTLT主催 ● 最近やったこと ○ AWS-CDKとLINE Botのハンズオン
Slide 3
Slide 3 text
とても感動的な出来事
Slide 4
Slide 4 text
これはもう何か作るしかない 応募しなきゃ(使命感)
Slide 5
Slide 5 text
考えたこと ビデオチャットが覇権を握る時代(多分)なのでLIFFでも作ってみたい!
Slide 6
Slide 6 text
実際につくったもの LIFFを用いたビデオ通話アプリ DEMO
Slide 7
Slide 7 text
使い方(ざっくり) CALLする側の流れ
Slide 8
Slide 8 text
使い方(ざっくり) CALLされる側の流れ
Slide 9
Slide 9 text
使った技術 ● SkyWay ● LIFF ● React ● TypeScript ソースコード(GitHub)
Slide 10
Slide 10 text
ビデオ通話の実装 SkyWayというSDKを用いてP2P(Peer to Peer)の通信をする Peer Peer ● Peer ID ● メディアストリーム
Slide 11
Slide 11 text
通信のやりとり 1. 通信をかけたい側(Caller)がPeer IDを生成 2. Peer IDをクエリストリング用いて通信をかけられる側(Callee)にURLを共有 3. CalleeはURLを開いて共有されたPeer IDとコネクションを行って、メディアストリー ム(カメラ映像と音声)を送信する 4. Callerはメディアストリームを受け取ったらCalleeに自分のメディアストリームを送り 返す URL?id={Peer ID}
Slide 12
Slide 12 text
Peer IDの共有方法 LIFFのShareTargetPicker機能を用いてLINEの友達に送信する Caller Callee liff.shareTargetPicker([ { type: ‘text’, text: `https://xxx?id=${myid}` } ])
Slide 13
Slide 13 text
ReactでSkyWayを使う実装例 自分の記事を参照した
Slide 14
Slide 14 text
TypeScriptでLIFF開発するには 今まではliff-typeという非公式のnpmパッケージを使っていた
Slide 15
Slide 15 text
しかし今回は @line/liffという公式のnpmパッケージが使える!
Slide 16
Slide 16 text
公式パッケージの嬉しいところ ● npmパッケージを使う利点 ○ ReactやVueなどの開発がやりやすい ○ エディタの入力補完機能が使える ● liff-typeとの比較 ○ htmlにタグをつける必要がない ○ tsconfigのcompilerOptionsの変更がいらない
Slide 17
Slide 17 text
React+TypeScriptでのLIFF実装例 自分の記事を参照した
Slide 18
Slide 18 text
ShareTargetPickerの実装例 自分の記事を参照した
Slide 19
Slide 19 text
まとめ ● SkyWayを用いればビデオ通話アプリが簡単に作成できる ● LIFFのライブラリでLINEアカウント連携機能を用いたウェブアプリケーションが実装 できる ● 公式のLIFFのnpmパッケージでReact+TypeScriptでのLIFF開発がさらにやりや すくなる ● 自分用にQiita記事を書いておくとメモ代わりになる