公式アカウントでのビデオ通話では以下の課題が想定されます。
（ドキュメント上から想定される課題になります）
LINEと連携したシステムは「LIFF（リフ）」と「LINEミニアプリ」等があります。
LIFFはLINE Front-end Frameworkの事でLINE内で機能するWebページを指します。
LINEミニアプリもLIFFと同様にLINE内で機能するアプリです。
詳細な概念は割愛しますが、この記事では審査が不要ですぐに公開できるLIFFアプリをターゲットにしています。
LIFFの公式ドキュメントはこちらになります。
LIFFアプリでできることは公式ドキュメントに記載があります。
LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。
LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。
(公式サイトから一部抜粋)
また、LIFFアプリはLIFF SDKを組み込んで実装します。LIFF SDKを利用すると以下の操作が実行できます。
(公式サイトから一部抜粋)
基本的にウェブアプリなので実装自体は敷居が低いものとなっています。iOSであればWKWebView、AndroidであればAndroid WebViewが使用されるのでその仕様範囲であれば正常に動作すると思われます。
この記事の本題であるビデオ通話もWebRTCを利用することで実現できます。
LIFF SDKのAPIで通話画面にユーザの名前等を表示させる事もできそうです。その他にも、ウェブアプリを通して現在のトーク画面にメッセージを送信できるので会話中のメモも送信できます。
では、実際に公式アカウントとエンドユーザーのビデオ通話を考えてみます。
前述のとおり、LIFFはWKWebViewやWebViewが使用されるのでWebRTCによるビデオ通話が可能です。iOSについては14.3以降でなければWKWebViewでウェブカメラが利用できません。このあたりは注意事項になると思います。
こちらが実際にAgora.io SDKをLIFFアプリのサンプルに組み込んで試した画面になります。
LINE上のウェブブラウザとPCのウェブブラウザでビデオ通話ができました。
UI/UXは独自実装できますので、要件にあった機能を通話画面に追加していく事ができます。
LIFF StarterのサンプルはNext.js、Nuxt.js、Vanilla JSの３種類が用意されていますが、今回はNext.jsに組み込んでみました。
Agora SDKとNext.jsの組み合わせは少しクセがありますのでQiitaに解説を投稿しています。
録画・録音についてもAgora.ioはオンプレミス型のSDKとクラウド型のオプションが用意されているので、お客様との通話を動画や音声ファイルとして自社のクラウドストレージに保存が可能です。
その他にもオススメの商品画像を表示させるとか様々なカスタマイズが可能となります。
又、このLINEのメッセージ内でブラウザが立ち上がる事で、離脱が減る事も期待できそうです。
LIFFアプリにはいくつか注意事項があります。LINE公式アカウントの注記として以下の一文があります。
「LINE公式アカウント」を通じたオンライン診療は禁止しています。オンライン診療の利用を検討されている方は、LINEヘルスケア社が提供する『LINEドクター』を公開していますので、こちらの利用を検討ください。
(公式サイトから一部抜粋)
LIFFアプリについては明記がありませんが、この注意事項がLIFFアプリにも該当する可能性もあります。もしメディカル分野でのビデオ通話用途を検討する際は、LINEにお問い合わせをしたほうがよさそうです。
LINEのユーザー情報についてもこちらに注意事項が記載されています。
ユーザー情報をサーバーに送信しないでください
(公式サイトから一部抜粋)
悪意のあるクライアントからの攻撃などを想定しているようです。
あくまで取得したユーザー情報は画面表示に活用する程度に止めておいたほうが無難なようです。
基本的なLIFFアプリの開発ガイドラインが公開されているので設計段階で熟読する必要があります。
ブラウザの進化や、LINEプラットフォームのアップデートでさらによりよいビデオ通話の仕組みが誕生していくかもしれません。
LIFFアプリとビデオ通話の組み合わせで、よりよい顧客とのエンゲージメントが得られると幸いです。