es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Campo de archivo personalizado para capturar imágenes desde la webcam en Laravel Nova.

29 Jul, 2023 Programación

Soy nuevo en Laravel Nova y quiero subir un avatar desde mi computadora o capturarlo desde la cámara web. Hasta ahora he creado un campo select de dependencia condicional para ocultar y mostrar elementos usando este paquete. Me encontré con webcamjs y quiero saber cómo implementar esta acción personalizada.

Tengo dos opciones: “Capturar desde la cámara web” y “Cargar desde la computadora”. Por ahora solo tengo la opción “Cargar desde la computadora” y funciona bien. Lo que quiero lograr es capturar la imagen desde la cámara web y cargarla en el campo de avatar.

public function fields(Request $request)
{
    return [
        ID::make(__('ID'), 'id')->sortable(),

        Text::make('Nombre completo')->rules('required'),

        Select::make('Cargar Avatar', 'upload_avatar_method')->options([
            0 => 'Capturar desde la cámara web',
            1 => 'Cargar desde la computadora',
        ])->displayUsingLabels()->rules('required'),

        NovaDependencyContainer::make([
            Avatar::make('Avatar', 'avatar')
                ->disk('public')
                ->path('employees/'. $request->user()->id)
                ->storeAs(function (Request $request) {
                    return 'avatar.'.$request->file('avatar')->getClientOriginalExtension();
                })
                ->rules('required')
                ->thumbnail(function ($value, $disk) {
                    return $value
                    ? Storage::disk($disk)->url($value)
                    : null;
                })->hideFromIndex(),
        ])->dependsOn('upload_avatar_method', 1),
    ];
}

Espero que esta información te sea útil.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para implementar la captura de imagen desde la cámara web en Laravel Nova, podemos utilizar la biblioteca webcamjs. Debemos agregar la biblioteca a nuestro proyecto utilizando npm o yarn. Aquí están los pasos para agregar la biblioteca e implementar la función:

    1. Instalar la biblioteca webcamjs utilizando npm o yarn:
    npm install webcamjs --save

    o

    yarn add webcamjs
    1. Importar la biblioteca en el recurso Nova:
    import Webcam from 'webcamjs';
    1. Agregar un botón de acción personalizado al componente de tarjeta del recurso, por ejemplo:
    <template>
  <card>
    ...
    <template slot="actions">
      <div class="btn-group mr-2">
        ...
        <button class="btn btn-sm btn-default" @click="captureAvatar">
          Capturar desde la cámara web
        </button>
      </div>
    </template>
  </card>
</template>
    1. Agregar un método para manejar el clic del botón y capturar la imagen utilizando webcamjs:
    methods: {
  captureAvatar() {
    Webcam.attach('#webcam-container');
    Webcam.snap((data_uri) => {
      const file = this.dataURLtoFile(data_uri, 'avatar.png');
      this.$refs.avatar.$refs.fileInput.files = [file];
      this.uploadAvatar();
      Webcam.reset();
    });
  },

  // Método auxiliar para convertir la URL de los datos en un objeto de archivo
  dataURLtoFile(dataurl, filename) {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
  },
}
    1. Modificar el campo Nova Avatar para incluir un atributo ref, para que podamos hacer referencia a él desde el método anterior:
    Avatar::make('Avatar', 'avatar')
  ...
  ->thumbnail(function ($value, $disk) {
    return $value ? Storage::disk($disk)->url($value) : null;
  })
  ->ref('avatar')
  ->hideFromIndex(),
    1. Por último, modificar el campo Nova Select para mostrar/ocultar el campo Avatar según el valor seleccionado:
    Select::make('Upload Avatar', 'upload_avatar_method')
  ->options([
    0 => 'Capturar desde la cámara web',
    1 => 'Cargar desde la computadora',
  ])
  ->displayUsingLabels()
  ->rules('required')
  ->dependsOn('upload_avatar_method', function ($value) {
    return $value === 1;
  }),

    Estos pasos deberían permitirte implementar la opción “Capturar desde la cámara web”, además de la opción “Cargar desde la computadora”, para el campo Avatar en el recurso Laravel Nova.

Comments are closed.