2022年07月01日

LIFFでビデオ通話の実装

2022年6月現在、LINE公式アカウントは30万件を超えているようです。ECや美容室、人材等さまざまな業種で活用されています。

LINE公式アカウントにビデオ通話機能(LINEコール)も追加され、ユーザーとサービス提供者のエンゲージメントがより高まっています。

すでに運用されている、もしくは運用を検討している方もいらっしゃると思いますが、「グループ通話ができない」「録音・録画ができない」「独自の通話オプションを付与したい」という課題もあるのではないでしょうか。

この記事ではLINEアプリの概要や、LINE上でビデオ通話アプリを実装する方法について解説します。

お役立ち資料ダウンロード

オンライン体験におけるブイキューブの技術サポートのご案内

【図解】システム開発のお手伝い

ブイキューブのソリューションアーキテクトが、寄り添います!
各種ライブ配信システムのアーキテクチャについて わかりやすい構成図にてご紹介!

無料ダウンロード

公式アカウント(LINEコール)の課題

公式アカウントでのビデオ通話では以下の課題が想定されます。

(ドキュメント上から想定される課題になります)

  • 録音・録画が出来ない
  • 同時に複数の顧客との個別通話ができない
  • セキュリティポリシーのミスマッチ
  • UI/UXが固定される(LINE側のアップデートによる変更も制御できない)
  • 機能が限定される

LINEアプリの種類

LINEと連携したシステムは「LIFF(リフ)」と「LINEミニアプリ」等があります。

LIFFはLINE Front-end Frameworkの事でLINE内で機能するWebページを指します。

LINEミニアプリもLIFFと同様にLINE内で機能するアプリです。

詳細な概念は割愛しますが、この記事では審査が不要ですぐに公開できるLIFFアプリをターゲットにしています。

LIFFアプリでできる事

LIFFの公式ドキュメントはこちらになります。

LIFFアプリでできることは公式ドキュメントに記載があります。

LINE Front-end Framework(LIFF)は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。

LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。

(公式サイトから一部抜粋)

また、LIFFアプリはLIFF SDKを組み込んで実装します。LIFF SDKを利用すると以下の操作が実行できます。

  • LIFFアプリを初期化する
  • LIFFアプリが動作している環境を取得する
  • ログイン処理を行う
  • URLを開く
  • 二次元コードリーダーを表示する
  • LIFFアプリが起動された画面を取得する
  • ユーザーのプロフィールを取得する
  • ユーザーとLINE公式アカウントの友だち関係を取得する
  • 現在のページのパーマネントリンクを取得する
  • 現在のトーク画面にメッセージを送信する
  • ユーザーの友だちにメッセージを送信する(シェアターゲットピッカー)
  • LIFFアプリを閉じる

(公式サイトから一部抜粋)

基本的にウェブアプリなので実装自体は敷居が低いものとなっています。iOSであればWKWebView、AndroidであればAndroid WebViewが使用されるのでその仕様範囲であれば正常に動作すると思われます。

この記事の本題であるビデオ通話もWebRTCを利用することで実現できます。

LIFF SDKのAPIで通話画面にユーザの名前等を表示させる事もできそうです。その他にも、ウェブアプリを通して現在のトーク画面にメッセージを送信できるので会話中のメモも送信できます。

LIFFでのビデオ通話

では、実際に公式アカウントとエンドユーザーのビデオ通話を考えてみます。

前述のとおり、LIFFはWKWebViewやWebViewが使用されるのでWebRTCによるビデオ通話が可能です。iOSについては14.3以降でなければWKWebViewでウェブカメラが利用できません。このあたりは注意事項になると思います。

こちらが実際にAgora.io SDKLIFFアプリのサンプルに組み込んで試した画面になります。

liff_01

 

LINE上のウェブブラウザとPCのウェブブラウザでビデオ通話ができました。

UI/UXは独自実装できますので、要件にあった機能を通話画面に追加していく事ができます。

LIFF StarterのサンプルはNext.js、Nuxt.js、Vanilla JSの3種類が用意されていますが、今回はNext.jsに組み込んでみました。

Agora SDKとNext.jsの組み合わせは少しクセがありますのでQiitaに解説を投稿しています。

録画・録音についてもAgora.ioはオンプレミス型のSDKとクラウド型のオプションが用意されているので、お客様との通話を動画や音声ファイルとして自社のクラウドストレージに保存が可能です。

その他にもオススメの商品画像を表示させるとか様々なカスタマイズが可能となります。

又、このLINEのメッセージ内でブラウザが立ち上がる事で、離脱が減る事も期待できそうです。

LIFFの注意事項

LIFFアプリにはいくつか注意事項があります。LINE公式アカウントの注記として以下の一文があります。


「LINE公式アカウント」を通じたオンライン診療は禁止しています。オンライン診療の利用を検討されている方は、LINEヘルスケア社が提供する『LINEドクター』を公開していますので、こちらの利用を検討ください。
(公式サイトから一部抜粋)

LIFFアプリについては明記がありませんが、この注意事項がLIFFアプリにも該当する可能性もあります。もしメディカル分野でのビデオ通話用途を検討する際は、LINEにお問い合わせをしたほうがよさそうです。

LINEのユーザー情報についてもこちらに注意事項が記載されています。


ユーザー情報をサーバーに送信しないでください
(公式サイトから一部抜粋)

悪意のあるクライアントからの攻撃などを想定しているようです。
あくまで取得したユーザー情報は画面表示に活用する程度に止めておいたほうが無難なようです。
基本的なLIFFアプリの開発ガイドラインが公開されているので設計段階で熟読する必要があります。

最後に

ブラウザの進化や、LINEプラットフォームのアップデートでさらによりよいビデオ通話の仕組みが誕生していくかもしれません。
LIFFアプリとビデオ通話の組み合わせで、よりよい顧客とのエンゲージメントが得られると幸いです。

ガイドブックダウンロード

【すぐ読める!ガイドブック】ビデオ通話・ライブ配信SDK「Agora」

【大充実】通話・配信SDK「Agora」ガイドブック

通話・配信サービス開発や、配信技術のリプレイスを検討中の方、必見の内容です。
Agora SDKの特徴から活用例まで徹底解説!

無料ダウンロード
藤本 諭志

執筆者藤本 諭志

株式会社ブイキューブ 技術本部 Agora担当。 2007年ブイキューブ入社。 自社開発サービスであるV-CUBE セミナーの開発に携わる。現在はAgoraとTencent Cloudのプロダクト担当SEをしている。 スキル:Docker/AWS/Linux/DB/Ruby/PHP/JavaScript

関連記事

先頭へ戻る