javascript - Blazor 服务器端 - 如何选择相机并拍照
问题描述
我查看了所有我能找到的示例,但找不到一个可以同时使用的示例,选择相机(前置或后置)并拍摄图像。
如何在下面的示例中添加选择不同相机的功能。
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);
}
}
}
解决方案
我建议使用 InputFile 组件。这个允许您指定使用相机,然后触发本机相机应用程序,您可以在其中在两个相机之间切换。
<InputFile accept="image/png, image/gif, image/jpeg;capture=camera" OnChange="HandleFileSelected" />
capture=camera 是这段代码的重要部分。
推荐阅读
- elasticsearch - 索引(ES 7)允许的最大字段数是多少?
- express - 在执行给定请求时将 Express 置于维护模式
- html - 如何使表格及其所有内容在 HTML 中采用其父容器的确切宽度和高度?
- python - 如何将这些值从 txt 导入到我的循环中?
- php - 如果在表单上一一检查或未检查,如何获取数组值?
- jquery - 在 jqgrid 中发送 post 请求并显示数据
- programming-languages - 允许对不同参数值进行单独功能实现的功能的名称是什么?
- c# - Dapper - 将 int 列表传递给存储过程
- ruby-on-rails - 如何检查 URL 中的单词 logo?
- android - Android Studio 将我的小部件标记为不兼容的类型