Neste artigo vou mostrar como capturar imagens de uma WebCam usando o plugin jQuery WebCam em uma aplicação ASP .NET MVC 5.
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.
Vamos precisar baixar também o Download jQuery Webcam Plugin.
A seguir estão as propriedades de configuração do plugin jQuery Webcam:
- 1. width: largura do DIV que exibe a câmera ao vivo
- 2. height: altura do DIV que exibe a câmera ao vivo
- 3. mode: existem modos diferentes, como retorno de chamada, salvar, etc. Estou usando o modo de salvar, pois vamos salvar a imagem capturada no servidor
- 4. swffile: caminho do arquivo Flash que será usado para exibir a webcam na página
Além das propriedades de configuração acima, os seguintes eventos foram usados:
- 1. debug: evento de depuração e é acionado cada vez que o plugin jQuery Webcam realiza alguma operação. Pode ser usado para exibir o status do plugin jQuery Webcam.
- 2. onSave: evento acionado depois que a imagem é capturada e carregada no servidor.
- 3. onCapture: evento acionado quando a função de captura do plugin jQuery Webcam for executada.
Então, ao trabalho!
Recursos usados:
Criando o projeto ASP .NET MVC 5
Abra o Visual Studio 2017 Community e crie um novo projeto do tipo ASP .NET Web Application (.NET Framework) com o nome Mvc_WebCam.
A seguir marque as opções Empty e MVC (sem autenticação) e clique em OK;
Crie na raiz do projeto a pasta Imagens, onde iremos salvar as imagens e crie também uma pasta chamada WebCam_Plugin, colocando nela o conteúdo baixado do plugin jQuery WebCam.
Criando o Controlador HomeController
Clique com o botão direito sobre a pasta Controllers e em seguida clique em Add > Controller.
Escolha o template MVC 5 Controller – Empty e clique em Add.
Para encerrar essa parte, informe o nome HomeController e clique em Add.
Seu projeto deverá ter a seguinte estrutura e arquivos:
Definindo os métodos de HomeController
No controlador HomeController vamos definir os seguintes métodos:
- Index: método ActionResult que define um objeto Session e apresenta a View Index.cshtml
- Capturar: método ActionResult que captura a imagem da webcam e salva na pasta Imagens
- GetCapture: método ContentResult que retorna a url da imagem capturada
- ConvertHexToBytes: método para converter de hexadecimal para bytes
Abra o arquivo HomeController e inclua o código abaixo:
using System;
using System.IO;
using System.Web;
using System.Web.Mvc;
namespace Mvc_WebCam.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
Session["ImagemCapturada"] = "";
return View();
}
[HttpPost]
public ActionResult Capturar()
{
if (Request.InputStream.Length > 0)
{
using (StreamReader reader = new StreamReader(Request.InputStream))
{
string hexString = Server.UrlEncode(reader.ReadToEnd());
string nomeImagem = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
string caminhoImagem = string.Format("~/Imagens/{0}.png", nomeImagem);
System.IO.File.WriteAllBytes(Server.MapPath(caminhoImagem), ConvertHexToBytes(hexString));
Session["ImagemCapturada"] = VirtualPathUtility.ToAbsolute(caminhoImagem);
}
}
return View();
}
[HttpPost]
public ContentResult GetCapturar()
{
string url = Session["ImagemCapturada"].ToString();
Session["ImagemCapturada"] = null;
return Content(url);
}
private static byte[] ConvertHexToBytes(string hex)
{
byte[] bytes = new byte[hex.Length / 2];
for (int i = 0; i < hex.Length; i += 2)
{
bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 16);
}
return bytes;
}
}
}O Método Action Index manipula a operação GET e define uma variável Session que armazenará a URL da imagem capturada e retorna a view Index.cshtml (que iremos criar).
O método Action POST Capturar vai salvar a imagem capturada. A imagem capturada é enviada como dados na forma de sequência hexadecimal pelo método save do plug-in da webcam do jQuery.
Os dados da imagem capturada são lidos usando a classe StreamReader e são convertidos em uma cadeia hexadecimal.
Em seguida, essa sequência hexadecimal é convertida em um array de bytes que é finalmente salvo como um arquivo imagem em uma pasta e a URL da imagem capturada é armazenada na variável de sessão.
O método Action GetCapturar retorna a URL da imagem capturada e é chamado via método POST.
Criando a View Index.cshtml
Precisamos agora criar a view Index.cshtml que exibirá a página ao usuário para capturar a imagem da webcam.
Clique com o botão direito sobre o método Action Index no controlador e em seguida clique em Add View.
Aceite os dados da janela Add View e clique em Add.
Será criado o arquivo Index.cshtml na pasta Views/Home.
Agora vamos definir o código abaixo neste arquivo:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Capturar Imagem WebCam</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><u>WebCam ao vivo</u></td>
<td></td>
<td align="center"><u>Imagem Capturada</u></td>
</tr>
<tr>
<td><div id="webcam"></div> </td>
<td> </td>
<td><img id="imgCaptura" style="visibility: hidden; width: 350px;height: 300px" /></td>
</tr>
</table>
<br />
<input type="button" value="Capturar Imagem" onclick="Capturar();" />
<br />
<span id="camStatus"></span>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/WebCam_Plugin/jquery.webcam.js"></script>
<script type="text/javascript">
$(function () {
jQuery("#webcam").webcam({
width: 350,
height: 300,
mode: "save",
swffile: '/WebCam_Plugin/jscam.swf',
debug: function (type, status) {
$('#camStatus').append(type + ": " + status + '<br /><br />');
},
onSave: function (data, ab) {
$.ajax({
type: "POST",
url: '/Home/GetCapturar',
data: '',
contentType: "application/json; charset=utf-8",
dataType: "text",
success: function (r) {
$("#imgCaptura").css("visibility", "visible");
$("#imgCaptura").attr("src", r);
},
failure: function (response) {
alert(response.d);
}
});
},
onCapture: function () {
webcam.save('/Home/Capturar');
}
});
});
function Capturar() {
webcam.capture();
}
</script>
</body>
</html>Ao apresentar a View, o plugin deverá ser ativado para capturar a imagem da webcam.
Eu utilizei um navegador Chrome e tive que ativar o plugin, como mostram as figuras abaixo:
A seguir, a imagem da webcam vai aparecer e podemos capturar a imagem clicando no botão Capturar, conforme mostra o resultado abaixo (minha webcam está com problemas de resolução):
Quando o botão da página for clicado, a função JavaScript Capturar() é executada, e faz uma chamada para o método capture de plug-in do jQuery Webcam.
Depois que a imagem é capturada, ela é enviada para o servidor usando o método save do plugin, que é chamado no manipulador de eventos OnCapture.
Finalmente, o manipulador de eventos OnCapture faz uma chamada ao método Action Capturar() do controlador HomeController que obtém o nome da imagem e salva a imagem na pasta Imagens, armazenando o seu caminho na sessão.
No método POST o método Action GetCapturar() é chamado e retorna a url da imagem salva.
Pegue o projeto aqui: Mvc_WebCam.zip (sem as referências).
De 0 a 10, o quanto você recomendaria este artigo para um amigo?