1

Tengo una aplicación web que necesita grabar una foto tomada desde una tablet. El javascript funciona bien hasta tomar la foto, pero al enviarla al servidor utilizando ajax se va por la opción de error y me dice que hay un "parseerror".

El javacript funciona bien hasta el $ajax. Cuando entra a ejecutar esta parte se va por la parte de error. El error me dice que el JSON tiene un error de formato en la linea 3 columna 1.

Aquí adjunto el código de lo que estoy haciendo:

    var width = 320;
    var height = 0;
    var dispositivos = [];
    var streaming = false;
    var video = null;
    var canvas = null;
    var photo = null;
    var startbutton = null;
    var videoSelect = null;
    var contador = 0;

    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    startbutton = document.getElementById('startbutton');
    videoSelect = document.getElementById('select_video');

    video.addEventListener('canplay', function (ev) {
       if (!streaming) {
           height = video.videoHeight / (video.videoWidth / width);

           if (isNaN(height)) {
              height = width / (4 / 3);
           }

           video.setAttribute('width', width);
           video.setAttribute('height', height);
           canvas.setAttribute('width', width);
           canvas.setAttribute('height', height);
           streaming = true;
      }
   }, false);

   startbutton.addEventListener('click', function (ev) {
       takepicture();
       ev.preventDefault();
   }, false);

   clearphoto();

   function clearphoto() {
        var context = canvas.getContext('2d');
        context.fillStyle = "#AAA";
        context.fillRect(0, 0, canvas.width, canvas.height);
        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);
   }

   function takepicture() {
         var context = canvas.getContext('2d');
         if (width && height) {
            canvas.width = width;
            canvas.height = height;
            context.drawImage(video, 0, 0, width, height);
            var imagen = canvas.toDataURL('image/png');
            var data = canvas.toDataURL();
            data = data.replace('data:image/png;base64,', '');
            photo.setAttribute('src', imagen);
            $.ajax({
                type: "POST",
                url: "video.aspx/GrabaFoto",
                data: '{"data" : "' + data + '"}',
                dataType: "json",
                contentType: 'aplication/json; charset=utf-8',
                success: function (respuesta) {
                      //alert('Imagen grabada en el disco');
                      console.log(respuesta);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                      alert("Status: " + textStatus);
                      alert("Error: " + errorThrown);
                }
          });
          } else {
                clearphoto()
          }
      }

   $(document).ready(function () {
       $("button.cargar").click(function () {
           navigator.mediaDevices.enumerateDevices().then(function (devices) {
               for (var i = 0; i !== devices.length; ++i) {
                   if (devices[i].kind === 'videoinput') {
                       dispositivos.push(devices[i]);
                    };
               };
               if (dispositivos.length > 0) {
                   for (var i = 0; i !== dispositivos.length; ++i) {
                       const option = document.createElement('option');
                       option.value = dispositivos[i].deviceId;
                       option.text = dispositivos[i].label;
                   };
               };
                const camera = dispositivos[dispositivos.length - 1];
                navigator.mediaDevices.getUserMedia({
                video: {
                     deviceId: camera.deviceId,
                     facingMode: ['user', 'environment'],
                     height: { ideal: 1080 },
                     width: { ideal: 1920 }
                }
               }).then(function (stream) {
                  video.srcObject = stream;
                  video.play();
               })
          });
      });
    });

El codigo HTML es el siguiente:

   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Fotos.aspx.cs" 
       Inherits="TomarFoto.Fotos" %>

   <!DOCTYPE html>

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
   </head>
   <body>
        <section class="content">

             <div class="row">
             <div class="col-md-6">
                  <video id="video">Video no habilitado</video>
                  <button class="cargar" type="button">Reproducir video</button>
                  <canvas id="canvas"></canvas>
             </div>
                <div class="col-md-6">
                    <img id="photo" alt="La pantalla capturada aparecerá aquí">
                    <button class="btn btn-primary" id="startbutton">Tomar Foto</button>
                </div>

             </div>
       </section>
       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
       <script src="script.js"></script>
   </body>
   </html>

Ahora adjunto el archivo "video.aspx.cs" que contiene la función GrabaFoto.:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Services;
    using System.Web.Script.Serialization;
    using System.Diagnostics;
    using System.Globalization;
    using System.IO;
    using System.Reflection;
    using System.Runtime.CompilerServices;
    using System.Security;
    using System.Text;
    using System.Threading.Tasks;
    using Microsoft.VisualBasic;
    using System.Data;
    using System.Data.OleDb;
    using System.Drawing;
    using System.Drawing.Design;
    using Newtonsoft.Json;
    namespace TomarFoto
    {
       public partial class video : System.Web.UI.Page
       {
            protected void Page_Load(object sender, EventArgs e)
            {

            }

            [WebMethod]

            public static void GrabaFoto(string data)
            {
                Guid id = Guid.NewGuid();
                string path = HttpContext.Current.Server.MapPath("~/images/" 
                   + id.ToString() + ".png");
                byte[] binaryData = Convert.FromBase64String(data);
                FileStream file = new FileStream(path, FileMode.Create);
                BinaryWriter bw = new BinaryWriter(file);
                bw.Write(binaryData);
                bw.Close();
           }
       }
   }
2
  • El error está en video.aspx/GrabaFoto, que no está devolviendo un JSON válido. Por favor edita tu pregunta y agrega el código con el que tratas de guardar la foto.
    – Triby
    Commented el 25 may. 2020 a las 18:20
  • Hola gracias por tu respuesta. Te adjunto el código del achivo C#, para que tengas la amabilidad de ayudarme... Te agradezco mucho, es lo único que me falta del proyecto que debo terminar:
    – Jorge
    Commented el 25 may. 2020 a las 20:19

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.