Capture A Photo In HTML Without A Flash Player In MVC ASP.NET

This code helps you to capture a photo without using a flash player in HTML5 and save a photo using ASP.NET and MVC

Introduction 

 

This code helps you to capture a photo without using a flash player in HTML5, and save a photo using ASP.NET and MVC 

 

HTML 5 Code to enable and view camera

<div style="float: left; border: 4px solid #ccc; padding: 5px">
           <video autoplay width="480" height="360"></video>
           <button id="live" style="cursor:pointer">
            Enable Camera
           </button>
           <button id="snap" style="cursor:pointer">
               Capture Photo
           </button>
           <img style="vertical-align:top" id="imgCapture" width="480" height="360" />
       </div>

"Enable Camera" is a button, to enable camera with video in the application. To enable camera, below is the Javascript required and the video will be appear in the <Video></Video> tag section.

const video = document.querySelector('video')
        document.getElementById('live').onclick = function () {
            navigator.mediaDevices.getUserMedia({
                video: true
            }).then(stream => video.srcObject = stream);
        };

              const canvas = document.createElement('canvas');
        const img = document.querySelector('img');

"CAPTURE PHOTO" - is a button to capture photo from the video playing the <Video></Video> tag section and the photo will be displayed in the ID -  "imgCapture" section. Javascript below:

document.getElementById('snap').onclick = function () {
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
         canvas.getContext('2d').drawImage(video, 0, 0);
         video.srcObject.getTracks().forEach(track => track.stop());
         // Other browsers will fall back to image/png
         $("#imgCapture").css("visibility", "visible");
         $("#imgCapture").attr("src", canvas.toDataURL('image/png'));
         $('#capture_photo').val(canvas.toDataURL('image/png'));
         PostImage();
     }

"PostImage()" - is a javascript method, which will call MVC action method to save the captured photo physically in the application folder.

function PostImage() {
           var photoVal = $('#imgCapture').val();
           if (photoVal != "") {
               $.ajax({
                   type: "POST",
                   url: '/BasicClaimant/PhotoCapture',
                   async: false,
                   data: { photoVal: photoVal },
                   contentType: "application/html; charset=utf-8",
                   dataType: "text",
                   success: function (r) {
                       $("#imgCapture").css("visibility", "visible");
                       $("#imgCapture").attr("src", r);
                       $('#capture_photo').val(r);

                   },
                   failure: function (response) {
                       alert(response.d);
                   }
               });
           }

       }

Please find the MVC ASP.NET C# code to save the photo in a physical folder

 public ActionResult PhotoCapture()
      {
if (!System.IO.Directory.Exists(Server.MapPath("~/Captures")))
          {
              System.IO.Directory.CreateDirectory(Server.MapPath("~/Captures"));
          }
      if (Request.InputStream.Length > 0)
          {
              using (StreamReader reader = new StreamReader(Request.InputStream))
              {
                  string hexString = Server.UrlEncode(reader.ReadToEnd());
            string imagePath = string.Format("~/Captures/{0}.png", imageName);
                  System.IO.File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
            }
            }

}

Thank you for reading!