Control DOM elements from android app

Question

I'm trying to take control over the Play/Pause html DOM elements (in a browser open in a pc) from an android device.

In the html page (in Google Chrome browser) there's a <video> tag so I can control it like this:

//js code
document.querySelector("video").play();
document.querySelector("video").pause();

But I want that to run from an android device so I'm using GCM.

I read here and got some insight but I still have some questions.

• First, since I'm writing in eclipse, and it sees no document variable, it produces an error. So how can eclipse recognize that element in the html page so I can compile and install the apk on the device?

• Where do I specify the page url I want to communicate with? (send play/pause commands)

• To run js inside java I'm using Rhino. I looked through the examples in the documentation but I'm still not sure if a @JSFunction annotation is enough to declare a js function.

Here's my code:

import com.alaa.chromote.util.SystemUiHider;
import com.google.android.gcm.GCMRegistrar;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.Toast;
import android.view.View.OnClickListener;

import org.mozilla.javascript.*;
import org.mozilla.javascript.annotations.*;

public class MainApplication extends Activity {
    private final static String GCM_SENDER_ID = "484514826047";
    private static final String LOG_TAG = "GetAClue::GCMIntentService";

    private Button playButton;
    private Button pauseButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main_application);

        playButton = (Button) findViewById(R.id.PlayButton);
        pauseButton = (Button) findViewById(R.id.PauseButton);

        playButton.setVisibility(View.INVISIBLE);
        pauseButton.setVisibility(View.VISIBLE);

        //connect to gcm
        GCMRegistrar.checkDevice( this );
        GCMRegistrar.checkManifest( this );
        final String regId = GCMRegistrar.getRegistrationId( this );
        if( regId.equals( "" ) ) {
            GCMRegistrar.register( this, GCM_SENDER_ID );
        }
        else {
            Log.v( LOG_TAG, "Already registered" );
        }

        Context.enter(); //start Rhino

        setupListeners();
    }

    @JSFunction
    public void play() { document.querySelector("video").play(); }

    @JSFunction
    public void pause() { document.querySelector("video").pause(); }

    private void setupListeners()
    {
        playButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                play();
            }
        });

        pauseButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                pause();
            }
        });
    }
    @Override
    protected void onStop() {
        Context.exit(); //stop Rhino
        super.onStop();
    }
}

How do I continue from here?

Answer 1

• First, since I'm writing in eclipse, and it sees no document variable, it produces an error. So how can eclipse recognize that element in the html page so I can compile and install the apk on the device?

  answ: On your android device you just pass a message to the chrome browser. A.k. an action variable that is set to play or stop. You chrome app will then pick up the message and act accordingly. Also you can send the url as an variable in the message if you want to be able to play different urls.

---

• Where do I specify the page url I want to communicate with? (send play/pause commands)?

  answ: Do you already created the chrome app you want and verified it works? It should check with a google cloud server for messages. That server keeps track of the url for you.

---

• To run js inside java I'm using Rhino. I looked through the examples in the documentation but I'm still not sure if a @JSFunction annotation is enough to declare a js function.?

  answ: It seems you are misunderstanding the part what the android app does (sending the play action) and what the chrome browser does (actually playing the movie)

---

I hope my answer has helped a little, feedback is appreciated :)