brucelampson/laravel-spark-camera

Laravel Spark 的个人照片摄像头支持。

维护者

详细信息

github.com/BruceLampson/laravel-spark-camera

源代码

安装: 14

依赖项: 0

建议者: 0

安全性: 0

星标: 1

关注者: 1

分支: 8

语言:JavaScript

类型:软件包

2.0.0 2020-01-23 06:00 UTC

MIT 7f36ed753a806cb32399d10703b24835f74fd995

This package is auto-updated.

Last update: 2024-09-23 16:36:46 UTC

README

此软件包添加了对从您的计算机或手机摄像头捕获图像的支持。

演示

安装

  • 运行 composer require eusebiu/laravel-spark-camera

  • 将 Eusebiu\LaravelSparkCamera\CameraServiceProvider::class 添加到您的 config/app.php 文件中的 providers 数组

  • 运行 php artisan vendor:publish --provider="Eusebiu\LaravelSparkCamera\CameraServiceProvider" --tag=assets

  • 编辑 resources/views/vendor/spark/settings/profile/update-profile-photo.blade.php

    • 在最后一个 div 之前添加 @include('camera::camera-modal')
    • 添加摄像头按钮 <button type="button" class="btn btn-primary" :disabled="form.busy" @click="openCamera">摄像头</button>。
    • 它应该看起来像这样 [链接]。

  • 编辑 resources/assets/js/spark-components/settings/profile/update-profile-photo.js

    • 在顶部添加 var camera = require('./update-profile-photo-camera');。
    • 将 mixins 选项更改为 mixins: [base, camera]。

  • 运行 npm install --save webcamjs

  • 运行 npm run dev

  • 编辑 resources/sass/app.scss 并添加以下 CSS

    #profile-photo-camera-preview,
#profile-photo-camera-preview video {
    width: 100% !important;
    height: auto !important;
    min-width: 100px;
    min-height: 100px;
}

此软件包使用 WebcamJS，因此如果您想配置它，请覆盖您的 update-profile-photo.js 文件中的 configureWebcamjs 方法。