Libstreaming: How to navigate from SurfaceView screen(Sending Video+Audio Streams to wowza) to HTML Page in Android Phonegap - angularjs

Question

I am creating one phonegap application using Libstreaming for Video and Audio streaming. I have login and Home screen. On Home screen, there is a button "Start Streaming", on click of this button It launches the camera to start streaming which sends audio and video streams to WOWZA media server. The camera preview has one surface view on which video is getting played.
The camera preview has one Back button over SurfaceView to back on Home screen. My issue is that, On click of back button Camera preview should be destroyed and It should redirect to Home screen (Navigation from Android SurfaceView to HTML page).
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/surface_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:background="#android:color/black" >
<!-- Below surface view is used to to send rtsp audio+video stream to wowza server -->
<net.majorkernelpanic.streaming.gl.SurfaceView
android:id="#+id/surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center" />
<!-- button to halt the camera preview and go back on to the main screen -->
<Button
android:id="#+id/btnGoBack"
android:layout_width="60dp"
android:layout_height="40dp"
android:visibility="visible"
android:text="Back"
android:layout_alignTop="#+id/surface_view"
android:layout_alignParentLeft="true"
android:textSize="14dp"
/></RelativeLayout>

Answer 1

I have done it myself. It looks big but quite simple. All you need to do is, define a click method of back button (which is on the SurfaceView) in your activity class (Not MainActivity as follows-
public class LiveStreamingActivity extends Activity implements RtspClient.Callback, Session.Callback, SurfaceHolder.Callback {
private static SurfaceView mSurfaceView;
private Button btnGoBack;
private SurfaceHolder mHolder;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
if (!LibsChecker.checkVitamioLibs(this))
return;
mSurfaceView = (SurfaceView) findViewById(R.id.surface_view);
btnGoBack = (Button) findViewById(R.id.btnGoBack);
mHolder = mSurfaceView.getHolder();
mHolder.addCallback(this);
/* click listener of back button */
btnGoBack.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
try {
MainActivity.isFirstTime = true;
/* on click of back button finish the current activity
* which will destroy the surfaceview and will go back on MainActivity
* by referring the Android Activity lifecycle, OnResume() method of MainActivity
* would be called where you can call javascript function directly.
*/
finish();// callback lifecycle: "onPause", "onStop", and at last "onDestroy"
} catch (Exception e) {
e.printStackTrace();
}
}
});
}}
MainActivity.java:
You have to declare a field ("isFirstTime = false") to put a logic for calling javascript function in OnResume() method. (For better understanding please refer Android activity lifecycle).
public class MainActivity extends CordovaActivity {
public static boolean isFirstTime = false;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
loadUrl(launchUrl);
}
#Override public void onResume(){
super.onResume();
System.out.println("onResume main activity");
if(isFirstTime){System.out.println("Inside onResume");
loadUrl("javascript:launchProfile()");
}
}
#Override public void onPause(){
super.onPause();
System.out.println("onPause main activity");
isFirstTime = false;
}}
Javascript Function:
I am using AngularJS. So I have to get the $location object to inject the path of profilePage.
function launchProfile(){
var e = document.getElementById('loginScreen');/*'loginScreen' is login form id */
var $injector = angular.element(e).injector();
var $location = $injector.get('$location');
$location.path("/profilePage");}
app.js (Angularjs routing):
vcApp = angular.module('VCMobApp', ['ngRoute']);vcApp.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/', {templateUrl: 'screens/login.html', controller: 'loginPageCntrl' });
$routeProvider.when('/profilePage', {templateUrl: 'screens/profilePage.html', controller: 'profilePageCntrl'});
$routeProvider.otherwise({ redirectTo: '/' });}]);
In case you are not using AngularJS, then directly you can call your html page using window.location.href='../profilePage.html' inside launchProfile() function itself (skip angularjs code then).