LIFF通話 #lifflt

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

とても感動的な出来事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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