How to real time preview change of Video recorder on camera like Vigo Video Hypstar

Question

I want to change the Surface preview bottom overlay with gif or image Like Vigo

Like this

Please tell me any sdk or what I am using for this Filter

I am able to change the overlay on the top view using this

Help of this

 PictureCallback cameraPictureCallbackJpeg = new PictureCallback() 
  {  
    @Override
    public void onPictureTaken(byte[] data, Camera camera) 
    {
      // TODO Auto-generated method stub   
      Bitmap cameraBitmap = BitmapFactory.decodeByteArray
                                                                  (data, 0, data.length);

   int   wid = cameraBitmap.getWidth();
     int  hgt = cameraBitmap.getHeight();

    //  Toast.makeText(getApplicationContext(), wid+""+hgt, Toast.LENGTH_SHORT).show();
      Bitmap newImage = Bitmap.createBitmap
                                        (wid, hgt, Bitmap.Config.ARGB_8888);

      Canvas canvas = new Canvas(newImage);

      canvas.drawBitmap(cameraBitmap, 0f, 0f, null);

     Drawable drawable = getResources().getDrawable
                                                          (R.drawable.mark3);
      drawable.setBounds(20, 30, drawable.getIntrinsicWidth()+20, drawable.getIntrinsicHeight()+30);
    drawable.draw(canvas);



      File storagePath = new File(Environment.
                    getExternalStorageDirectory() + "/PhotoAR/"); 
      storagePath.mkdirs(); 

      File myImage = new File(storagePath,
                    Long.toString(System.currentTimeMillis()) + ".jpg");

      try
      {
        FileOutputStream out = new FileOutputStream(myImage);
        newImage.compress(Bitmap.CompressFormat.JPEG, 80, out);


        out.flush();
        out.close();
      }
      catch(FileNotFoundException e)
      {
        Log.d("In Saving File", e + "");    
      }
      catch(IOException e)
      {
        Log.d("In Saving File", e + "");
      }

      camera.startPreview();



      newImage.recycle();
      newImage = null;

      Intent intent = new Intent();
      intent.setAction(Intent.ACTION_VIEW);

      intent.setDataAndType(Uri.parse("file://" + myImage.getAbsolutePath()), "image/*");
      startActivity(intent);

    }
  };

output of this

Answer 1

Use GLSurfaceView. The basic idea is to have the camera preview in GLSurfaceView and draw OpenGL renderings.
The common approach is to subclass the GLSurfaceView and implements the GLSurfaceView.Renderer. The rendering tasks are performed by implementing the interface.

public class CameraRenderer extends GLSurfaceView implements GLSurfaceView.Renderer, SurfaceTexture.OnFrameAvailableListener { 
    @Override
    public synchronized void onSurfaceCreated(GL10 gl, EGLConfig config) {
        ...
        //compile shader here
    }

    @Override
    public synchronized void onSurfaceChanged(GL10 gl, int width, int height) {
        ...
        //open camera and start preview here
    }

    @Override
    public synchronized void onDrawFrame(GL10 gl) {
        ...
        //draw frame as required
    }

}

Check out this grafika project to get a better idea and this project which is close to what you're trying to do.

Answer 2

You need to use external libraries for that.

for using filters in camera,and such virtual effects.

Try this Libraries:

1)CameraFilter

2)This are Basic filters.

You can learn here how to implement this basic filters.

3)EffectFactory

This are effects like Instagram.

3)FaceLandMarks

This are effects like Snapchat,but for this you will need to purchase a key for using that from that api page.

I hope this helps,if this is not your answer,please ignore this answer.