ASP.NET Core MVC - Capturando imagens de uma WebCam - I
Neste artigo veremos como capturar imagens de uma WebCam usando o plugin jQuery WebCam em uma aplicação ASP .NET Core MVC. |
Hoje vamos criar uma aplicação ASP .NET Core MVC e capturar imagens de uma webcam usando a bibliotea JavaScript WebcamJS. As imagens serão salvas em uma pasta chamada ImagensCapturadas na pasta wwwroot.
Esse plugin utiliza o Adobe Flash Plugin, e, para que as imagens sejam capturadas você tem que instalar e ativar o plugin para o seu navegador padrão.
Eu já publiquei um artigo que mostra como capturar imagens de uma WebCam em uma aplicação ASP .NET WEB Forms. Configura aqui.
Nosso roteiro de trabalho será o seguinte:
Então ao trabalho...
Recursos usados:
Criando o projeto ASP .NET
Abra o Visual Studio 2017 Community, selecione .NET Core e a seguir crie um novo projeto do tipo ASP .NET Core Web Application com o nome AspCore_WebCam.
Selecione a versão da ASP .NET Core (estou usando a 2.1) e o template Web Application(Model-View-Controller):
Pronto, nosso projeto MVC esta criado.
Baixando e instalando o plugin Webcam.js no projeto
Acesse o link https://github.com/jhuckaby/webcamjs e baixe o projeto Webcam.js.
A seguir inclua o pacote no seu projeto dentro da pasta wwwroot, que é o local onde devem ficar os arquivos estáticos.
Crie uma pasta chamada webcamjs dentro da pasta wwwroot e inclua os arquivos do pacote baixados:
Criando o controlador CameraController
Vamos criar um controlador chamado CameraController na pasta Controllers usando o template MVC Controller - Empty.
A seguir altere o nome do método Action de Index para CapturaImagem :
Agora vamos criar a view CapturaImagem.
Para criar a View, clique com o botão direito do mouse dentro do método de Action “CapturaImagem”; uma janela de diálogo vai aparecer para configurar a View.
Nesta janela vamos aceitar o nome CapturaImagem e e desmarcar a caixa de seleção do layout.
Será criado o arquivo CapturaImagem.cshtml na pasta /Views/Camera.
Abra este arquivo e inclua o código abaixo :
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS - Captura Imagem</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body {
font-family: 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="mac_camera"></div>
<!-- botão para tirar foto -->
<form>
<input type="button" class="btn btn-success" value="Capturar Imagem" onClick="captura_imagem()">
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Foto Capturada</div>
<div class="panel-body">
<div id="resultado">Sua imagem capturada vai aparecer aqui.</div>
</div>
<br />
<br />
</div>
</div>
<div class="col-md-2"> </div>
<!-- inclui a livraria javascript -->
<script src="~/webcamjs/webcam.js"></script>
<!-- Configura e anexa a camera -->
<script language="JavaScript">
Webcam.set({
width: 400,
height: 300,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#mac_camera');
</script>
<!-- Codigo para tirar a foto e exibir localmente -->
<script language="JavaScript">
function captura_imagem() {
// tira a foto e obtem os dados da imagem
Webcam.snap(function (data_uri) {
// exibe o resultado na pagina
document.getElementById('resultado').innerHTML =
'<img src="' + data_uri + '"/>';
Webcam.upload(data_uri,'/Camera/CapturaImagemPost',function (code, text) {
alert('Imagem Capturada');
});
});
}
</script>
</body>
</html>
|
Neste código fizemos o seguinte:
Agora ja podemos testar o projeto.
Antes vamos ajustar o arquivo _Layout.cshtml da pasta Shared alterando o menu para incluir um link para acionar o método CapturaImagem do controlador Camera:
...
<div
class="navbar-collapse collapse"> ... |
Vamos alterar também o código da view Index.cshtml da pasta Views/Home incluindo o código abaixo:
@{
ViewData["Title"] = "Home Page";
}
<div class="jumbotron">
<h2 class="display-4">Capturar Imagem da WebCam</h2>
<hr class="my-4">
<p>Usando o plugin Webcamjs</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="http://www.macoratti.net" role="button">Macoratti.net</a>
</p>
</div>
|
Executando o projeto iremos obter a página inicial Index do controlador HomeController:
Clicando no link - Captura Imagem - teremos a view CapturaImagem exibida:
Vemos a imagem da WebCam sendo exibida e agora basta clicar no botão- Capturar Imagem :
Pronto, vemos a imagem capturada ao lado da imagem da web e a mensagem de alerta informando que a imagem foi capturada.
Temos assim a funcionalidade de capturar imagem implementada em nosso projeto.
Na próxima parte do artigo veremos como salvar os dados da imagem capturada.
Pegue o projeto aqui: AspCore_WebCam.zip (sem as referências)
"Todas as
coisas são puras para os puros, mas nada é puro para os contaminados e infiéis;
antes o seu entendimento e consciência estão contaminados.
Confessam que conhecem a Deus, mas negam-no com as obras, sendo abomináveis, e
desobedientes, e reprovados para toda a boa obra."
Tito 1:15,16
Veja os
Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique
e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ? |
Gostou ? Compartilhe no Facebook Compartilhe no Twitter
Referências:
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
Super DVD C# - Recursos de aprendizagens e vídeo aulas para C#
ASP .NET Core 2 - MiniCurso Básico - Macoratti
ASP .NET Core - Macoratti
Conceitos - .NET Framework versus .NET Core - Macoratti
ASP .NET Core - Conceitos Básicos - Macoratti.net
ASP .NET Core MVC - CRUD básico com ADO .NET - Macoratti
ASP .NET Core - Implementando a segurança com ... - Macoratti.net
ASP .NET Core - Apresentando Razor Pages - Macoratti
ASP .NET - Exibindo imagens de um banco de dados - Macoratti
ASP .NET MVC 5 - Cadastro de Produtos (com imagem) - Macoratti.net
ASP .NET MVC 5 - Salvando e Exibindo imagens do banco ... - Macoratti
ASP .NET - Exibindo imagens com GridView - I - Macoratti
ASP .NET Web Forms - Referenciando imagens - Macoratti
ASP .NET - Criando um Álbum de Fotos (C#) - Macoratti
ASP .NET - Zoom em imagens com GridView - Macoratti