テレワークで日本を変える|Web会議・テレビ会議(TV会議)のブイキューブ

テレワークで日本を変える|テレビ会議(TV会議)・Web会議・電話会議のブイキューブ

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

  • Android
  • iOS
  • webView
  • WebRTC
  • Agora.io

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

Android/iOS共にWebViewでWebRTCの映像が受信できるか検証してみました。
WebRTCの配信基盤にはagora.ioを利用します。

前提

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

環境

配信側ブラウザ: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を利用しています。

host.html:配信側
audience.html:受信側(WebView側で指定するページ)

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

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

Androidの実装

Androidについての実装については特に難しい点はありませんでした。
Webアプリケーション側の修正をすぐに反映させる為にsetCacheMode(WebSettings.LOAD_NO_CACHE);にてキャッシュを読み込まないようにする程度かと思います。

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);

    }

結果画面

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

iOSの実装

一番最初はWKWebViewを利用して試していました。
「iOS」「WebView」で検索するとよくヒットします。
結果としてはこのWKWebViewでは映像の視聴はできませんでした。
(やる方法はあるのかもしれませんが。。。)

ViewController.swift
let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: self.view.frame, configuration: config)

一応、javascriptは動いているようですが、映像が映りません。またalert()等も動作せず、少しデバッグがしにくい状況でした。
そこで、SFSafariViewControllerというものを見つけたのでこれで動作確認をしてみました。

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)
        }
    }

このコードで無事に動作しました。

結果画面

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

最後に

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

agora.io SDK イメージ
agora.io SDK

大規模・安価・すぐに使える
ライブ配信・ビデオ通話・音声通話SDK

 

先頭へ戻る