Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
1.00/5 (4 votes)
See more:
here is link
http://www.c-sharpcorner.com/UploadFile/4d9083/capturing-image-from-web-cam-in-Asp-Net/

in this iam using java script capturing and submit for store in folder . then after clicking submit btn image display on image box

here is a code :
aspx
ASP.NET
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Captureimage.aspx.cs" Inherits="WebCam_Captureimage" %>

<!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>Capture Image</title>

    <link rel="stylesheet" type="text/css" href="css/Master.css" />
    <style type="text/css">
        #webcam, #canvas
        {
            width: 272px;
            border: 1px solid #ccc;
            background: #eee;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }

        #webcam
        {
            position: relative;
            margin-top: 5px;
            margin-bottom: 10px;
        }

            #webcam > span
            {
                z-index: 2;
                position: absolute;
                color: #eee;
                font-size: 10px;
                bottom: -16px;
                left: 152px;
            }

            #webcam > img
            {
                z-index: 1;
                position: absolute;
                border: 0px none;
                padding: 0px;
                bottom: -40px;
                left: 89px;
            }

            #webcam > div
            {
                border: 1px solid #ccc;
                position: absolute;
                right: -90px;
                padding: 5px;
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
                cursor: pointer;
            }

            #webcam a
            {
                background: #fff;
                font-weight: bold;
            }

                #webcam a > img
                {
                    border: 0px none;
                }

        #canvas
        {
            border: 1px solid #ccc;
            background: #eee;
        }

        #flash
        {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 5000;
            width: 100%;
            height: 500px;
            background-color: #c00;
            display: none;
        }

        object
        {
            display: block; /* HTML5 fix */
            position: relative;
            z-index: 1000;
        }
    </style>

    <script language="javascript" type="text/javascript">
        function clearText(field) {
            if (field.defaultValue == field.value) field.value = '';
            else if (field.value == '') field.value = field.defaultValue;
        }
    </script>

    <link href="../css/Master.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="Scripts/jquery.webcam.js" type="text/javascript"></script>



</head>
<body>

    <div class="PhotoUploadWrapper">
        <div class="PhotoUpoloadCoseBtn">
        </div>
        <div class="PhotoUploadContent">
            <div class="PhotoUpoloadHeader">
                Select photo
            </div>
            <div class="PhotoUpoloadLeft">
                <div class="PhotoUpoloadRightHeader">
                    <p style="float: left; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 35px; text-indent: 18px; font-weight: bold; color: #FFF;">
                        Upload Photo
                    </p>

                </div>
                <div class="PhotoUpoloadLeftMainCont">
                    <div class="photo_selected_BG">
                        <div style="padding: 20px 0px 0px 24px;">
                            <div id="webcam">
                            </div>
                        </div>
                    </div>
                    <div style="text-align: center; margin-removed 46px;">
                        <a href="java<!-- no -->script:webcam.capture();void(0);">

                            <input type="image" id="capture" /></a>
                    </div>
                </div>
            </div>
            <div class="PhotoUpoloadRight">
                <div class="PhotoUpoloadLeftHeader">
                    <p style="float: left; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 35px; text-indent: 18px; font-weight: bold; color: #FFF;">
                        Web Camera
                    </p>

                </div>
                <div class="photo_selected_BG">
                    <div style="padding: 26px 0px 0px 25px;">
                        <canvas id="canvas" width="320" height="240"></canvas>
                    </div>
                </div>
                <div style="text-align: center; margin-removed 46px;">
                    <a href="#" id="filter">

                        <input type="image" id="Submit"  runat="server" src="images/submitBTN.png"  /></a>
                </div>
            </div>
        </div>
    </div>

JavaScript
    <script type="text/javascript">

        var pos = 0;
        var ctx = null;
        var cam = null;
        var image = null;

        var filter_on = false;
        var filter_id = 0;

        function changeFilter() {
            if (filter_on) {
                filter_id = (filter_id + 1) & 7;
            }
        }

        function toggleFilter(obj) {
            if (filter_on = !filter_on) {
                obj.parentNode.style.borderColor = "#c00";
            } else {
                obj.parentNode.style.borderColor = "#333";
            }
        }

        jQuery("#webcam").webcam({

            //width: 272,
            width: 272,
            height: 202,
            mode: "callback",
            swffile: "jscam_canvas_only.swf",

            onTick: function (remain) {

                if (0 == remain) {
                    jQuery("#status").text("Cheese!");
                } else {
                    jQuery("#status").text(remain + " seconds remaining...");
                }
            },

            onSave: function (data) {

                var col = data.split(";");
                var img = image;

                if (false == filter_on) {

                    for (var i = 0; i < 320; i++) {
                        var tmp = parseInt(col[i]);
                        img.data[pos + 0] = (tmp >> 16) & 0xff;
                        img.data[pos + 1] = (tmp >> 8) & 0xff;
                        img.data[pos + 2] = tmp & 0xff;
                        img.data[pos + 3] = 0xff;
                        pos += 4;
                    }

                } else {

                    var id = filter_id;
                    var r, g, b;
                    var r1 = Math.floor(Math.random() * 255);
                    var r2 = Math.floor(Math.random() * 255);
                    var r3 = Math.floor(Math.random() * 255);

                    for (var i = 0; i < 320; i++) {
                        var tmp = parseInt(col[i]);

                        /* Copied some xcolor methods here to be faster than calling all methods inside of xcolor and to not serve complete library with every req */

                        if (id == 0) {
                            r = (tmp >> 16) & 0xff;
                            g = 0xff;
                            b = 0xff;
                        } else if (id == 1) {
                            r = 0xff;
                            g = (tmp >> 8) & 0xff;
                            b = 0xff;
                        } else if (id == 2) {
                            r = 0xff;
                            g = 0xff;
                            b = tmp & 0xff;
                        } else if (id == 3) {
                            r = 0xff ^ ((tmp >> 16) & 0xff);
                            g = 0xff ^ ((tmp >> 8) & 0xff);
                            b = 0xff ^ (tmp & 0xff);
                        } else if (id == 4) {

                            r = (tmp >> 16) & 0xff;
                            g = (tmp >> 8) & 0xff;
                            b = tmp & 0xff;
                            var v = Math.min(Math.floor(.35 + 13 * (r + g + b) / 60), 255);
                            r = v;
                            g = v;
                            b = v;
                        } else if (id == 5) {
                            r = (tmp >> 16) & 0xff;
                            g = (tmp >> 8) & 0xff;
                            b = tmp & 0xff;
                            if ((r += 32) < 0) r = 0;
                            if ((g += 32) < 0) g = 0;
                            if ((b += 32) < 0) b = 0;
                        } else if (id == 6) {
                            r = (tmp >> 16) & 0xff;
                            g = (tmp >> 8) & 0xff;
                            b = tmp & 0xff;
                            if ((r -= 32) < 0) r = 0;
                            if ((g -= 32) < 0) g = 0;
                            if ((b -= 32) < 0) b = 0;
                        } else if (id == 7) {
                            r = (tmp >> 16) & 0xff;
                            g = (tmp >> 8) & 0xff;
                            b = tmp & 0xff;
                            r = Math.floor(r / 255 * r1);
                            g = Math.floor(g / 255 * r2);
                            b = Math.floor(b / 255 * r3);
                        }

                        img.data[pos + 0] = r;
                        img.data[pos + 1] = g;
                        img.data[pos + 2] = b;
                        img.data[pos + 3] = 0xff;
                        pos += 4;
                    }
                }

                if (pos >= 0x4B000) {
                    ctx.putImageData(img, 0, 0);
                    pos = 0;
                    var canvas = document.getElementById("canvas");
                    //  $.post("http://192.168.1.199/HaomaTesting/WebCam/UploadImage.aspx", { image: canvas.toDataURL("image/png") });

                }
            },

            onCapture: function () {
                webcam.save();
                jQuery("#flash").css("display", "block");
                jQuery("#flash").fadeOut(100, function () {
                    jQuery("#flash").css("opacity", 1);
                });
            },

            debug: function (type, string) {

                jQuery("#status").html(type + ": " + string);

            },

            onLoad: function () {

                var cams = webcam.getCameraList();
                for (var i in cams) {
                    jQuery("#cams").append("<li>" + cams[i] + "</li>");

                }
            }

        }

);

        function getPageSize() {

            var xScroll, yScroll;

            if (window.innerHeight && window.scrollMaxY) {
                xScroll = window.innerWidth + window.scrollMaxX;
                yScroll = window.innerHeight + window.scrollMaxY;
            } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
                xScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
            } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
            }

            var windowWidth, windowHeight;

            if (self.innerHeight) { // all except Explorer
                if (document.documentElement.clientWidth) {
                    windowWidth = document.documentElement.clientWidth;
                } else {
                    windowWidth = self.innerWidth;
                }
                windowHeight = self.innerHeight;
            } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }

            // for small pages with total height less then height of the viewport
            if (yScroll < windowHeight) {
                pageHeight = windowHeight;
            } else {
                pageHeight = yScroll;
            }

            // for small pages with total width less then width of the viewport
            if (xScroll < windowWidth) {
                pageWidth = xScroll;
            } else {
                pageWidth = windowWidth;
            }
            return [pageWidth, pageHeight];
        }

        window.addEventListener("load", function () {

            jQuery("body").append("<div id="\"flash\""></div>");

            var canvas = document.getElementById("canvas");

            if (canvas.getContext) {
                ctx = document.getElementById("canvas").getContext("2d");
                ctx.clearRect(0, 0, 320, 240);

                var img = new Image();

                img.src = "/static/logo.gif";

                img.onload = function () {
                    ctx.drawImage(img, 129, 89);
                }
                image = ctx.getImageData(0, 0, 320, 240);


            }

            var pageSize = getPageSize();

            jQuery("#flash").css({ height: pageSize[1] + "px" });

        }, false);

        window.addEventListener("resize", function () {

            var pageSize = getPageSize();

            jQuery("#flash").css({ height: pageSize[1] + "px" });

        }, false);


        function UploadPic() {
            debugger;
            // generate the image data
            var canvas = document.getElementById("canvas");
            var dataURL = canvas.toDataURL("image/png");

            // Sending the image data to Server
            $.ajax({
                type: 'POST',
                url: "baseimg.aspx",
                data: { imgBase64: dataURL },
                success: function () {
                    alert("Done, Picture Uploaded.");
                    image.url = image1;
                    window.opener.location.reload(true); // reloading Parent page

                    window.close();
                    window.opener.setVal(1);

                    return false;
                }
            });
        }

        $(function () {
            $(document).keyup(function (e) {
                var key = (e.keyCode ? e.keyCode : e.charCode);
                switch (key) {
                    case 117:
                        navigateUrl($('a[id$=lnk1]'));
                        break;
                    case 118:
                        navigateUrl($('a[id$=lnk2]'));
                        break;
                    case 119:
                        navigateUrl($('a[id$=lnk3]'));
                        break;
                    default:
                        ;
                }
            });
            function navigateUrl(jObj) {
                window.location.href = $(jObj).attr("href");
            }
        });
        function Submit_onclick() {
     
            window.location = "http://localhost:8096/Employee.aspx";


        }

    </script>

ASP.NET
<div style="removed:absolute; removed 51px; removed 996px;">
        <asp:HyperLink ID="lnk1" runat="server" 
            NavigateUrl="http://localhost:49643/guardiyan/Employee.aspx" 
            ForeColor="White">Employee
        <br />
        <asp:HyperLink ID="lnk2" runat="server" 
            NavigateUrl="http://localhost:49643/guardiyan/Client%20info.aspx" 
            ForeColor="White">clientinfo
          <br />
        <asp:HyperLink ID="lnk3" runat="server" 
            NavigateUrl="http://localhost:49966/guardiyan/attendance.aspx" 
            ForeColor="White">attendance
      
 </div>
    <asp:Image ID="Image1" runat="server"  
        style="position:absolute; top: 477px; left: 175px; height: 153px; width: 167px;"/>

</body>
</html>

C#
base image .cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.IO;
using System.Drawing;
using System.Data.SqlClient;

public partial class WebCam_baseimg : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        //called page form json for creating imgBase64 in image

        StreamReader reader = new StreamReader(Request.InputStream); 
        String Data = Server.UrlDecode(reader.ReadToEnd());
        reader.Close();

        DateTime nm = DateTime.Now;
        string date = nm.ToString("yyyymmddMMss");
        //used date for creating Unique image name

        Session["capturedImageURL"] = Server.MapPath("~/Userimages/") + date + ".jpeg";  

        Session["Imagename"] = date + ".jpeg";
    
        // We can use name of image where ever we required that why we are storing in Session
       
        drawimg(Data.Replace("imgBase64=data:image/png;base64,", String.Empty), Session["capturedImageURL"].ToString());
        // it is method 
        // passing base64 string and string filename to Draw Image.


        insertImagePath(Session["Imagename"].ToString(), "~/Userimages/" + Session["Imagename"].ToString());
        // it is method 
        //inserting image in to database 

        

    }

    public void drawimg(string base64, string filename)  // Drawing image from Base64 string.
    {
        using (FileStream fs = new FileStream(filename, FileMode.OpenOrCreate, FileAccess.Write))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                byte[] data = Convert.FromBase64String(base64);
                bw.Write(data);
                bw.Close();
            }
        }
    }

    public void insertImagePath(string imagename, string imagepath) // use for imserting image when it is created.
    {

        
      //  SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Mycon"].ToString());

        //SqlCommand cmd = new SqlCommand("Usp_InsertImageDT", con);
        //cmd.CommandType = CommandType.StoredProcedure;
        //cmd.Parameters.AddWithValue("@UserImagename", imagename);
        //cmd.Parameters.AddWithValue("@UserImagePath", imagepath);
        //cmd.Parameters.AddWithValue("@UserID", 1);
        //cmd.Parameters.AddWithValue("@QueryID", 1);
        //con.Open();
        //cmd.ExecuteNonQuery();
        //con.Close(); 
    }

}
Posted
Updated 7-Dec-14 0:42am
v3
Comments
Kornfeld Eliyahu Peter 7-Dec-14 5:49am    
Please clean and format your code - use 'Improve question'...
Try to post only the relevant code - you can not expect from anyone to debug all your code for you...

Posting all the codes here would not help us to help you.

As you are referring one article in some different website, then I suggest you to go to that site and add one comment. The author of that article would be best person to help you in this regard.

Happy coding. :)
 
Share this answer
 
Don't have you left any code to post ???

this is not the way somebody going to help, or trying to help..
just simple, Debug the code and find the Exact error and Google it, try to find it yourself.
if not finding anything suitable then post here with the Error message with corresponding Code.
try to describe the problem as much as possibly clear.so anybody can help to resolve your problem.

[/\]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900