Back-End

28 mar, 2019

ASP.NET MVC 5 – Capturando imagens de uma WebCam

100 visualizações
Publicidade

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> &nbsp;</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).