LIFF通話

Cb88f765dd38cd942c39aacb5abbea06?s=47 ufoo68
July 27, 2020

 LIFF通話

Cb88f765dd38cd942c39aacb5abbea06?s=128

ufoo68

July 27, 2020
Tweet

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