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?

You can use the native iOS and Android APIs to create your own camera view (for example using Placeholder) - here is proof-of-concept sample app https://github.com/NickIliev/sample-cameraApp — Nick Iliev, May 31 '16 at 10:45
@NickIliev - that github example doesn't work for me. Anything updated? I'll post on git issues the log tomorrow - if you're following this — Marko, Feb 03 '17 at 20:08

score 1 · Answer 1 · edited Jun 04 '20 at 23:13

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;
}

score 0 · Answer 2 · answered Aug 11 '17 at 06:30

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() {


            }

how can this be imported in nativescript? – Narendra Dec 19 '18 at 03:23 — Narendra, Dec 19 '18 at 03:23

score 0 · Answer 3 · answered May 31 '20 at 23:10

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 (i.e. the laser element) using top and left CSS properties.

NativeScript : custom camera view

3 Answers3