LIFFでWebRTCが動くかを検証してみた

この投稿はLINEBot&Clova Advent Calendar 2018の6日目の投稿です。前日の投稿は[sumihiro3](https://qiita.com/sumihiro3)さんの[Clovaスキル開発での単体テストのすすめ](https://qiita.com/sumihiro3/items/da490aab10499b3c169f)です。

今回はLIFF上でWebRTCが動くか検証してみました。

# LIFFとは？
LINE Front-end Frameworkのことで、LINEのトークルーム内でWebアプリを起動することができ、そのWebアプリからトークルームにテキストや画像を送信することができます。

[LINE Front-end Framework - LINE Developers](https://developers.line.me/ja/docs/liff/overview/)

LINEだけで操作を完結できるため、別のアプリを起動する必要がなくシンプルな操作で、UXの改善に役立ちます。

# WebRTCとは？

WebRTC(Web Real-Time Communication)は、Webブラウザーにプラグインを入れなくてもWebブラウザ上でリアルタイムコミュニケーションを可能にするAPIです。
WebRTCを使うと、簡単に映像、音声、ファイル共有などをやり取りすることができます。
Web上でビデオ通話アプリを組み込む時などに使用されます。

[WebRTC Home | WebRTC](https://webrtc.org/)

# 環境
- PC(MacOS high sierra) 
  - 使用したブラウザ Chrome M70
- iOS(iPhone8)
  - iOS12.0.1
  - LINE ver8.16.0
- Android(Galaxy S7 Edge)
  - Android 8.0.0
  - LINE v8.16.2

# 結果
先に結果から

iOS端末（iPhone8）とAndroid端末（Galaxy S7 Edge）の2種類で検証しましたが
**iOSのLIFFではWebRTCは動きませんでした。**
**AndroidのLIFFではWebRTCは動きました。しかし自分の環境ではAndroidから映像は送れなかった** 
という結果になりました。


以下、どのように検証したか

# まずはWebアプリを作成
LIFFで使用するためのWebアプリを作りました。
WebRTCの生のAPIを使うのは結構きついので、実装にはSkyWayを使いました。
[SkyWay - Enterprise Cloud WebRTC Platform](https://webrtc.ecl.ntt.com/)

だいたい、公式のサンプルを元に作ってます。
かなり雑ですが、`getUserMedia`ボタンで自身のカメラ映像を取得したあとに、通話したい相手のpeerIDを直接指定して、ビデオチャットをするアプリです。

<img width="1513" alt="SkyWay_Handson_と_SkyWay_Handson.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/e5b2cd8b-8497-10d0-c435-42fc64df91d0.jpeg">

なお、`getUserMedia`ボタンを設置している理由は、LIFFの開発上のガイドラインに
[LINE Front-end Framework](https://developers.line.me/ja/docs/liff/overview/)

```
位置情報の取得やカメラやマイクへのアクセスなど、デバイスまたはOSの機能を利用するAPIは、必ずユーザーアクションをトリガーとして実行されるように実装します。
```

という記述があるので、ユーザーがボタンを押すことでカメラの映像を取得するようにしています。

Webアプリを作ったら、HEROKUやGitHubPagesなどにホスティングします。
httpsで接続できたら大丈夫です。

```
LIFFアプリとLIFFアプリ内で開くコンテンツのURLスキームはhttpsである必要があります。
スキームがhttpのコンテンツは、LINE内のブラウザで表示されます。
この場合、LIFFアプリとして登録されているウェブアプリでも、LIFFアプリとして動作しません。
```

僕は今回はNowを使いました
[Now – Global Serverless Deployments](https://zeit.co/now)


## LIFFアプリの登録
次にホスティングしたWebアプリをLIFFアプリとして登録します。

まずは、下記ページを参考にLIFFを利用するためのチャネルを作成します。
[LIFFを利用するには](https://developers.line.me/ja/docs/liff/getting-started/)

次にLIFFアプリを追加します
[LIFFアプリを追加する](https://developers.line.me/ja/docs/liff/registering-liff-apps/)

少し前までは、APIを使って登録する必要があったみたいですが、今はダッシュボード上で登録が行えるので便利ですね。
<img width="588" alt="LINE_Developers.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/9d072e65-e3f4-9927-a261-2815d2aa7275.jpeg">

こんな感じで追加します。
<img width="729" alt="LINE_Developers.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/d9f4d1b3-796d-aa74-c71c-a1d773a8a730.jpeg">


## トークルームでLIFF URLを開く

登録すると `line://app/〇〇〇〇`のような、LIFF URLというものが発行されます。
これをトークルームで開くようにします。

Botを作って、LIFF URLを送ってもいいですが、一番簡単なのは、[LINE@MANAGER](https://admin-official.line.me/)でチャネルの自動応答メッセージにLIFF URLを入れる方法です。

<img width="991" alt="LINE__MANAGER.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/eb1e3808-563b-4dfa-e3f6-b499617c7300.jpeg">

こんな感じですると、何を送っても、LIFF URLを返してくれます。

![5.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/8ba193e2-371d-a52d-f654-c3c2bc1da062.jpeg)

あとは、LIFF URLをタップするだけです。

# 結果一覧
念のため、デフォルトのブラウザで動いたかも入れています

## iOS(safari) - PC(chrome)
- iOS
    - 動く
    - 不具合なのか映像は真っ暗
![IMG_7702.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/80b449d5-41f7-9f20-28ef-a09350dcc5c2.jpeg)

 

- PC
    - ちゃんとiOSの映像も送られてきている
<img width="840" alt="SkyWay_Handson.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/ab1f4e02-d505-e354-0a4c-a4db1d9b81f2.jpeg">


## iOS(LIFF)
- iOS
    - PeerIDが取れてない
    - getUserMediaもできない
![IMG_7700.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/86f9c5a0-085a-53fa-b94c-b9713342e541.jpeg)


## Android(Chrome) - PC(Chrome)
- Android
    - 動く
![7.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/17b8ae14-558d-61e0-8566-bb077be4539f.jpeg)

- PC
    - 動く
<img width="828" alt="SkyWay_Handson.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/0e4df785-7250-4023-1d9c-e3c8b07f0074.jpeg">


## Android(LIFF) - PC(Chrome)

- Android
    - getUserMediaはできない
    - peerIDは取得できる
    - PCからの映像の受信はできる
![8.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/f5b22e9f-2b56-a210-1a6b-6940ed2ba939.jpeg)

- PC
    - 映像を送れている
    - Androidからの映像は受け取れていない
<img width="544" alt="SkyWay_Handson.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/4937a46e-20ac-bd1b-3cae-e32dafc3da12.jpeg">

# 考察

iOSのLIFFでWebRTCが使えなかった理由は
こちらの記事が参考になります。
[iOS11でWebRTCに対応されたので詳細な調査を行った。 - TAMINIF’s blog](http://taminif.hatenablog.jp/entry/2017/10/03/005306)
公式の記述でも
[LINE Front-end Framework](https://developers.line.me/ja/docs/liff/overview/)

```
iOS：iOS 8以降。iOS 9以降ではWKWebView、iOS 9未満ではUIWebViewが使用されます。
```
LIFFではWKWebViewとUIWebViewが使われているため、getUserMediaなどのAPIが生えていないようです。


Androidについてはあまり詳しくないのですが
話によるとLIFF上でAndroid端末の種類によってカメラなどのデバイス機能が使えるものと使えないものなどがあるということなので、今回検証に使用したGalaxy S7 Edge以外の端末で検証したら、getUserMediaが使える端末が見つかるかもしれません。

# 最後に
Androidならなんとかいけそうな感じはしますが
LIFFでWebRTCを完璧に動かすにはもう少し時間がかかりそうですね