Click on Image to Upload Picture Html 5

Updated date Jul 31, 2020

In this commodity, you will acquire how to capture Epitome from Webcam Video using HTML5 using JavaScript and Upload to Server C#.

Today I am going to evidence yous how to capture images from the webcam using JavaScript and HTML5 and upload on the server using a simple Ajax call using C#.

For your reference I have fastened zero file of the MVC projection with this article.

Beneath are the steps to perform this requirment.

Access Webcam past taking permission from user
One time you accept the success permission from user, then capture the image on Canvass
Brand Ajax telephone call to send Canvas Image to Server with the help of Base64 data
And upload Base64 data as an epitome on the server folder

Here one question can arrise, equally to why we use C# code to upload image, and why not JavaScript. Then the answer is JavaScript does not have permission to access File System for security reasons.

So permit's get started.

HTML

<div course = "jumbotron" way= "margin-pinnacle:20px;padding:20px;" >
<p><span id="errorMsg" ></span></p>
<divclass = "row" >
<divclass = "col-lg-half-dozen" >
<h4>
Video coming from Webcam <buttongrade = "btn btn-primary" id= "btnCapture" >Capture to Sheet >></push>
</h4>
<video id="video" playsinline autoplay></video>
</div>
<divclass = "col-lg-half dozen" >
<h4>
Captured image from Webcam <input type="button" class = "btn btn-master" id= "btnSave" name= "btnSave" value= "Salve the canvas(paradigm) to server" />
</h4>
<canvas manner="border:solid 1px #ddd;background-color:white;" id= "canvas" width= "475" peak= "475" ></canvas>
</div>
</div>
</div>

Scripts

<script type= "text/javascript" >
var video = document.querySelector( "#video" );
const constraints = {
audio:false ,
video: {
width: 475, height: 475
}
};
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints)
.then(part (stream) {
video.srcObject = stream;
})
.take hold of ( function (err0r) {
console.log("Something went incorrect!" );
});
}
function stop(due east) {
var stream = video.srcObject;
var tracks = stream.getTracks();
for ( var i = 0; i < tracks.length; i++) {
var rail = tracks[i];
track.terminate();
}
video.srcObject =zippo ;
}
</script>
<script type="text/javascript" >
$("#btnCapture" ).click( function () {
var canvas = certificate.getElementById( 'canvas' );
var context = canvas.getContext( '2d' );
context.drawImage(video, 0, 0);
});
$("#btnSave" ).click( part () {
var destinationCanvas = document.createElement( "canvas" );
var destCtx = destinationCanvas.getContext( '2d' );
destinationCanvas.height = 500;
destinationCanvas.width = 500;
destCtx.interpret(video.videoWidth, 0);
destCtx.scale(-1, ane);
destCtx.drawImage(document.getElementById("canvas" ), 0, 0);
var imagebase64data = destinationCanvas.toDataURL( "image/png" );
imagebase64data = imagebase64data.supervene upon('data:image/png;base64,' , '' );
$.ajax({
blazon:'Mail' ,
url:'/Home/UploadWebCamImage' ,
data:'{ "imageData" : "' + imagebase64data + '" }' ,
contentType:'application/json; charset=utf-8' ,
dataType:'text' ,
success:function (out) {
alert('Image uploaded successfully..' );
}
});
});
</script>

Below is the condition which really asks the user for the Webcam permission.

if (navigator.mediaDevices.getUserMedia)

CSS

Note

Nosotros need to add below CSS to flip the video and canvas every bit webcam is not showing mirror video.

<fashion type= "text/css" >
video {
-webkit-transform: scaleX(-i );
transform: scaleX(-1 );
margin-tiptop : 5px ;
}
#canvas {
-moz-transform: scaleX(-1 );
-o-transform: scaleX(-i );
-webkit-transform: scaleX(-1 );
transform: scaleX(-i );
filter: FlipH;
-ms-filter:"FlipH" ;
}
</style>

C# Code

public cord UploadWebCamImage( cord imageData)
{
string filename = Server.MapPath( "~/UploadWebcamImages/webcam_" ) + DateTime.Now.ToString().Supervene upon( "/" , "-" ).Supersede( " " , "_" ).Replace( ":" , "" ) + ".png" ;
using (FileStream fs = new FileStream(filename, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte [] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
return "success" ;
}

And then once all the setup is washed and we run the projection, first nosotros have to give permission southward for the Webcam on the browser on which the awarding is running as below.

Chrome