WebRTC와 WebView의 조합에 대해

Android/iOS 모두 WebView에서 WebRTC의 영상을 수신할 수 있는지 검증해 보았습니다.
WebRTC 배포 기반에는 아고라. 이오을 사용합니다.

전제

이번 검증에 대해서는 WebView측으로부터의 영상 송신은 시도하지 않습니다.
getUserMedia() 근처가 제대로 작동하지 않는다는 기사를 몇 가지 보이고 있기 때문입니다.
(혹시 움직이고 있을지도 모릅니다만)
agora.io의 작동 상태는 아래에 문서가 있습니다.
htps : // / cs. 아고라. 이오 / 엔 / 후 qs / ぇ b_ 온_ 모비

환경

게재 측 브라우저 : 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에 대한 구현에 특별한 어려움은 없었습니다.
웹 어플리케이션측의 수정을 곧바로 반영시키기 위해 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에 관한 문의는 이쪽으로부터