#27 (#29)

docs/README.md

@@ -91,6 +91,25 @@ To use the OpenTok Cordova Plugin, include the OpenTok JavaScript file in your H
 	</tr>
 </table>
 
+## Positioning the camera's behind or before webview
+It is possible to put the native camera's for publishers and subscribers behind the Cordova Webview, enabling you to put HTML buttons on top of the video. You can place video's behind the Webview with a negative `z-index`. Also your HTML should be transparent. For example you need to have something like this in your CSS for the transparency:
+```css
+# We can use class OT_root in our repository, but the main things is that the publisher container gets a black background color from OT, this needs to be removed in your CSS!
+html, body, .OT_root {
+  background: transparent !important;
+}
+
+# Each publisher and eachsubscriber video element should have display none
+.OT_root video {
+  display: none !important;
+}
+```
+The `z-index` is respected as follows:
+* If no `z-index `is given the behavior is the same as now.
+* If two videos have the same `z-index` (or don't have it) and share position, last one wins.
+* Videos with negative `z-index` are just visible if body's `background-color` or `background` is set to transparent.
+* A video with `z-index: -3` will be placed behind videos with `z-index: -1`, `z-index: 0`, `z-index: 10`, or unset `z-index`.
+* A video with `z-index: 999` will be placed on top of videos with `z-index: 888`, `z-index: 0`, `z-index: -10`, or unset `z-index`.
 
 ## Important Notes!
 

plugin.xml

@@ -29,6 +29,7 @@
       <config-file target="config.xml" parent="/*">
         <feature name="OpenTokPlugin">
           <param name="android-package" value="com.tokbox.cordova.OpenTokAndroidPlugin"/>
+          <param name="onload" value="true" />
         </feature>
       </config-file>  
 
@@ -76,13 +77,12 @@
       </config-file>
 
       <!-- Adopts project's config.xml to include the OpenTokPlugin and domain whitelists -->
-      <config-file target="config.xml" parent="/*/plugins">
-          <feature name="OpenTokPlugin">
-              <param name="ios-package" value="OpenTokPlugin"/>
-          </feature>
-      </config-file>
       <config-file target="config.xml" parent="/*">
         <access origin="*" />
+        <feature name="OpenTokPlugin">
+          <param name="ios-package" value="OpenTokPlugin"/>
+          <param name="onload" value="true"/>
+        </feature>
       </config-file>
 
       <!-- add required entries into plist file -->

src/android/OpenTokAndroidPlugin.java

@@ -23,6 +23,7 @@
 import android.content.Context;
 import android.content.SharedPreferences;
 import android.content.SharedPreferences.Editor;
+import android.graphics.Color;
 import android.util.Log;
 import android.util.DisplayMetrics;
 import android.view.View;
@@ -78,11 +79,10 @@ public class RunnableUpdateViews implements Runnable {
         public View mView;
         public ArrayList<RunnableUpdateViews> allStreamViews;
 
-
         public class CustomComparator implements Comparator<RunnableUpdateViews> {
             @Override
             public int compare(RunnableUpdateViews object1, RunnableUpdateViews object2) {
-                return object2.getZIndex() - object1.getZIndex();
+                return object1.getZIndex() - object2.getZIndex();
             }
         }
 
@@ -94,13 +94,19 @@ public void updateZIndices() {
             if (myPublisher != null) {
                 allStreamViews.add(myPublisher);
             }
+
+            // Sort is still needed, because we need to sort from negative to positive for the z translation.
             Collections.sort(allStreamViews, new CustomComparator());
 
             for (RunnableUpdateViews viewContainer : allStreamViews) {
-                ViewGroup parent = (ViewGroup) cordova.getActivity().findViewById(android.R.id.content);
-                if (null != parent) {
-                    parent.removeView(viewContainer.mView);
-                    parent.addView(viewContainer.mView);
+                // Set depth location of camera view based on CSS z-index.
+                // See: https://developer.android.com/reference/android/view/View.html#setTranslationZ(float)
+                viewContainer.mView.setTranslationZ(viewContainer.getZIndex());
+
+                // If the zIndex is 0(default) bring the view to the top, last one wins.
+                // See: https://github.com/saghul/cordova-plugin-iosrtc/blob/5b6a180b324c8c9bac533fa481a457b74183c740/src/PluginMediaStreamRenderer.swift#L191
+                if(viewContainer.getZIndex() == 0) {
+                    viewContainer.mView.bringToFront();
                 }
             }
         }
@@ -198,7 +204,6 @@ public void destroyPublisher() {
         public void run() {
             Log.i(TAG, "view running on UIVIEW!!!");
             if (mPublisher == null) {
-                ViewGroup frame = (ViewGroup) cordova.getActivity().findViewById(android.R.id.content);
                 boolean audioFallbackEnabled = true;
                 boolean videoTrack = true;
                 boolean audioTrack = true;
@@ -243,11 +248,18 @@ public void run() {
                 mPublisher.setAudioFallbackEnabled(audioFallbackEnabled);
                 mPublisher.setPublishAudio(publishVideo);
                 mPublisher.setPublishAudio(publishAudio);
+
+                this.mView = mPublisher.getView();
+                ((ViewGroup) webView.getView().getParent()).addView(this.mView);
+
+                // Set depth location of camera view based on CSS z-index.
+                // See: https://developer.android.com/reference/android/view/View.html#setTranslationZ(float)
+                this.mView.setTranslationZ(this.getZIndex());
+
                 if (cameraName.equals("back")) {
                     mPublisher.cycleCamera();
                 }
-                this.mView = mPublisher.getView();
-                frame.addView(this.mView);
+
                 mSession.publish(mPublisher);
             }
             super.run();
@@ -319,9 +331,14 @@ public void run() {
                 mSubscriber.setVideoListener(this);
                 mSubscriber.setSubscriberListener(this);
                 mSubscriber.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL);
-                ViewGroup frame = (ViewGroup) cordova.getActivity().findViewById(android.R.id.content);
                 this.mView = mSubscriber.getView();
-                frame.addView(this.mView);
+
+                ((ViewGroup) webView.getView().getParent()).addView(this.mView);
+
+                // Set depth location of camera view based on CSS z-index.
+                // See: https://developer.android.com/reference/android/view/View.html#setTranslationZ(float)
+                this.mView.setTranslationZ(this.getZIndex());
+
                 mSession.subscribe(mSubscriber);
                 Log.i(TAG, "subscriber view is added to parent view!");
             }
@@ -401,6 +418,10 @@ public void initialize(CordovaInterface cordova, CordovaWebView webView) {
         _cordova = cordova;
         _webView = webView;
 
+        // Make the web view transparent.
+        _webView.getView().setBackgroundColor(Color.argb(1, 0, 0, 0));
+
+
         cordova.getActivity().runOnUiThread(new Runnable() {
             @Override
             public void run() {
@@ -766,25 +787,25 @@ public void logOT() {
         RequestQueue queue = Volley.newRequestQueue(this.cordova.getActivity().getApplicationContext());
         String url = "https://hlg.tokbox.com/prod/logging/ClientEvent";
         StringRequest postRequest = new StringRequest(Request.Method.POST, url,
-            new Response.Listener<String>() 
+            new Response.Listener<String>()
             {
                 @Override
                 public void onResponse(String response) {
                     // response
                     Log.i(TAG, "Log Response: " + response);
                 }
-            }, 
-            new Response.ErrorListener() 
+            },
+            new Response.ErrorListener()
             {
                  @Override
                  public void onErrorResponse(VolleyError error) {
                      // error
                      Log.i(TAG, "Error logging");
                }
             }
-        ) {     
+        ) {
             @Override
-            protected Map<String, String> getParams() 
+            protected Map<String, String> getParams()
             {
                     JSONObject payload = new JSONObject();
                     try {
@@ -793,7 +814,7 @@ protected Map<String, String> getParams()
                     } catch (JSONException e) {
                         Log.i(TAG, "Error creating payload json object");
                     }
-                    Map<String, String>  params = new HashMap<String, String>();  
+                    Map<String, String>  params = new HashMap<String, String>();
                     params.put("action", "cp_initialize");
                     params.put("payload_type", "info");
                     params.put("partner_id", apiKey);
@@ -892,4 +913,4 @@ public void onStreamVideoTypeChanged(Session arg0, Stream arg1,
         // TODO Auto-generated method stub
 
     }
-}
+}