Search code examples
laravelvue.jslaravel-nova

Custom File field to capture image from webcam in Laravel nova

I am new to Laravel Nova and i want to upload an avatar either from computer or capture from webcamera. As for now i have created a conditional dependency select field to hide and show elements using this package. I have come across webcamjs and i want to know how would i implment this custom action.

enter image description here

I have two options "Capture from webcamera" and "Upload from computer". I only have this "Upload from computer" for now and it works fine. What i want to have is to capture the image from webcam and load the avatar field.

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

            Text::make('Full Name')->rules('required'),

            Select::make('Upload Avatar', 'upload_avatar_method')->options([
                0 => 'Capture from Webcamera',
                1 => 'Upload from Computer',
            ])->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),

        ];
}
Solution

  • There are several methods to solve the problem.

    IMPORTANT: I do not recommend using the WebcamJS package because it is an unmaintained package and there are other viable alternatives. You can fork the package and fix any errors but that would be more work.

    Option #1 (Maybe the best choice for you)

    My advice is to create a custom field that extends "Avatar" or "File" and add the "Capture from webcam" option. You can use one of these packages that I link below (more up-to-date than WebcamJS) quickly and easily.

    Option #2 (Easy 'n shared!)

    Another possible, even simpler approach is to create a standalone custom "Webcam" field. You will still need the Nova Field Dependency Container package but your custom field could share it with the community in a standalone way.

    How to create a custom field in laravel nova

    Alternative packages to WebcamJS:

    Choose the package that is most useful for you! I hope to be proved helpful!