View MJPG Video Streaming in Xamarin.Android

View MJPG Video Streaming in Xamarin.Android

Hey today we learn how to implement a simple view over a simple binding(https://bitbucket.org/neuralassembly/simplemjpegview/overview) to show an streaming of a IP Cam (MJPEG) lets start:

First add a new Android App Project like the snapshot:

Then add an "Android Java Bindings Library":

In the binding project we add an Jar library, you can download a compiled jar from here (https://app.box.com/s/1o558pfmacy65fv07mk1)

After this you can add our binding library to Android App Project

The library uses a "libImageProc" Native Library to process video data we need to add all of this .so files (https://app.box.com/s/6fydrwwc9ac9esn0fu0o), I Recommend to add it in a new "Lib" folder

After adding the native library we need to change BuildAction for each of .so files to "AndroidNativeLibrary" 

After this configuration steps now yes now we continue with the CODE, Fuck Yeah¡¡¡

Here a simple layout implementing a MJPEG view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText1"
        android:text="http://webcam.st-malo.com/axis-cgi/mjpg/video.cgi?resolution=640x480" />
    <Button
        android:id="@+id/myButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="watch" />
    <com.camera.simplemjpeg.MjpegView
        android:id="@+id/mv"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />
</LinearLayout>

Now here the code of MainActitivy.cs

using Com.Camera.Simplemjpeg;
using System.Threading.Tasks;

[Activity (Label = "MJPGApp", MainLauncher = true)]
 public class MainActivity : Activity
 {
  //MjpegView instance
  private MjpegView mv = null;
  //Play button
  Button button=null;
  //UI EditText with URL
  EditText txturl=null;
  //Streaming URL
  String URL = "http://webcam.st-malo.com/axis-cgi/mjpg/video.cgi?resolution=640x480";
  //Layout sizes for video view
  private int width = 640;
  private int height = 480;
  //Suspendign straming bool variable
  private bool suspending = false;
  //OnCreate Method
  protected override void OnCreate (Bundle bundle)
  {
   base.OnCreate (bundle);
   // Set our view from the "main" layout resource
   SetContentView (Resource.Layout.Main);
   //initialize mjpeg view with UI Android XML
   mv = FindViewById<MjpegView>(Resource.Id.mv);
   //check if the instance is valid
   if (mv != null)
   {
    //set the resolution of streaming
    mv.SetResolution(width, height);
   }
   //assignation of UI items 
   button = FindViewById<Button> (Resource.Id.myButton);
   txturl = FindViewById<EditText> (Resource.Id.editText1);
   //button click event
   button.Click += delegate {
    //take URL from txturl(EditText) field
    URL = txturl.Text;
    //Begin a task method to streaming
    BeginStreaming(URL);
   };
   //Begin a task method to streaming
   BeginStreaming(URL);
  }
  //OnResume Method check if streaming is suspending and continue with the streaming
  protected override void OnResume()
  {
   base.OnResume();
   if (mv != null)
   {
    if (suspending)
    {
     BeginStreaming(URL);
     suspending = false;
    }
   }
  }
  //OnDestroy Free Memory of a streaming
  protected override void OnDestroy()
  {
   base.OnDestroy();
   if (mv != null)
   {
    mv.FreeCameraMemory();
   }
  }
  //OnPause put the streaming suspending
  protected override void OnPause()
  {
   base.OnPause();
   if (mv != null)
   {
    if (mv.IsStreaming)
    {
     mv.StopPlayback();
     suspending = true;
    }
   }
  }
  /// 

  /// Begins the streaming.
  /// with a parallel task we start the streaming
  /// 
  /// URL.
  public void BeginStreaming(string url)
  {
   //Create a new task with a MjpegInputStream return
   Task.Factory.StartNew(() =>
    {
     try
     {
      //inicialize streaming
      return MjpegInputStream.Read(url);
     }
     catch (Exception e)
     {
      //if something was wrong return null
      Console.WriteLine(e.Message);
     }
     return null;
    }).ContinueWith((t) =>
     {
      //check if the result was fine
      mv.SetSource(t.Result);
      if (t.Result != null)
      {
       //set skip to result
       t.Result.SetSkip(1);
       Title = "Connected";
      }
      else
      {
       Title = "Disconnected";
      }
      //set display mode
      mv.SetDisplayMode(MjpegView.SizeFullscreen);
      //set if you need to see FPS
      mv.ShowFps(false);
     });
  }
 }

Now you can add a ip camera to your Xamarin.Android Apps:

The library page source: https://bitbucket.org/neuralassembly/simplemjpegview/overview

Full Example at GitHub: https://github.com/AlejandroRuiz/Mono/tree/master/MJPGApp

IP Camera sources: http://www.ttrix.com/apple/iphone/ipvision/ipvisionpubcameras.html

Now just relaxed, we finish for today: