LIFF通話#lifflt
View Slide
自己紹介● 名前○ 松永勇太(@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 Calleeliff.shareTargetPicker([{type: ‘text’,text: `https://xxx?id=${myid}`}])
ReactでSkyWayを使う実装例自分の記事を参照した
TypeScriptでLIFF開発するには今まではliff-typeという非公式のnpmパッケージを使っていた
しかし今回は@line/liffという公式のnpmパッケージが使える!
公式パッケージの嬉しいところ● npmパッケージを使う利点○ ReactやVueなどの開発がやりやすい○ エディタの入力補完機能が使える● liff-typeとの比較○ htmlにタグをつける必要がない<br/>○ tsconfigのcompilerOptionsの変更がいらない<br/>
React+TypeScriptでのLIFF実装例自分の記事を参照した
ShareTargetPickerの実装例自分の記事を参照した
まとめ● SkyWayを用いればビデオ通話アプリが簡単に作成できる● LIFFのライブラリでLINEアカウント連携機能を用いたウェブアプリケーションが実装できる● 公式のLIFFのnpmパッケージでReact+TypeScriptでのLIFF開発がさらにやりやすくなる● 自分用にQiita記事を書いておくとメモ代わりになる