LIFF通話

Transcript

1. LIFF通話
   #lifflt
   

   View Slide

2. 自己紹介
   ● 名前
   ○ 松永勇太（@ufoo_yuta）
   ● 出身地
   ○ 滋賀県
   ● やってること
   ○ スポーツIoTLT主催
   ● 最近やったこと
   ○ AWS-CDKとLINE Botのハンズオン
   

   View Slide

3. とても感動的な出来事
   

   View Slide

4. これはもう何か作るしかない
   応募しなきゃ（使命感）
   

   View Slide

5. 考えたこと
   ビデオチャットが覇権を握る時代（多分）なのでLIFFでも作ってみたい！
   

   View Slide

6. 実際につくったもの
   LIFFを用いたビデオ通話アプリ
   DEMO
   

   View Slide

7. 使い方（ざっくり）
   CALLする側の流れ
   

   View Slide

8. 使い方（ざっくり）
   CALLされる側の流れ
   

   View Slide

9. 使った技術
   ● SkyWay
   ● LIFF
   ● React
   ● TypeScript
   ソースコード（GitHub）
   

   View Slide

10. ビデオ通話の実装
    SkyWayというSDKを用いてP2P（Peer to Peer）の通信をする
    Peer Peer
    ● Peer ID
    ● メディアストリーム
    

    View Slide

11. 通信のやりとり
    1. 通信をかけたい側（Caller）がPeer IDを生成
    2. Peer IDをクエリストリング用いて通信をかけられる側（Callee）にURLを共有
    3. CalleeはURLを開いて共有されたPeer IDとコネクションを行って、メディアストリー
    ム（カメラ映像と音声）を送信する
    4. Callerはメディアストリームを受け取ったらCalleeに自分のメディアストリームを送り
    返す
    URL?id={Peer ID}
    

    View Slide

12. Peer IDの共有方法
    LIFFのShareTargetPicker機能を用いてLINEの友達に送信する
    Caller Callee
    liff.shareTargetPicker([
    {
    type: ‘text’,
    text: `https://xxx?id=${myid}`
    }
    ])
    

    View Slide

13. ReactでSkyWayを使う実装例
    自分の記事を参照した
    

    View Slide

14. TypeScriptでLIFF開発するには
    今まではliff-typeという非公式のnpmパッケージを使っていた
    

    View Slide

15. しかし今回は
    @line/liffという公式のnpmパッケージが使える！
    

    View Slide

16. 公式パッケージの嬉しいところ
    ● npmパッケージを使う利点
    ○ ReactやVueなどの開発がやりやすい
    ○ エディタの入力補完機能が使える
    ● liff-typeとの比較
    ○ htmlにタグをつける必要がない<br/>○ tsconfigのcompilerOptionsの変更がいらない<br/>

    View Slide

17. React+TypeScriptでのLIFF実装例
    自分の記事を参照した
    

    View Slide

18. ShareTargetPickerの実装例
    自分の記事を参照した
    

    View Slide

19. まとめ
    ● SkyWayを用いればビデオ通話アプリが簡単に作成できる
    ● LIFFのライブラリでLINEアカウント連携機能を用いたウェブアプリケーションが実装
    できる
    ● 公式のLIFFのnpmパッケージでReact＋TypeScriptでのLIFF開発がさらにやりや
    すくなる
    ● 自分用にQiita記事を書いておくとメモ代わりになる
    

    View Slide