ASP.NET Core - Capturando imagens de uma WebCam

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:

Criar uma aplicação ASP.NET Core MVC;
Baixar e adicionar os arquivos de referência relacionados à webcam.js no projeto;
Adicionar um Controlador: CameraController
Adicionar o modo de captura;
Adicionar um método Action CapturaImagem para Manipular a requisição de Post do Ajax;
Capturar a imagem no modo Debug;
Armazenar a imagem capturada em uma pasta;
Armazenar a imagem capturada no banco de dados;

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:

Definimos um estilo básico;
Definimos um botão com o evento onClick e a função tira_foto();
Definimos uma div (resultado) onde sera exibida a imagem capturada
Incluimos a biblioteca WebcamJs;
Configuramos alguns valores da biblioteca(largura,altura,formato da imagem, etc.);
Definimos a função tira_foto() para obter e exibir a imagem capturada;

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">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Camera" asp-action="CapturaImagem">Captura Imagem</a></li>
</ul>
</div>

...

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 ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

Quer aprender os conceitos da Programação Orientada a objetos ?

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

Curso ASP .NET MVC 5 - Vídeo Aulas

Gostou ? Compartilhe no Facebook Compartilhe no Twitter

Referências:

José Carlos Macoratti