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記事を書いておくとメモ代わりになる