Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LIFF通話

ufoo68
July 27, 2020

 LIFF通話

ufoo68

July 27, 2020
Tweet

More Decks by ufoo68

Other Decks in Technology

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