NativeScript：自定义相机视图

Question

我正在开发一款iOS和Android应用程序，其中包含自定义相机视图（这就是为什么我不会使用相机模块http://docs.nativescript.org/ApiReference/camera/README）。

我需要在相机预览上方拥有自己的用户界面。

我能否使用Nativescript实现这一点？

我没有找到任何带有此功能的模块/插件。编写自己的模块难吗？

- Guillaume Hemery

---

您可以使用本机iOS和Android API创建自己的相机视图（例如使用占位符）-这是概念验证示例应用程序https://github.com/NickIliev/sample-cameraApp - Nick Iliev

@NickIliev - 那个 Github 的例子对我不起作用。有更新吗？如果你在关注这个问题，明天我会在 Git 问题上发布日志。 - Marko

Answer 1

占位符允许您将任何本机小部件添加到应用程序中。为此，您需要在UI层次结构中放置一个占位符，然后创建和配置要出现在其中的本机小部件。最后，将本机小部件传递给creatingView事件的事件参数。

NativeScript没有表面视图，您需要在相机插件上方使用占位符。

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

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

- Narendra

Answer 2

我不太明白你的情况，但是在我的一个应用程序中，有一个使用自定义相机视图的条形码扫描器（就像你的问题所描述的那样？），我想在相机视口的中间放置一条激光束线，方法如下：

<GridLayout>
  <YourCameraView />

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

这样可以让你将 laser 放在 YourCameraView 元素之上，你可以使用 vertical-align 和 horizontal-align CSS 属性来定位 laser 元素。

如果你想要更多自由度，可以用 AbsoluteLayout 替换 GridLayout，这样你就可以使用 top 和 left CSS 属性来定位覆盖层元素（例如 laser 元素）。

- Nicu Surdu

Answer 3

在layout.xml中使用SurfaceView

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

在activity类中使用以下代码

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


            }

- Aruna Wijesinghe

---

这个怎么在 NativeScript 中导入？ - Narendra