Blazor 服务器端 - 如何选择相机并拍照答案

【问题标题】：Blazor server side - How to select camera and snap a pictureBlazor 服务器端 - 如何选择相机并拍照
【发布时间】：2021-07-15 17:57:01
【问题描述】：

我查看了所有我能找到的示例，但找不到一个可以同时选择相机（前置或后置）并拍摄图像的示例。

如何在下面的示例中添加选择不同相机的功能。

https://github.com/mdwaseelahmed/WebCamjsBlazorDemo

[wwwroot/webcamjs/Configuration.js]

    function ready() {
    if (document.readyState == 'complete') {
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        try {
            Webcam.attach('#camera');
        } catch (e) {
            alert(e);
        }
    }
}

function take_snapshot() {
    // take snapshot and get image data
    var data = null;
    Webcam.snap(function (data_uri) {

        data = data_uri;
    });
    return data;
}

[wwwroot/webcamjs/webcam.js]

我无法添加此文件，因为它超出了正文限制。

[_Host.cshtml]

@page "/"
@namespace WebcamjsDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebcamjsDemo</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="WebcamjsDemo.styles.css" rel="stylesheet" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script type="text/javascript" src="~/webcamjs/webcam.min.js"></script>
    <script src="~/webcamjs/Configuration.js"></script>

</body>
</html>

[索引.剃刀]

@page "/"
@inject IJSRuntime JSRuntime

<button @onclick="Capture">Capture</button>

<div class="col-md-2"></div>
<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">Camera</div>
        <div class="panel-body">
            <div id="camera"></div>
            <!-- A button for taking snaps -->
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">Captured Photo</div>
        <div class="panel-body">
            <div id="results">Your captured image will appear here...</div>
        </div>
        <br />
        <br />
    </div>
</div>

@foreach (var item in stringList)
{
    <img src="@item" alt="Alternate Text" width="200px;" height="200px;" />
}



@code
{
    List<string> stringList = new List<string>();
    string aa = "";
    public async void Capture()
    {
        stringList.Add(await JSRuntime.InvokeAsync<string>("take_snapshot"));
        StateHasChanged();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            JSRuntime.InvokeVoidAsync("ready", this);
        }
    }
}

【问题讨论】：

标签： javascript camera blazor-server-side

【解决方案1】：

我建议使用 InputFile 组件。这一个允许您指定使用相机，然后触发本机相机应用程序，您可以在其中切换两个相机。

<InputFile accept="image/png, image/gif, image/jpeg;capture=camera" OnChange="HandleFileSelected" />

capture=camera 是这段代码的重要部分。

【讨论】：