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
  1. <div style="float: left; border: 4px solid #ccc; padding: 5px">
  2. <video autoplay width="480" height="360"></video>
  3. <button id="live" style="cursor:pointer">
  4. Enable Camera
  5. </button>
  6. <button id="snap" style="cursor:pointer">
  7. Capture Photo
  8. </button>
  9. <img style="vertical-align:top" id="imgCapture" width="480" height="360" />
  10. </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.
  1. const video = document.querySelector('video')
  2. document.getElementById('live').onclick = function () {
  3. navigator.mediaDevices.getUserMedia({
  4. video: true
  5. }).then(stream => video.srcObject = stream);
  6. };
  8. const canvas = document.createElement('canvas');
  9. 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:
  1. document.getElementById('snap').onclick = function () {
  2. canvas.width = video.videoWidth;
  3. canvas.height = video.videoHeight;
  4. canvas.getContext('2d').drawImage(video, 0, 0);
  5. video.srcObject.getTracks().forEach(track => track.stop());
  6. // Other browsers will fall back to image/png
  7. $("#imgCapture").css("visibility", "visible");
  8. $("#imgCapture").attr("src", canvas.toDataURL('image/png'));
  9. $('#capture_photo').val(canvas.toDataURL('image/png'));
  10. PostImage();
  11. }
"PostImage()" - is a javascript method, which will call MVC action method to save the captured photo physically in the application folder.
  1. function PostImage() {
  2. var photoVal = $('#imgCapture').val();
  3. if (photoVal != "") {
  4. $.ajax({
  5. type: "POST",
  6. url: '/BasicClaimant/PhotoCapture',
  7. async: false,
  8. data: { photoVal: photoVal },
  9. contentType: "application/html; charset=utf-8",
  10. dataType: "text",
  11. success: function (r) {
  12. $("#imgCapture").css("visibility", "visible");
  13. $("#imgCapture").attr("src", r);
  14. $('#capture_photo').val(r);
  16. },
  17. failure: function (response) {
  18. alert(response.d);
  19. }
  20. });
  21. }
  23. }
Please find the MVC ASP.NET C# code to save the photo in a physical folder
  1. public ActionResult PhotoCapture()
  2. {
  3. if (!System.IO.Directory.Exists(Server.MapPath("~/Captures")))
  4. {
  5. System.IO.Directory.CreateDirectory(Server.MapPath("~/Captures"));
  6. }
  7. if (Request.InputStream.Length > 0)
  8. {
  9. using (StreamReader reader = new StreamReader(Request.InputStream))
  10. {
  11. string hexString = Server.UrlEncode(reader.ReadToEnd());
  12. string imagePath = string.Format("~/Captures/{0}.png", imageName);
  13. System.IO.File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
  14. }
  15. }
  17. }
Thank you for reading!