Hi tprocopio,
I have created a sample. Please refer the below sample code and modify according to your database.
Database
Here I have made use of table mane called Files with the schema as below.
CREATE TABLE [dbo].[Files](
[FileId] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](80) NOT NULL,
[Path] [nvarchar](200) NOT NULL,
CONSTRAINT [PK_Files] PRIMARY KEY CLUSTERED
(
[FileId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
For inserting captured image to database I am making use of Entity Framework.
For more details on how to insert record to database using Entity Framework, please refer following articles.
Model
The model has the following properties.
public class FileModel
{
[Key]
public int FileId { get; set; }
public string Name { get; set; }
public string Path { get; set; }
}
DBCtx
Following is the DbContext class.
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<FileModel> Files { get; set; }
}
Controller
Inside the controller first the captured image of WebCam is retrieved from Request colllection and processed the image for saving to wwwroot folder.
After saving the file, it is inserted to the database table using Entity Framework.
public class HomeController : Controller
{
private IWebHostEnvironment Environment;
private DBCtx Context { get; }
public HomeController(IWebHostEnvironment _environment, DBCtx _context)
{
this.Environment = _environment;
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
public string ProcessaUploadedFile()
{
// Fetch the captured file in IFormFile.
IFormFile file = Request.Form.Files[0];
string fileName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
// Setting file Path.
string filePath = string.Format(Path.Combine(this.Environment.WebRootPath, "Uploads/{0}.jpg"), fileName);
using (FileStream stream = new FileStream(filePath, FileMode.Create))
{
file.CopyTo(stream);
}
// Code for insert in database.
this.Context.Files.Add(new FileModel
{
Name = fileName,
Path = string.Format("~/Uploads/{0}.jpg", fileName)
});
this.Context.SaveChanges();
return fileName;
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th align="center"><u>Live Camera</u></th>
<th align="center"><u>Captured Picture</u></th>
</tr>
<tr>
<td><div id="webcam"></div></td>
<td><img id="imgCapture" /></td>
</tr>
<tr>
<td align="center">
<input type="button" id="btnCapture" value="Capture" />
</td>
<td align="center">
</td>
</tr>
</table>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.js"></script>
<script type="text/javascript">
$(function () {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#webcam');
$("#btnCapture").click(function () {
Webcam.snap(function (data_uri) {
$("#imgCapture")[0].src = data_uri;
Webcam.upload(data_uri, 'Home/ProcessaUploadedFile', function (code, text) {
alert('Photo Captured and saved.')
});
});
});
});
</script>
</body>
</html>
Screenshot
Database record after inserting
