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

Question

我是 Laravel Nova 的新手，我想从计算机上传头像或从网络摄像头捕捉。至于现在，我创建了一个条件依赖选择字段来使用this package 隐藏和显示元素。我遇到了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（也许是您的最佳选择）

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

---

选项 #2（轻松分享！）

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

---

How to create a custom field in laravel nova

---

WebcamJS 的替代包：

• Multicorder
• VueWebCam
• EasyVueCamera
• VueMediaRecorder

选择对您最有用的软件包！ 希望对我有所帮助！