WebRTCとWebViewの組み合わせについて

#WebRTCとWebViewの組み合わせについて
Android/iOS共にWebViewでWebRTCの映像が受信できるか検証してみました。
WebRTCの配信基盤には[agora.io](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=09cf8d59b7a8e7821b89)を利用します。

#前提
今回の検証についてはWebView側からの映像送信は試しません。
getUserMedia()あたりが正常に動作しないとの記事をいくつか見かけている為です。
（もしかしたら動いているかもしれませんが）
agora.ioでの動作状況については以下にドキュメントがあります。
https://docs.agora.io/en/faqs/web_on_mobile

#環境
配信側ブラウザ:Chrome76.0.3809.132
視聴側デバイス:
・Huawei P20 lite/Android9.0
・Xperia Z5 Premium/Android5.1
・iPhone7/iOS12.4.1
SDK:agora.io WebSDK2.8.0

#WebRTCの実装
配信側、受信側共にagora.ioのWebSDKを利用しています。
[サンプルコードはこちら](https://github.com/fu-jimoto/AgoraIO-WebView/tree/master/web)
host.html：配信側
audience.html：受信側(WebView側で指定するページ)

ポイントとしてはコーデックをVP8に指定しているところです。
廉価版のHUAWEI端末ではH264のデコードに対応していないもの(P20 lite等）がある為です。
尚、iOSのSafariは12.1からVP8対応しております。

```javascript:host.html

  client = AgoraRTC.createClient({mode: 'live',codec:'vp8'});
```



#Androidの実装
Androidについての実装については特に難しい点はありませんでした。
Webアプリケーション側の修正をすぐに反映させる為にsetCacheMode(WebSettings.LOAD_NO_CACHE);にてキャッシュを読み込まないようにする程度かと思います。
[サンプルコードはこちら](https://github.com/fu-jimoto/AgoraIO-WebView/tree/master/android)

```java:MainActivity.java
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView  myWebView = (WebView)findViewById(R.id.webView1);

        myWebView.setWebViewClient(new WebViewClient());
        myWebView.setWebChromeClient(new WebChromeClient());
        myWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

        myWebView.loadUrl("URL");//URLはaudience.htmlを指定

        myWebView.getSettings().setJavaScriptEnabled(true);

    }
```

##結果画面
<img width="500" alt="4f19937b-9a0f-635c-a618-d259cd6ae6c7.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/4f19937b-9a0f-635c-a618-d259cd6ae6c7.jpeg">


特に問題なく動作しています。

#iOSの実装
[サンプルコードはこちら](https://github.com/fu-jimoto/AgoraIO-WebView/tree/master/iOS/webView)
一番最初はWKWebViewを利用して試していました。
「iOS」「WebView」で検索するとよくヒットします。
結果としてはこのWKWebViewでは映像の視聴はできませんでした。
（やる方法はあるのかもしれませんが。。。）

```swift:ViewController.swift
let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: self.view.frame, configuration: config)
```
一応、javascriptは動いているようですが、映像が映りません。またalert()等も動作せず、少しデバッグがしにくい状況でした。
そこで、SFSafariViewControllerというものを見つけたのでこれで動作確認をしてみました。

```swift:ViewController.swift
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let url = URL(string:"URL")
        if let url = url{
            let vc = SFSafariViewController(url: url) //URLはaudience.htmlを指定
            present(vc, animated: true, completion: nil)
        }
    }
```
このコードで無事に動作しました。

##結果画面

<img width="500" alt="IMG_383931B69E73-1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/cfb79d24-d210-cfb2-689b-f6b1fc3e346b.jpeg">

「SFSafariViewControllerはiOS9.0以降使用可能でSafariの標準機能を備えたViewControllerを作成できます。」とのこと。


##最後に
実際にプロダクトとして利用するには他の問題があるかもしれませんが、ひとまずWebViewでの映像再生は可能ということが分かりました。

---
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=09cf8d59b7a8e7821b89)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=09cf8d59b7a8e7821b89)