6:49 0 4
Uso de la camara con HTML5 y JAVASCRIPT

Uso de la camara con HTML5 y JAVASCRIPT

  Sergi |  febrero 22017
Si necesitas caputurar imagenes / fotos desde la WebCam del usuario, esta es la mejor solucion que he encontrado por ahora. El unico problema que tiene es que el tama­ño de la imagen es siempre el mismo 320x240 y por mucho que intentes cambiarlo no puedes. El problema se puede solucionar si tienes posibilidad de editar el fichero FLASH y cabiar los valores ahi dentro.

jQuery webcam plugin (por Robert Eisele)

Primero descargate el plugin desde aqui

El HTML que usaremos en el ejemplo

En este ejemplo utilizaremos un DIV para mostrar el contenido de la camara, un control de imagen para mostrar la captura una vez realizada, un SPAN donde se mostrara un pequeño log y un boton para realizar la capura. Muy simple todo.

<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <u>Live Camerau>
        td>
        <td>
        td>
        <td align="center">
            <u>Captured Pictureu>
        td>
    tr>
    <tr>
        <td>
            <div id="webcam">
            div>
        td>
        <td>
             
        td>
        <td>
            <asp:Image ID="imgCapture" runat="server" Style="visibility: hidden; width: 320px;
                height: 240px" />
        td>
    tr>
table>
<br />
<asp:Button ID="btnCapture" Text="Capture" runat="server" OnClientClick="return Capture();" />
<br />
<span id="camStatus">span>
form>

A por el codigo C# (y VB.NET)

Namespaces

C#
using System.IO;
using System.Web.Services;
VB.NET
Imports System.IO
Imports System.Web.Services

La implementacion del codigo

La imagen capturada se envía como datos sin formato en forma de cadena hexadecimal por el jQuery Webcam Flash al servidor y por lo tanto debe ser capturada en el evento Page Load de la página ASP.Net.

Si el Request.InputStream tiene datos, entonces se lee utilizando StreamReader y luego se convierte en una cadena hexadecimal y, a continuación, la cadena hexadecimal se convierte en matriz de bytes que se guarda como un archivo de imagen.

La ruta de la imagen también se guarda como URL en una variable de sesión, ya que se utilizará más adelante cuando se realiza la llamada AJAX a GetCapturedImage WebMethod para obtener la dirección URL de la imagen guardada.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        if (Request.InputStream.Length > 0)
        {
            using (StreamReader reader = new StreamReader(Request.InputStream))
            {
                string hexString = Server.UrlEncode(reader.ReadToEnd());
                string imageName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
                string imagePath = string.Format("~/Captures/{0}.png", imageName);
                File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
                Session["CapturedImage"] = ResolveUrl(imagePath);
            }
        }
    }
}
 
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;
}
 
[WebMethod(EnableSession = true)]
public static string GetCapturedImage()
{
    string url = HttpContext.Current.Session["CapturedImage"].ToString();
    HttpContext.Current.Session["CapturedImage"] = null;
    return url;
}
VB.NET
Protected Sub Page_Load(sender As Object, e As EventArgsHandles Me.Load
    If Not Me.IsPostBack Then
        If Request.InputStream.Length > 0 Then
            Using reader As New StreamReader(Request.InputStream)
                Dim hexString As String = Server.UrlEncode(reader.ReadToEnd())
                Dim imageName As String = DateTime.Now.ToString("dd-MM-yy hh-mm-ss")
                Dim imagePath As String = String.Format("~/Captures/{0}.png", imageName)
                File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString))
                Session("CapturedImage") = ResolveUrl(imagePath)
            End Using
        End If
    End If
End Sub
 
Private Shared Function ConvertHexToBytes(hex As StringAs Byte()
    Dim bytes As Byte() = New Byte(hex.Length / 2 - 1) {}
    For i As Integer = 0 To hex.Length - 1 Step 2
        bytes(i / 2) = Convert.ToByte(hex.Substring(i, 2), 16)
    Next
    Return bytes
End Function
 
<WebMethod(EnableSession:=True)> _
Public Shared Function GetCapturedImage() As String
    Dim url As String = HttpContext.Current.Session("CapturedImage").ToString()
    HttpContext.Current.Session("CapturedImage") = Nothing
    Return url
End Function

Integrandolo el jQuery Webcam Plugin en ASP.NET

Dentro del controlador de eventos jQuery load, he aplicado el plugin jQuery Webcam al HTML DIV para que la grabación en vivo de la cámara web pueda ser reproducida en la página web.
A continuación se muestran las propiedades de configuración del complemento jQuery Webcam.
  1. width - Ancho de la DIV que muestra la cámara en vivo.
  2. height - Altura del DIV que muestra la cámara en vivo.
  3. mode - Hay diferentes modos, como la devolución de llamada, guardar, etc Estoy usando el modo de guardar como necesito para guardar la imagen capturada en el servidor.
  4. swffile - La ruta del archivo Flash que se utilizará para mostrar la cámara web en la página.
Además de las propiedades de configuración anteriores, se han utilizado los siguientes eventos.
  1. debug -: este evento es un evento de depuración y se activa después de cada vez que el complemento jQuery Webcam realiza alguna operación. Este evento se puede utilizar para mostrar el estado del complemento jQuery Webcam.
  2. onSave - Este evento se activa después de que la imagen es capturada y cargada en el servidor.
  3. onCapture - Este evento se activa cuando se ejecuta la función de captura del complemento jQuery Webcam.
Cuando se hace clic en el botón ASP.Net, se ejecuta la función JavaScript llamada Capture, que realiza una llamada al método de captura del plugin.

Una vez que la imagen es capturada, se carga en el servidor utilizando el método de guardado de jQuery Webcam plugin que se llama dentro del controlador de eventos OnCapture.

Finalmente, el controlador de eventos OnCapture realiza una llamada jQuery AJAX al método GetCapturedImage que obtiene la dirección URL de la imagen capturada desde el servidor y la URL se asigna al control ASP.Net Image.

Codigo JAVASCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">script>
<script src='<%=ResolveUrl("~/Webcam_Plugin/jquery.webcam.js") %>' type="text/javascript">script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/Default.aspx") %>';
$(function () {
    jQuery("#webcam").webcam({
        width: 320,
        height: 240,
        mode: "save",
        swffile: '<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
        debug: function (type, status) {
            $('#camStatus').append(type + ": " + status + '

'
);
        },
        onSave: function (data) {
            $.ajax({
                type: "POST",
                url: pageUrl + "/GetCapturedImage",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("[id*=imgCapture]").css("visibility""visible");
                    $("[id*=imgCapture]").attr("src", r.d);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        },
        onCapture: function () {
            webcam.save(pageUrl);
        }
    });
});
function Capture() {
    webcam.capture();
    return false;
}
script>

El articulo original aqui

Happy coding!!!!

#jquery #AJAX

4 Comentarios

    • DrUalcman-Programacion
      domingo, 26 de agosto de 2018 6:12

      Jose, comprobaste también el tema de los permisos? porque una vez me volví loco con eso de que no guardaba y al final era problema de los permisos de acceso a la carpeta, que no se podía escribir.

    • JoseAntonio
      lunes, 28 de mayo de 2018 1:21

      Hola yo tengo el mismo problema que el, no me guarda la imagen, ya cheque lo que pusiste la ruta de la carptea que sea correcta junto con la de los demas archivos, ya actualize la version del query y todo, pero sigue sin funcionar.

    • SergiOrtizGomez
      viernes, 26 de enero de 2018 10:19

      Hola Carlos, lamento el retraso en la respuesta. He probado el código de nuevo, tanto en local como en mi servidor web, alojado en 1and1 y lo único que te puedo recomendar es que te asegures de dos cosas, que son las que, haciendo pruebas, conseguí reproducir un posible error que estarás cometiendo, ya que no has postrado tu código. Tienes que revisar:

      1) Que tienes permiso de escritura en la carpeta donde vas a guardar las imagenes
      2) que las rutas son correctas. A mi me paso, tras tanto tiempo, al cambiar las rutas, que las rutas no eran las mismas, tienes que asegurarte que en el Page_Load() esta linea

      string imagePath = string.Format("~/Captures/{0}.png", imageName);

      Es la misma ruta que base que donde esta alojado el script. Por ejemplo si la ruta es

      /camara/Captures
      /camara/Webcam_Plugin
      /camara/pagina.asp

      en el load deberia de ser

      string imagePath = string.Format("~/camara/Captures/{0}.png", imageName);

      Con eso se y, ademas, asegurarte de tener permiso de escritura en la carpeta /Captures, es suficiente para que te funcione el código propuesto.

      Para probarlo hoy me he descargado mis ficheros desde el mismo enlace que aparece en este blog.

      Un saludo

    • Carlos
      jueves, 10 de agosto de 2017 5:30

      Por mas que intento, no me guarda la imagen en mi servidor.

      Tengo un servidor virtual alojado en xxxx
      Ingreso a la pagina .aspx , logro visualizar la camara y todo, al momento de ejecutar el boton, no hace nada solo muestra los status.

      Revise y no logro detectar el error.

 
 
 

Archivo