LIFF通話

Transcript

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