CameraX와 네이티브 코드를 사용자 지정 React 네이티브 구성 요소에 통합하지 못함

utkayd

안녕하세요 저는 Android에서 더 이상 사용되지 않는 카메라 모듈을 사용하여 카메라 뷰를 표시하고 mlkit 얼굴 감지를 사용하여 필터를 그렸습니다. 최근에 CameraX로 업그레이드하기로 결정했으며 별도의 Android 앱으로 작동하도록 필요한 모든 단계를 수행했으며 작동합니다. 내가 무엇을하든 기존 Custom React Native 모듈에 통합하고 싶을 때 화면에 아무것도 표시되지 않습니다. 보기 크기를 확인했는데 괜찮은 것 같습니다. 다음은 카메라 모듈을 시작하는 데 사용하는 코드입니다.

package com.myProject.speech.components

import android.annotation.SuppressLint
import android.content.Context
import android.content.pm.PackageManager
import android.graphics.Bitmap
import android.graphics.Canvas
import android.hardware.camera2.CameraManager
import android.os.Bundle
import android.util.AttributeSet
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.RelativeLayout
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.appcompat.app.AppCompatActivity
import androidx.camera.core.*
import androidx.camera.lifecycle.ProcessCameraProvider
import androidx.camera.view.PreviewView
import androidx.core.app.ActivityCompat
import androidx.core.content.ContextCompat
import androidx.core.view.size
import androidx.lifecycle.ViewModelProvider
import androidx.lifecycle.ViewModelStoreOwner
import com.facebook.react.uimanager.ThemedReactContext
import com.google.mlkit.common.MlKitException
import com.google.mlkit.vision.face.FaceDetectorOptions
import com.myProject.grpc.speech.StickerDatabase
import com.myProject.speech.R
import com.myProject.speech.utils.PreferenceUtils
import java.util.*
import androidx.databinding.DataBindingUtil
import com.myProject.camera_test.mlkit.facedetection.FaceContourDetectionProcessor
import com.myProject.speech.mlkit.GraphicOverlay
import java.util.concurrent.ExecutorService


class myProjectCameraView : RelativeLayout {
    private var previewView: PreviewView? = null
    private var graphicOverlay: GraphicOverlay? = null
    private var context: ThemedReactContext? = null
    private lateinit var cameraExecutor: ExecutorService
    var faceRecognitionEnabled = false
    var cameraSelector: CameraSelector? = null
    private var cameraProvider: ProcessCameraProvider? = null
    var cameraLifecycleObserver: CameraLifecycleObserver? = null
    private var lensFacing = CameraSelector.LENS_FACING_FRONT
    private lateinit var cameraManager: CameraManager
    private var imageCapture: ImageCapture? = null
    val TAG = "myProjectCameraView"

    constructor(context: ThemedReactContext,
                cameraLifecycleObserver: CameraLifecycleObserver?) : super(context) {
        this.context = context
        this.cameraLifecycleObserver = cameraLifecycleObserver;

        Log.d(TAG, "constructor Called")

        val inflater = context.getSystemService(
                Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        inflater.inflate(R.layout.live_preview, this, true)
        previewView = findViewById(R.id.firePreview)
        graphicOverlay = findViewById(R.id.fireFaceOverlay)
        if (allPermissionsGranted()) {
            startCamera()
            if (cameraLifecycleObserver != null) {
                cameraLifecycleObserver.registerActionHandler(this);
            }


        } else {
            Log.d(TAG, "Not all Permissions Granted")
        }
        this.cameraLifecycleObserver!!.registerActionHandler(this)


    }


    private fun startCamera() {
        val cameraProviderFuture = ProcessCameraProvider.getInstance(this.context as Context)

        cameraProviderFuture.addListener(Runnable {
            // Used to bind the lifecycle of cameras to the lifecycle owner
            val cameraProvider: ProcessCameraProvider = cameraProviderFuture.get()

            // Preview
            val preview = Preview.Builder()
                    .build()
                    .also {
                        it.setSurfaceProvider(previewView!!.createSurfaceProvider())
                    }

            imageCapture = ImageCapture.Builder()
                    .build()


            val imageAnalyzer = ImageAnalysis.Builder().setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
                    .build()
                    .also {
                        it.setAnalyzer(cameraExecutor, FaceContourDetectionProcessor(graphicOverlay!!))
                    }

            // Select back camera as a default
            val cameraSelector = CameraSelector.Builder()
                    .requireLensFacing(CameraSelector.LENS_FACING_FRONT)
                    .build()

            try {
                // Unbind use cases before rebinding
                cameraProvider.unbindAll()

                // Bind use cases to camera
                cameraProvider.bindToLifecycle(
                        this.context!!.currentActivity!! as AppCompatActivity, cameraSelector, preview, imageCapture, imageAnalyzer)
            } catch (exc: Exception) {
                Log.e(TAG, "Use case binding failed", exc)
            }

        }, ContextCompat.getMainExecutor(this.context as Context))
    }


    fun enableFaceRecognition(enabled: Boolean) {
        Log.d(TAG, "enableFaceRecognition Called")
        if (enabled) {
            Log.d(TAG, "With FaceRecognition")
            Log.d(TAG, "Parent size: ${this!!.measuredWidth}x${this!!.measuredHeight}")
            Log.d(TAG, "previewView sizes: ${previewView!!.measuredWidth}x${previewView!!.measuredHeight}")
            Log.d(TAG, "graphicOverlay sizes: ${graphicOverlay!!.measuredWidth}x${graphicOverlay!!.measuredHeight}")
        } else {
            Log.d(TAG, "Without FaceRecognition")
        }
    }


    fun onActivityStopped() {

        Log.d(TAG, "onActivityStopped")

    }

    fun onActivityResumed() {
        Log.d(TAG, "onActivityResumed")

    }

    fun onActivityPaused() {

        Log.d(TAG, "onActivityPaused")

    }

    fun onActivityDestroyed() {
        Log.d(TAG, "onActivityDestroyed")


    }


    private fun allPermissionsGranted(): Boolean {
        for (permission in requiredPermissions) {
            if (!isPermissionGranted(getContext(), permission)) {
                return false
            }
        }
        return true
    }


    private val requiredPermissions: Array<String?>
        private get() = try {
            val info = getContext().packageManager.getPackageInfo(
                    getContext().packageName, PackageManager.GET_PERMISSIONS)
            val ps = info.requestedPermissions
            if (ps != null && ps.size > 0) {
                ps
            } else {
                arrayOfNulls(0)
            }
        } catch (e: Exception) {
            arrayOfNulls(0)
        }


    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {}
    constructor(context: Context?, attrs: AttributeSet?,
                defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
    }

    val viewBitmap: Bitmap
        get() {
            val v = rootView
            val b = Bitmap.createBitmap(v.layoutParams.width,
                    v.layoutParams.height,
                    Bitmap.Config.ARGB_8888)
            val c = Canvas(b)
            v.layout(v.left, v.top, v.right, v.bottom)
            v.draw(c)
            return b
        }

    private fun isPermissionGranted(context: Context,
                                    permission: String?): Boolean {
        if (ContextCompat.checkSelfPermission(context, permission!!) ==
                PackageManager.PERMISSION_GRANTED) {
            Log.i(this.TAG, "Permission granted: $permission")
            return true
        }
        Log.i(TAG, "Permission NOT granted: $permission")
        return false
    }


    companion object {
        private const val FACE_DETECTION = "Face Detection"
        private const val CLASSIFICATION = "Classification"
        private const val PERMISSION_REQUESTS = 1
        private const val lastDBPath = ""
        private var context: ThemedReactContext? = null
        val lastDB: StickerDatabase? = null
    }
}

어떤 통찰력이라도 대단히 감사하겠습니다. 감사

utkayd

이 문제는 장면에 추가 된 후 상대 레이아웃의 크기가 조정되지 않기 때문에 발생합니다. 해결 방법은 내 것이 아니지만 지금은 어디에서 왔는지 찾을 수 없으므로 다른 사람이 비슷한 문제를 겪고있는 경우 여기에 남겨 두겠습니다. 내 RelativeLayout의 생성자에서 layoutHack을 호출하여 문제를 해결했습니다.

 fun setupLayoutHack() {
    Choreographer.getInstance().postFrameCallback(object : Choreographer.FrameCallback {
        override fun doFrame(frameTimeNanos: Long) {
            manuallyLayoutChildren()
            viewTreeObserver.dispatchOnGlobalLayout()
            Choreographer.getInstance().postFrameCallback(this)
        }
    })
}

fun manuallyLayoutChildren() {
    for (i in 0 until childCount) {
        val child = getChildAt(i)
        child.measure(MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(measuredHeight, MeasureSpec.EXACTLY))
        child.layout(0, 0, child.measuredWidth, child.measuredHeight)
    }
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

React 네이티브 구성 요소에서 borderRadius와 함께 그림자 사용

분류에서Dev

네이티브 Android 위젯에서 React 네이티브의 구성 요소를 어떻게 호출합니까?

분류에서Dev

네이티브 HTMLElement를 생성 된 / 사용자 지정 요소와 구별하는 방법은 무엇입니까?

분류에서Dev

반응 네이티브 요소 UI를 네이티브베이스와 함께 사용할 수 있습니까?

분류에서Dev

React 네이티브 앱이 구성 요소를 렌더링하지 않습니다.

분류에서Dev

반응 네이티브에서 맵 함수를 사용하여 렌더링 된 구성 요소의 부모에서 자식 메서드를 호출합니다.

분류에서Dev

제대로 작동하지 않는 React 네이티브 구성 요소

분류에서Dev

제대로 작동하지 않는 React 네이티브 구성 요소

분류에서Dev

반응 네이티브-JWS, bcrypt 또는 react-native-crypto와 함께 디지털 서명을 사용하여 소스 유효성 검사

분류에서Dev

Chromium에 대한 종속성으로 네이티브 라이브러리와 함께 Android 라이브러리를 사용하는 방법은 무엇입니까?

분류에서Dev

반응 네이티브는 렌더링되지 않는 동안 구성 요소 코드를 실행합니다.

분류에서Dev

React 네이티브 앱의 네이티브에서 JavaScript 함수를 호출하는 방법

분류에서Dev

반응 네이티브 구성 요소의 이미지

분류에서Dev

반응 네이티브에서 예상대로 이미지를 렌더링하지 않는 구성 요소

분류에서Dev

네이티브 iOS 타사 라이브러리를 React 네이티브 앱에 통합하는 방법은 무엇입니까?

분류에서Dev

크롬에서 webrtc를 테스트 할 때 안드로이드로 작성된 네이티브 코드와 jni 코드를 사용합니다.

분류에서Dev

반응 네이티브 구성 요소에서 두 개의 이미지를 대체하는 방법

분류에서Dev

반응 네이티브를위한 로그인 페이지 및 사용자 모듈을위한 최고의 사전 제작 된 구성 요소?

분류에서Dev

기능 구성 요소에서 setNativeProps를 어떻게 사용합니까? 반응 네이티브

분류에서Dev

네이티브 코드를 사용하여 함수에 전달 된 방향에 따라 이미지를 회전합니다.

분류에서Dev

반응 네이티브 네이티브 요소 감지

분류에서Dev

줄 수를 사용하여 네이티브 텍스트 구성 요소에 반응

분류에서Dev

특정 사용자 속성을 저장하지 않는 React 네이티브 Firebase 분석

분류에서Dev

반응 네이티브 구성 요소에 데이터 표시 | 중포 기지

분류에서Dev

React Native 0.61+에서 네이티브 라이브러리를 추가 할 때 네이티브 빌드를 생성해야합니까?

분류에서Dev

F # : 사용자 지정 형식 매개 변수를 사용하여 네이티브 함수 호출

분류에서Dev

원격 디버그시 React 네이티브 구성 요소가 업데이트되지 않음

분류에서Dev

jsx를 사용하지 않는 반응 js 대안이 있습니까? 네이티브 HTML 코드일까요?

분류에서Dev

반응 네이티브와 함께 Algolia react-instantsearch 사용

Related 관련 기사

  1. 1

    React 네이티브 구성 요소에서 borderRadius와 함께 그림자 사용

  2. 2

    네이티브 Android 위젯에서 React 네이티브의 구성 요소를 어떻게 호출합니까?

  3. 3

    네이티브 HTMLElement를 생성 된 / 사용자 지정 요소와 구별하는 방법은 무엇입니까?

  4. 4

    반응 네이티브 요소 UI를 네이티브베이스와 함께 사용할 수 있습니까?

  5. 5

    React 네이티브 앱이 구성 요소를 렌더링하지 않습니다.

  6. 6

    반응 네이티브에서 맵 함수를 사용하여 렌더링 된 구성 요소의 부모에서 자식 메서드를 호출합니다.

  7. 7

    제대로 작동하지 않는 React 네이티브 구성 요소

  8. 8

    제대로 작동하지 않는 React 네이티브 구성 요소

  9. 9

    반응 네이티브-JWS, bcrypt 또는 react-native-crypto와 함께 디지털 서명을 사용하여 소스 유효성 검사

  10. 10

    Chromium에 대한 종속성으로 네이티브 라이브러리와 함께 Android 라이브러리를 사용하는 방법은 무엇입니까?

  11. 11

    반응 네이티브는 렌더링되지 않는 동안 구성 요소 코드를 실행합니다.

  12. 12

    React 네이티브 앱의 네이티브에서 JavaScript 함수를 호출하는 방법

  13. 13

    반응 네이티브 구성 요소의 이미지

  14. 14

    반응 네이티브에서 예상대로 이미지를 렌더링하지 않는 구성 요소

  15. 15

    네이티브 iOS 타사 라이브러리를 React 네이티브 앱에 통합하는 방법은 무엇입니까?

  16. 16

    크롬에서 webrtc를 테스트 할 때 안드로이드로 작성된 네이티브 코드와 jni 코드를 사용합니다.

  17. 17

    반응 네이티브 구성 요소에서 두 개의 이미지를 대체하는 방법

  18. 18

    반응 네이티브를위한 로그인 페이지 및 사용자 모듈을위한 최고의 사전 제작 된 구성 요소?

  19. 19

    기능 구성 요소에서 setNativeProps를 어떻게 사용합니까? 반응 네이티브

  20. 20

    네이티브 코드를 사용하여 함수에 전달 된 방향에 따라 이미지를 회전합니다.

  21. 21

    반응 네이티브 네이티브 요소 감지

  22. 22

    줄 수를 사용하여 네이티브 텍스트 구성 요소에 반응

  23. 23

    특정 사용자 속성을 저장하지 않는 React 네이티브 Firebase 분석

  24. 24

    반응 네이티브 구성 요소에 데이터 표시 | 중포 기지

  25. 25

    React Native 0.61+에서 네이티브 라이브러리를 추가 할 때 네이티브 빌드를 생성해야합니까?

  26. 26

    F # : 사용자 지정 형식 매개 변수를 사용하여 네이티브 함수 호출

  27. 27

    원격 디버그시 React 네이티브 구성 요소가 업데이트되지 않음

  28. 28

    jsx를 사용하지 않는 반응 js 대안이 있습니까? 네이티브 HTML 코드일까요?

  29. 29

    반응 네이티브와 함께 Algolia react-instantsearch 사용

뜨겁다태그

보관