NativeScript : custom camera view

Question

I am working on an iOS and Android application with a custom camera view (that's why I won't use camera module http://docs.nativescript.org/ApiReference/camera/README )

I need to have my own UI above the camera preview.

Can I do this with Nativescript ?

I could not find any module/plugin with this feature. Is this hard to write my own module?

Answer 1

The Placeholder allows you to add any native widget to your application. To do that, you need to put a Placeholder somewhere in the UI hierarchy and then create and configure the native widget that you want to appear there. Finally, pass your native widget to the event arguments of the creatingView event.

NativeScript does not have a surface view and you need to use placeholder on top of camera plugin.

<Placeholder (creatingView)="creatingView($event)"></Placeholder>

public creatingView(args: any) {
  var nativeView = new android.view.SurfaceView(application.android.currentContext);
  args.view = nativeView;
}

Answer 2

Use the surfaceview in layout.xml

<SurfaceView
                android:id="@+id/surfaceview"
                android:layout_centerHorizontal="true"
                android:layout_width="350dp"
                android:layout_height="260dp" />

use following code in activity class

SurfaceView surfaceView;
CameraSource cameraSource;

final TextRecognizer textRecognizer = new TextRecognizer.Builder(getApplicationContext()).build();
        cameraSource = new CameraSource.Builder(getApplicationContext(), textRecognizer)
                .setFacing(CameraSource.CAMERA_FACING_BACK)
                .setAutoFocusEnabled(true)
                .build();
        surfaceView.getHolder().addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder surfaceHolder) {

                try {
                    cameraSource.start(surfaceView.getHolder());
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }

            @Override
            public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2) {

            }

            @Override
            public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
                cameraSource.stop();
            }
        });
        textRecognizer.setProcessor(new Detector.Processor<TextBlock>() {
            @Override
            public void release() {


            }

Answer 3

I don't understand exactly your scenario, but what I have in one of my apps that has a barcode scanner (that uses a custom camera view as in your question?) which I wanted to have a laser beam line in the middle of the camera view-port, is this:

<GridLayout>
  <YourCameraView />

   <StackLayout id="laser"></StackLayout>
</GridLayout>

This enables you to have the laser on top of the YourCameraView element and you can position the laser element using vertical-align and horizontal-align CSS properties.

If you want more freedom, substitute the GridLayout with AbsoluteLayout , so then you can position the overlay elements (ie the laser element) using top and left CSS properties.