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:





Now just relaxed, we finish for today:

Comentarios

  1. Que tal buen dia, estoy intentando replicar tu ejemplo en una app que estoy realizando pero me marca algunos errores al intentar compilarla ya que no me reconoce algunas clases y quisiera ver si existe posibilidad de que ayudes.

    ResponderEliminar
    Respuestas
    1. Raro acabo de bajar el proyecto y me compila sin problemas verifica la version de android y si tienes instalada las tools correctas

      Eliminar
    2. Según yo estaba siguiendo al pie de la letra tu proyecto y al compilar no me reconoce la clase Mjpeg y yo buscaba el proyecto para descargar para probarlo igual si me lo puedes enviar en rar o zip te lo agradecería mucho.

      De hecho hace un momento ya pude descargar el proyecto pero si quizas me falte alguna herramienta o plugin pero ya nose que mas instalar, tu que me sugieres?

      Eliminar
    3. https://app.box.com/s/nwo5gay9lee6ffsghvkytge7muzg89tz baja la solucion de aqui practicamente es compilar y listo deberia de funcionar

      Eliminar
    4. Muchas gracias, lo descargo y lo pruebo y ya te digo si logro hacerlo correr

      Eliminar

Publicar un comentario

Entradas populares de este blog

Bluetooth Arduino + Xamarin.Android

Simple ListView with Xamarin.Forms

Xamarin.Forms: Get native image from ImageSource