JSFiddle - React, Tailwind, and code Playground

by Ayan Dey

HTML

<html>
<body>
<div id="wb_Form1" style="position:absolute;left:37px;top:25px;width:390px;height:512px;z-index:3;">
<form name="myform" method="post" action="" id="myform">

<div id="my_camera" style="width:320px; height:240px; position:absolute; left: 17px; top: 46px;"></div>
	<input name="button" type=button onClick="take_snapshot()" value="Take Snapshot">
	<input name="button" type=button onClick="snap_again()" value="Reset">

	
<input type="submit" id="submit" name="submit" value="Submit" style="position:absolute;left:250px;top:399px;width:96px;height:25px;z-index:0;">
<input type="text" id="mydata" style="position:absolute;left:76px;top:320px;width:271px;height:19px;line-height:19px;z-index:1;" name="mydata" value="">
<input type="text" id="Editbox2" style="position:absolute;left:74px;top:345px;width:271px;height:19px;line-height:19px;z-index:2;" name="Editbox1" value="">
</form>
</div>
</body>
</html>

CSS

<style type="text/css">
body
{
   margin: 0;
   padding: 0;
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
<style type="text/css">
#wb_Form1
{
   background-color: #FAFAFA;
   border: 0px #000000 solid;
}
#Button1
{
   border: 1px #A9A9A9 solid;
   background-color: #F0F0F0;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
#Editbox1
{
   border: 1px #A9A9A9 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Editbox2
{
   border: 1px #A9A9A9 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
</style>
	<style type="text/css">
		body { font-family: Helvetica, sans-serif; }
		h2, h3 { margin-top:0; }
		form { margin-top: 15px; }
		form > input { margin-right: 15px; }
		#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
		#button{
			position:absolute;
			}
	</style>

JavaScript

<!-- First, include the Webcam.js JavaScript Library -->
	<script type="text/javascript" src="webcam.js"></script>
	
	<!-- Configure a few settings and attach camera -->
	<script language="JavaScript">
		Webcam.set({
			width: 249,
			height: 244,
			image_format: 'jpeg',
			jpeg_quality: 90
		});
		Webcam.attach( '#my_camera' );
	</script>
	<script language="JavaScript">
		function take_snapshot() {
			// take snapshot and get image data
			var data_uri = Webcam.snap();
			var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');

			document.getElementById('mydata').value = raw_image_data;
			// display results in page
			document.getElementById('my_camera').innerHTML = 
				'<img src="'+data_uri+'"/>';
		}
		
		function snap_again(){
			Webcam.reset();
			Webcam.attach('#my_camera');
		}
	</script>