Get colour of particular pixel from live camera preview - Ionic

Question

I'm trying to recreate functionality which is similar to this: using Ionic.

The screenshot demonstrates an inner circle on a live camera preview which grabs the colour along with an outer circle which shows the colour of the pixel currently being looked at.

I have the live camera preview working with overlays however I don't know where to begin with grabbing a colour from a particular spot on the screen.

I understand you can take a photo and grab the colours that way but that isn't the functionality I was after, I was looking at something which allows me to see the results in real-time.

Can this functionality be achieved? If so, how can I do this?

Answer 1

Can this functionality be achieved? If so, how can I do this?

I faced similar situation in my Application so thought it will be helpful.

I was creating a Cordova-Angular Hybrid app for real time image processing:

1. Open the front camera and show the different objects in-front of camera.

2. If object found in the dictionary then display the success message and stop previewing.

Here were the Steps:

1. Created new Cordova plugin that start the camera in previewMode. For getting the current image of the preview you need to override the onPreviewFrame method.

2. Get the buffer the image and convert it and Match it.

3. Based on success/fail call the callBack Method.

Now I think in your case Step-1 will be same with some additional Steps.

1. Create new Cordova plugin that will start the camera in previewMode. For getting the current image of the preview you need to override the onPreviewFrame method.

2. Override the onTouchEvent method to calculate the point inside the ImageView and in same time calculate the pixel of the frame inside onPreviewFrame method.

3. After getting the result just update the view with result.

Also I think the main part in this ionic app is still native.Cordova will just do the bridging.

References:

1. http://topandroidphones1.blogspot.com/2012/04/get-color-on-specified-location-from.html

2. OnPreviewFrame data image to imageView

3. Get the touch position inside the imageview in android

4. How to Get Pixel Color in Android

5. Capturing the Camera Preview with a PreviewCallback