---
# System prepended metadata

title: ASP.NET Core webcam.js を使用した、Webカメラ画像のサーバへのアップロードサンプル。2023-07-27
tags: [アップロード, C#, Webカメラ, webcam.js, バーコード, ASP.NET Core]

---

---
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

## プロジェクトを作成

![](https://hackmd.io/_uploads/rkS22H1jh.png)

![](https://hackmd.io/_uploads/rkCkprksn.png)

## wwwroot/webcamjs ディレクトリを作成し、`webcam.js`と`reference.rar` の中身を格納

https://github.com/haythamsarawy/WebCam

![](https://hackmd.io/_uploads/ryVETB1i2.png)

## wwwroot/CameraPhotos フォルダを作成

![](https://hackmd.io/_uploads/B18OTSJon.png)

## 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?}");
・・・
```