在 Laravel nova 中从网络摄像头捕获图像的自定义文件字段

Question

我是 Laravel Nova 的新手，我想从计算机上传头像或从网络摄像头捕获头像。至于现在，我已经创建了一个条件依赖项 select 字段来使用 this package. I have come across webcamjs 隐藏和显示元素，我想知道我将如何实施此自定义操作。

我有两个选项“从网络摄像头捕捉”和“从计算机上传”。我现在只有这个“从计算机上传”，它工作正常。我想要的是从网络摄像头捕获图像并加载头像字段。

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),

        ];
}

Answer 1

有几种方法可以解决这个问题。

重要提示：我不推荐使用 WebcamJS 包，因为它是一个未维护的包，还有其他可行的替代方案。您可以分叉软件包并修复任何错误，但这会更有效。

选项 #1（也许是您的最佳选择）

我的建议是创建一个扩展“头像”或“文件”的自定义字段，并添加“从网络摄像头捕获”选项。您可以快速轻松地使用我 link 下面的这些软件包之一（比 WebcamJS 更新）。

选项 #2（简单易用！）

另一种可能甚至更简单的方法是创建一个独立的自定义“网络摄像头”字段。您仍然需要 Nova Field Dependency Container 包，但您的自定义字段可以以独立的方式与社区共享。

How to create a custom field in laravel nova

WebcamJS 的替代包：

选择对您最有用的套餐！希望对您有所帮助！

在 Laravel nova 中从网络摄像头捕获图像的自定义文件字段

Custom File field to capture image from webcam in Laravel nova

laravel

vue.js

laravel-nova