Introducción a HMS Core

1

Pasos para el desarrollo de aplicaciones con Huawei

2

Debugging en la nube con Huawei

3

¿Qué es HMS Core?

4

Creación del proyecto en Android Studio

5

Creación de la aplicación en App Gallery Connect

6

Configuración de firma SHA-256

7

Configuración de APIs

8

Configuración de Android Studio y Gradle

9

Probando la sincronización de la aplicación

Autenticación con HMS Account Kit

10

Diseñando nuestra pantalla de login

11

Agregando los métodos de autenticación

12

Verificando la autenticación

13

Agregando el método de logout

Construyendo nuestra cámara de selfies con HMS ML Kit

14

Machine Learning con Huawei

15

Agregando los permisos para acceder a la cámara

16

Diseñando la pantalla personalizada de la cámara

17

Creando la capa de gráficos de la cámara

18

Creando el layout para nuestro rostro

19

Creando el layout del lente de la cámara

20

Creando nuestra actividad de cámara

21

Agregando nuestra cámara personalizada a la actividad

22

Agregando los métodos de verificación de rostro

23

Agregando la detección de rostro y sonrisa individual

24

Agregando la detección de rostro y sonrisa grupal

25

Tomar nuestra imagen y agregar un método de re-toma de foto

26

Guardar la foto en nuestra galeria

Aplicando notificaciones push con HMS Push kit

27

Crear el servicio de push notifications

28

Agregar el servicio de HMS Push kit

29

Verificar la conectividad de las notificaciones en App Gallery Connect

Conclusiones y consejos

30

Tips y solución de inconvenientes frecuentes

31

¿Qué más tiene Huawei?

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
22 Hrs
26 Min
35 Seg

Creando la capa de gráficos de la cámara

17/31
Resources

How to create the graphical basis for customizing a camera?

Get ready to take your camera application to the next level! In this guide, we are going to learn how to create a custom graphics layer using abstract classes and key functions. Our goal is to develop a camera that detects and frames our face for perfect selfies, and we will use machine learning tools like Lens Engine to achieve this.

What is an abstract class and how can it help us in our camera?

An abstract class is a template for other classes that allows us to define methods to be implemented in child classes. Here, we are going to create an abstract class called BaseGraphic, which will be the basis for customizing our camera using an object called GraphicOverlay that we created in previous classes.

abstract class BaseGraphic(val overlay: GraphicOverlay) { abstract fun draw(canvas: Canvas)}

The draw method is abstract, which means that every class that inherits from BaseGraphic must implement it.

How do we scale and translate graphics on a canvas?

To scale and translate our graphics on the Android canvas, we will create functions for each of the axes:

How to perform scaling on x and y axis?

Scaling allows us to adjust the size of our graphics in relation to the size of the canvas. We define functions to scale on the x and y axes:

fun scaleX(value: Float): Float { return value * overlay.widthScaleFactor // Scale in x}
fun scaleY(value: Float): Float { return value * overlay.heightScaleFactor // Scale in y}

How is the translation in x and y axis performed?

Translation is necessary to center the graphics, especially when using the front camera. We implement this logic considering the specific properties of the LensEngine.

fun translateX(value: Float): Float { return if (overlay.cameraFacing == LensEngine.FRONT_LENS) { overlay.width - scaleX(value) // Adjust x-axis for front camera } else { scaleX(value) // Scale x without translation }}
fun translateY(value: Float): Float { return scaleY(value) // Scale y}

How do we manage the graphics in the overlay?

To manage the graphics we will draw, we create a list in the GraphicOverlay class and define functions to clear and add graphics. This ensures that the camera can update correctly.

private val graphics = synchronizedList<Graphic>()
fun clear() { graphics.clear() postInvalidate() // Update the overlay}
fun addGraphic(graphic: Graphic) { graphics.add(graphic)}

How do we draw the frame on the camera?

Finally, to draw a frame around the detected face, we implement the draw function in GraphicOverlay, making sure that the graphics are drawn only if the preview size is valid.

override fun onDraw(canvas: Canvas) { if (previewWidth != 0 && previewHeight != 0) { // Calculate scale factors val widthScaleFactor = canvas.width.toFloat() / previewWidth.toFloat() val heightScaleFactor = canvas.height.toFloat() / previewHeight.toFloat()
 // Draw graphics for (graphic in graphics) { graphic.draw(canvas) } }}}

With this, we create a system that allows us to customize the way our camera interacts with the enhanced overlay. The LensEngine implementation allows us to focus the face on the front camera to capture perfectly centered selfies. Don't stop here; keep learning about machine learning and other tools that can empower your camera app - the future of imaging technology is in your hands!

Contributions 3

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

Fantástico ver como es el código de personalización de la camara 👍

BaseGraphic

package com.sandoval.hselfiecamera.overlay

import android.graphics.Canvas
import com.huawei.hms.mlsdk.common.LensEngine

abstract class BaseGraphic(private val graphicOverlay: GraphicOverlay) {
    abstract fun draw(canvas: Canvas?)

    fun scaleX(x: Float): Float {
        return x * graphicOverlay.widtScaleValue
    }

    fun scaleY(y: Float): Float {
        return y * graphicOverlay.heightScaleValue
    }

    fun translateX(x: Float): Float {
        return if (graphicOverlay.cameraFacing == LensEngine.FRONT_LENS) {
            graphicOverlay.width - scaleX(x)
        } else {
            scaleX(x)
        }
    }

    fun translateY(y: Float): Float {
        return scaleY(y)
    }
}

GraphicOverlay

package com.sandoval.hselfiecamera.overlay

import android.content.Context
import android.graphics.Canvas
import android.util.AttributeSet
import android.view.View
import com.sandoval.hselfiecamera.camera.CameraConfiguration

class GraphicOverlay(
    context: Context,
    atts: AttributeSet?
) : View(context, atts) {

    private val lock = Any()
    private var previewWidth = 0
    private var previewHeight = 0
    var widtScaleValue = 1.0f
        private set
    var heightScaleValue = 1.0f
        private set
    var cameraFacing = CameraConfiguration.CAMERA_FACING_FRONT
        private set
    private val graphics: MutableList<BaseGraphic> = ArrayList()

    fun addGraphic(graphic: BaseGraphic) {
        synchronized(lock) { graphics.add(graphic) }
    }

    fun clear() {
        synchronized(lock) { graphics.clear() }
        this.postInvalidate()
    }

    fun setCameraInfo(width: Int, height: Int, facing: Int) {
        synchronized(lock) {
            previewWidth = width
            previewHeight = height
            cameraFacing = facing
        }
        this.postInvalidate()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        synchronized(lock) {
            if (previewWidth != 0 && previewHeight != 0) {
                widtScaleValue =
                    width.toFloat() / previewWidth.toFloat()
                heightScaleValue =
                    height.toFloat() / previewHeight.toFloat()
            }
            for (graphic in graphics) {
                graphic.draw(canvas)
            }
        }
    }
}