How to Capture image of HTML5 camera in asp.net

-
In this blog I am going to capture image of HTML5 camera and store in a file using asp.net
Step 1. Open Visual Studio  =>  File => new => website
Step 2. Give the name of application
Step 3. Add New Page

Step 4. Add  Jquery min js link inside head tag

 <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

Html Markup and script

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Capture.aspx.cs" Inherits="Capture" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>HTML5 Camera  </title>
    <style type="text/css">
        .style1
        {
            width: 600px;
            height: 234px;
           border:1px solid teal;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
              StartCam();
        });
        function StartCam() {
            var canvas = $("#canvas"),
   context = canvas[0].getContext("2d"),
   video = $("#video")[0],
   videoObj = { "video": true },
   errHandler = function (error) {
       console.log("Video capture error: ", error.code);
   };

            if (navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    video.play();
                }, errHandler);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errHandler);
            }
            else if (navigator.mozGetUserMedia) { // Firefox-prefixed
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errHandler);
            }

            $("#BtnCapture").click(function (e) {

                context.drawImage(video, 0, 0, 310, 200);
                var canvas = $("#canvas");
                var imgStr = canvas[0].toDataURL();
                imgStr = imgStr.replace('data:image/png;base64,', '');
                document.getElementById("<%= hfImage.ClientID %>").value = imgStr;
                var img = document.getElementById('<%=ImgProfile.ClientID%>');
                img.src = 'data:image/png;base64,' + imgStr;
             
            });

        }
     
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <asp:HiddenField ID="hfImage" runat="server" />
        <table class="style1">
            <tr>
                <td>
                   <asp:Image  CssClass="Fl staff-circal-second"  ID="ImgProfile" ImageUrl="~/images/Head.png" runat="server" style="border:2px solid #ffffff; border-radius:100%; height:130px; width:130px;-webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.25); box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.25);" /></td>
                <td>
                    <div style="width:310px; margin-bottom:5px;">
                        <video id="video" width="310" height="180" autoplay style="border: 1px solid green;"></video>
                    </div> </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Save" onclick="Button1_Click" />
                </td>
                <td>
                    <button type="button" id="BtnCapture" >Capture</button>
                </td>
            </tr>
        </table>
     <div style="width: 310px; display:none;">
                        <canvas id="canvas" width="310" height="180" style="border: 1px solid green;"></canvas>
                    </div>
    </div>
    </form>
</body>
</html>

Add Namespace

using System.IO;

Code Block

   protected void Button1_Click(object sender, EventArgs e)
    {
        UploadImage(hfImage.Value);
    }
    public void UploadImage(string imageData)
    {
        string fname = Guid.NewGuid().ToString() + ".png";
        string fileNameWitPath = HttpContext.Current.Server.MapPath("~/Captures/" + fname);
        using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {

                byte[] data = Convert.FromBase64String(imageData);

                bw.Write(data);

                bw.Close();
            }

        }
        

    }

Preview
Download

Click here to download



Comments

  1. Johney16 May 2019 at 21:03

    Hi

    Simple , great coding , why cant you post the sample in github

    john

    ReplyDelete

Post a Comment

Popular posts from this blog

Multipart/form-data using basic auth

-
// Implements multipart/form-data POST in C# http://www.ietf.org/rfc/rfc2388.txt // http://www.briangrinstead.com/blog/multipart-form-post-in-c public static class FormUpload {     private static readonly Encoding encoding = Encoding.UTF8;     public static HttpWebResponse MultipartFormDataPost(string postUrl, string userAgent, Dictionary<string, object> postParameters)     {         string formDataBoundary = String.Format("----------{0:N}", Guid.NewGuid());         string contentType = "multipart/form-data; boundary=" + formDataBoundary;         byte[] formData = GetMultipartFormData(postParameters, formDataBoundary);         return PostForm(postUrl, userAgent, contentType, formData);     }     private static HttpWebResponse PostForm(string postUrl, string userAgent, string contentType, byte[] formData)     { ...
Read more

Simple API that receive MultipartData File with parameter in ASP.net Web API

-
This article demonstrate how to create a Asp.net web API that receive file with parameter also get file name  , content type and extension      using  System; using  System.IO; using  System.Linq; using  System.Net; using  System.Net.Http; using  System.Text; using  System.Threading.Tasks; using  System.Web; using  System.Web.Http; namespace  LetstrackAPI.Controllers {      public   class   UploadFileController  :  ApiController     {         [ HttpPost ()]          // [AllowAnonymous]          public   async   Task < object > PostFile()         {              // Check if the reque...
Read more