Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Camera

This component takes pictures by calling the camera

Take pictures through the camera

Demo

Steps:

  • Click start to open the camera
  • Click the photo button
  • Click the close button to close the camera

Set the ShowPreview property to control whether to display the photo preview

Demo

Set the AutoStart property to control whether the camera is directly turned on when the component is running

Demo

Attributes

Loading...
@page "/cameras"
@inject IStringLocalizer<Cameras> Localizer        

<h3>Camera</h3>

<h4>This component takes pictures by calling the camera</h4>

<DemoBlock Title="Basic usage" Introduction="Take pictures through the camera" Name="Normal">
    <p>Steps:</p>
    <ul class="ul-demo">
        <li>Click start to open the camera</li>
        <li>Click the photo button</li>
        <li>Click the close button to close the camera</li>
    </ul>
    <Camera OnInit="@OnInit" OnStart="@OnStart" OnClose="@OnClose" OnError="@OnError" OnCapture="@OnCapture" />
    @if (ImageUrl != null)
    {
        <img src="@ImageUrl" class="mt-3" />
    }
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Show preview" Introduction="Set the <code>ShowPreview</code> property to control whether to display the photo preview" Name="ShowPreview">
    <Camera ShowPreview="true" />
</DemoBlock>

<DemoBlock Title="Start automatically" Introduction="Set the <code>AutoStart</code> property to control whether the camera is directly turned on when the component is running" Name="AutoStart">
    <Camera AutoStart="false" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Cameras
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private Task OnInit(IEnumerable<DeviceItem> devices)
    {
        var cams = string.Join("", devices.Select(i => i.Label));
        Trace.Log($"初始化摄像头完成 {cams}");
        return Task.CompletedTask;
    }

    private Task OnError(string err)
    {
        Trace.Log($"发生错误 {err}");
        return Task.CompletedTask;
    }

    private Task OnStart()
    {
        ImageUrl = null;
        Trace.Log("打开摄像头");
        return Task.CompletedTask;
    }

    private Task OnClose()
    {
        Trace.Log("关闭摄像头");
        return Task.CompletedTask;
    }

    private string? ImageUrl { get; set; }

    private Task OnCapture(string url)
    {
        ImageUrl = url;
        Trace.Log("拍照完成");
        StateHasChanged();
        return Task.CompletedTask;
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ShowPreview",
                Description = Localizer["ShowPreview"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "AutoStart",
                Description = Localizer["AutoStart"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "DeviceLabel",
                Description = Localizer["DeviceLabel"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FrontText",
                Description = Localizer["FrontText"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "BackText",
                Description = Localizer["FrontText"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "PlayText",
                Description = "",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "StopText",
                Description = Localizer["FrontText"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "PhotoText",
                Description = Localizer["FrontText"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "InitDevicesString",
                Description = Localizer["InitDevicesString"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = Localizer["InitDevicesStringDefaultValue"]
            },
            new AttributeItem()
            {
                Name = "NotFoundDevicesString",
                Description = Localizer["NotFoundDevicesString"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = Localizer["NotFoundDevicesStringDefaultValue"]
            },
            new AttributeItem() {
                Name = "OnInit",
                Description = Localizer["OnInit"],
                Type = "Func<IEnumerable<DeviceItem>, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnStart",
                Description = Localizer["OnStart"],
                Type = "Func<Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnClose",
                Description = Localizer["OnClose"],
                Type = "Func<Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnCapture",
                Description = Localizer["OnCapture"],
                Type = "Func<string, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload