---
lang: ja-jp
breaks: true
---
# 参考資料
> ASP.NET Core - Capturing Image From Web Cam | WebCam Capture
> https://www.youtube.com/watch?v=VESPItwumjw
> haythamsarawy/WebCam
> https://github.com/haythamsarawy/WebCam
> webcam.js
## プロジェクトを作成
## wwwroot/webcamjs ディレクトリを作成し、`webcam.js`と`reference.rar` の中身を格納
https://github.com/haythamsarawy/WebCam
## wwwroot/CameraPhotos フォルダを作成
## Controllers/CameraController.cs
```csharp=
public class CameraController : Controller
{
private readonly IWebHostEnvironment _environment;
public CameraController(
IWebHostEnvironment environment
)
{
_environment = environment;
}
public IActionResult Capture()
{
return View();
}
[HttpPost]
public IActionResult Capture(string name)
{
try
{
var files = HttpContext.Request.Form.Files;
if (files != null)
{
foreach (var file in files)
{
if (file.Length > 0)
{
var fineName = file.FileName;
var myUniqueFileName = Convert.ToString(Guid.NewGuid());
var fileExtension = Path.GetExtension(fineName);
var newFileName = string.Concat(myUniqueFileName, fileExtension);
var filePath = Path.Combine(_environment.WebRootPath, "CameraPhotos") + $@"\{newFileName}";
if (!string.IsNullOrEmpty(filePath))
{
StoreInFolder(file, filePath);
}
var imageBytes = System.IO.File.ReadAllBytes(filePath);
if (imageBytes != null)
{
StoreInDatabase(imageBytes);
}
}
}
return Json(true);
}
else
{
return Json(false);
}
}
catch (System.Exception)
{
throw;
}
}
private void StoreInFolder(IFormFile file, string fileName)
{
using (FileStream fs = System.IO.File.Create(fileName))
{
file.CopyTo(fs);
fs.Flush();
}
}
private void StoreInDatabase(byte[] imageBytes)
{
// Save imageBytes to database
// Saveing Captured into database
}
}
```
## Views/Camera/Capture.cshtml
```html=
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=uft-8" />
<title>WebCamJS Test Page</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body {
font-family: Arial, Arial, Helvetica, sans-serif;
}
h2, h3 {
margin-top: 0;
}
form {
margin-top: 15px;
}
form > input {
margin-right: 15px;
}
#buttonhide {
background: transparent;
border: none !important;
font-size: 0;
}
</style>
</head>
<body class="container">
<br />
<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="my_camera"></div>
<form>
<input type="button" class="btn btn-success" value="Take snapshot"
onClick="take_snapshot()" />
</form>
</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">Youre captured image will appear here...</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
<script src="~/webcamjs/webcam.js"></script>
<script language="JavaScript">
Webcam.set({
wedth: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#my_camera');
</script>
<script language="JavaScript">
function take_snapshot() {
Webcam.snap(function (data_uri) {
document.getElementById('results').innerHTML =
'<img src="' + data_uri + '"/>';
Webcam.upload(
data_uri,
'Camera/Capture',
function (code, text) {
console.log('Save successfully');
alert('Photo Captured');
});
});
}
</script>
</body>
</html>
```
## Program.cs
```csharp=
・・・
app.MapControllerRoute(
name: "default",
pattern: "{controller=Camera}/{action=Capture}/{id?}");
・・・
```
Sign in with Wallet
Connect another wallet