0

I am trying to take a snapshot from the stream video converting that snapshot to base64 and uploading it to server.The below code work when i draw a image but not when i take a snapshot below is my code please help

Html: 

    <video id="cam" width="320px" height="240px" autoplay style="display: inline;"></video>
    <canvas width="320" id="canvas" height="240" style="display: inline;"></canvas>
    <button id="snap">Snap Photo</button>
    <button id="capture" onclick="javascript:captureImage();return false;">Capture</button>

Javascript:

            var video = document.getElementById("cam");
            var canvas = document.getElementById("canvas");
            var context= canvas.getContext('2d');


            getUserMedia({ "video": true }, function (stream) {
                    var url = createObjectURL(stream);
                    video.src = url;  
                    }, function (error) { alert("error while loading camera"); }
            );

      document.getElementById("snap").addEventListener("click", function() {
                context.drawImage(video, 0, 0, 320, 240);
            });


  function captureimage() {
            var Pic = document.getElementById("canvas").toDataURL("image/png");

            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
            $.ajax({
                url: 'Save_Picture.aspx/UploadPic',
                type: 'POST',
                data: '{ "imageData" : "' + Pic + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert("Done, Picture Uploaded.");
                },
                error: function (jqXHR, status, err) {
                    alert(err.message)
                    alert("Local error callback.");
                }

            });
        }

aspx:

       public static void UploadPic(string imageData)
    {
        System.IO.File.WriteAllText(@"C:\path.txt", imageData);
        string Pic_Path = HttpContext.Current.Server.MapPath("MyPicture.png");
        using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                byte[] data = Convert.FromBase64String(imageData);
                bw.Write(data);
                bw.Close();
            }
        }
    }
user3067170
  • 193
  • 4
  • 14
  • Any error in the console? [This post](http://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported) talks about the same problem I have when I try your code _[with a video file, not the camera]_. Try on a server instead of your machine, it will rule that out if it doesn't work. – blex Feb 25 '15 at 21:44
  • I am actually using mobile and the server to test it the i am just getting an ajax callback error as undefined. when i put Pic value in an alert am getting some base64 value – user3067170 Feb 25 '15 at 22:07

1 Answers1

0

The problem was the size of the image when changed the image size it worked fine

Changed from :

    context.drawImage(video, 0, 0, 320, 240);

changed to:

    context.drawImage(video, 0, 0, 200, 150);
user3067170
  • 193
  • 4
  • 14