ApprtcDemo with local server works between browsers but not Android native to browser

Question

I am developing a chat application and done with it. Now I want to implement video chat also. After research a lot I decided to go with "WebRTC" library.

What I have done?

1) Able to run AppRtcDemo at local server and Its working fine between browsers.

Reference : http://www.webrtc.org/reference/getting-started

2) Able to build Android AppRtcDemo.But when I run it say "Cross origin does not support".

After research I found in webrtc discussion that to resolve this issue I need to set-up own turn server.

3) So I install latest rfc5766TurnServer recommended by webrtc. I got success to run turn server.

Reference : http://code.google.com/p/rfc5766-turn-server/

I do following changes to ApprtcDemo (web) and (Android) to work with my Turn server

1) apprtc.py

Replace:

turn_url = 'https://computeengineondemand.appspot.com/'
turn_url = turn_url + 'turn?' + 'username=' + user + '&key=4080218913'

With point to my turn server:

turn_url = 'http://192.168.5.85:3478/?service=turn&username=biraj'

2) index.html

Replace:

var pcConfig = {{ pc_config|safe }};

With:

var pcConfig = {"iceServers": [{"url": "stun:stun.l.google.com:19302"},            {"url":"turn:[email protected]:3479", "credential":"0x5b04123c3eec4cf0be64ab909bb2ff5b"}]};

Android

1)AppRTCDemoActivity.java

Replace:

roomInput.setText("https://apprtc.appspot.com/?r=");

With my local apprtc server:

roomInput.setText("http://192.168.5.86:8080/?r=");

2) AppRTCClient.java

In private PeerConnection.IceServer requestTurnServer(String url){} function

Replace:

connection.addRequestProperty("origin", "https://apprtc.appspot.com");

With:

connection.addRequestProperty("origin", "http://192.168.5.86:8080");

3) /assets/channel.html

Replace:

<script src="https://apprtc.appspot.com/_ah/channel/jsapi"></script>

With:

<script src="http://192.168.5.86:8080/_ah/channel/jsapi"></script>

Now my question is why this is working between browsers but not between android AppRtcDemo and browser.

When I run AppRtcDemo on android after doing above changes local camera preview is started at right-top corner and message prompt "waiting for ICEcandidates" then nothing happens.

Thanks in advance.

Thanks to All for supporting my question.After long rocky ride with ApprtcDemo I got success and it works fine.I am posting the solution.

Find the "GAEChannelClient.java" java file.

and do change as below.

/*
 * libjingle
 * Copyright 2013, Google Inc.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *  1. Redistributions of source code must retain the above copyright notice,
 *     this list of conditions and the following disclaimer.
 *  2. Redistributions in binary form must reproduce the above copyright notice,
 *     this list of conditions and the following disclaimer in the documentation
 *     and/or other materials provided with the distribution.
 *  3. The name of the author may not be used to endorse or promote products
 *     derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED
 * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
 * EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
 * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
 * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
 * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
 * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

package org.appspot.apprtc;

import java.io.InputStream;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.util.Log;
import android.webkit.ConsoleMessage;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

/**
 * Java-land version of Google AppEngine's JavaScript Channel API:
 * https://developers.google.com/appengine/docs/python/channel/javascript
 * 
 * Requires a hosted HTML page that opens the desired channel and dispatches JS
 * on{Open,Message,Close,Error}() events to a global object named
 * "androidMessageHandler".
 */
public class GAEChannelClient {
    private static final String TAG = "GAEChannelClient";
    private WebView webView;
    private final ProxyingMessageHandler proxyingMessageHandler;

    /**
     * Callback interface for messages delivered on the Google AppEngine
     * channel.
     * 
     * Methods are guaranteed to be invoked on the UI thread of |activity|
     * passed to GAEChannelClient's constructor.
     */
    public interface MessageHandler {
        public void onOpen();

        public void onMessage(String data);

        public void onClose();

        public void onError(int code, String description);
    }

    /** Asynchronously open an AppEngine channel. */
    @SuppressLint("SetJavaScriptEnabled")
    public GAEChannelClient(Activity activity, String token, MessageHandler handler) {
        webView = new WebView(activity);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setAllowFileAccessFromFileURLs(true); // Maybe you
                                                                    // don't
                                                                    // need this
                                                                    // rule
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);

        webView.setWebChromeClient(new WebChromeClient() { // Purely for
                                                            // debugging.
            public boolean onConsoleMessage(ConsoleMessage msg) {
                Log.d(TAG, "console: " + msg.message() + " at " + msg.sourceId() + ":" + msg.lineNumber());
                return false;
            }
        });
        webView.setWebViewClient(new WebViewClient() { // Purely for debugging.
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Log.e(TAG, "JS error: " + errorCode + " in " + failingUrl + ", desc: " + description);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                System.out.println("HI");
                return super.shouldOverrideUrlLoading(view, url);
            }
        });

        proxyingMessageHandler = new ProxyingMessageHandler(activity, handler, token);
        webView.addJavascriptInterface(proxyingMessageHandler, "androidMessageHandler");
//       webView.loadUrl("file:///android_asset/channel.html");
        try {
            InputStream is = activity.getAssets().open("channel.html");
            StringBuilder builder = new StringBuilder();
            byte[] buffer = new byte[1024];
            while (is.read(buffer) != -1) {
                builder.append(new String(buffer));
            }
            is.close();
            String str = builder.toString();
            webView.loadDataWithBaseURL("http://192.168.5.86:8080", str, "text/html", "utf-8", null);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    /** Close the connection to the AppEngine channel. */
    public void close() {
        if (webView == null) {
            return;
        }
        proxyingMessageHandler.disconnect();
        webView.removeJavascriptInterface("androidMessageHandler");
        webView.loadUrl("about:blank");
        webView = null;
    }

    // Helper class for proxying callbacks from the Java<->JS interaction
    // (private, background) thread to the Activity's UI thread.
    private static class ProxyingMessageHandler {
        private final Activity activity;
        private final MessageHandler handler;
        private final boolean[] disconnected = { false };
        private final String token;

        public ProxyingMessageHandler(Activity activity, MessageHandler handler, String token) {
            this.activity = activity;
            this.handler = handler;
            this.token = token;
        }

        public void disconnect() {
            disconnected[0] = true;
        }

        private boolean disconnected() {
            return disconnected[0];
        }

        @JavascriptInterface
        public String getToken() {
            return token;
        }

        @JavascriptInterface
        public void onOpen() {

            System.out.println("GAEClient : Open" );
            activity.runOnUiThread(new Runnable() {
                public void run() {
                    if (!disconnected()) {
                        handler.onOpen();
                    }
                }
            });
        }

        @JavascriptInterface
        public void onMessage(final String data) {
            System.out.println("GAEClient : Message : " +data );
            activity.runOnUiThread(new Runnable() {
                public void run() {
                    if (!disconnected()) {
                        handler.onMessage(data);
                    }
                }
            });
        }

        @JavascriptInterface
        public void onClose() {
            System.out.println("GAEClient : Close" );
            activity.runOnUiThread(new Runnable() {
                public void run() {
                    if (!disconnected()) {
                        handler.onClose();
                    }
                }
            });
        }

        @JavascriptInterface
        public void onError(final int code, final String description) {
            System.out.println("GAEClient : Erroe : " + description);
            activity.runOnUiThread(new Runnable() {
                public void run() {
                    if (!disconnected()) {
                        handler.onError(code, description);
                    }
                }
            });
        }
    }
}

Channel.html in assets folder

<html>
  <head>
    <script src="http://192.168.5.86:8080/_ah/channel/jsapi"></script>
  </head>
  <!--
  Helper HTML that redirects Google AppEngine's Channel API to a JS object named
  |androidMessageHandler|, which is expected to be injected into the WebView
  rendering this page by an Android app's class such as AppRTCClient.
  -->
  <body onbeforeunload="closeSocket()" onload="openSocket()">
    <script type="text/javascript">
      var token = androidMessageHandler.getToken();
      if (!token)
        throw "Missing/malformed token parameter: [" + token + "]";

      var channel = null;
      var socket = null;

      function openSocket() {
        channel = new goog.appengine.Channel(token);
        socket = channel.open({
          'onopen': function() { androidMessageHandler.onOpen(); },
          'onmessage': function(msg) { androidMessageHandler.onMessage(msg.data); },
          'onclose': function() { androidMessageHandler.onClose(); },
          'onerror': function(err) { androidMessageHandler.onError(err.code, err.description); }
        });
      }

      function closeSocket() {
        socket.close();
      }
    </script>
  </body>
</html>

Answer 1

Sadly I don't know if you have done these things:

1. Use the SAME stun and turn server on every application (wether PC or mobile).
2. Are you even sending the ICE candidates between the applications (I think you do, but just to verify).
3. Are you sure that the STUN/TURN url are the ones that give the error, as I can't believe that these things do about cross-origins (they shouldn't, as you are just connecting from a client to a server. Cross origin is mostly 'used' on web pages that load data from an external source. You aren't allowed to do that from an XHR). I am really thinking it has something to do with https://apprtc.appspot.com/_ah/channel/jsapi, as this is a good example of cross origin stuff.

What if you open the web page that is working in your chrome browser on mobile? What does it do then? (note that you can connect your phone to your pc to have the full developer tools chrome has. Chrome runs on your android device but you can see the devtools on your pc).

If you can provide me these answers I might be able to help you. Try to revert all those changes and just use google's TURN server, but only make that https://apprtc.appspot.com/_ah/channel/jsapi file local.

EDIT: I see you found your answer. Would you mind to share it?