76 lines
2.5 KiB
HTML
76 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" xmlns:fb="http://ogp.me/ns/fb#">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<title>Camera and Video Control with HTML5 Example</title>
|
|
<meta name="description" content="Access the desktop camera and video using HTML, JavaScript, and Canvas. The camera may be controlled using HTML5 and getUserMedia." />
|
|
<!--[if IE]><script src=//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js></script><![endif]-->
|
|
|
|
<style>
|
|
video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
|
|
#canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
|
|
span.ui-slider-handle.ui-corner-all.ui-state-default { background: dodgerblue;}
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css" />
|
|
|
|
<script src="jquery-3.5.1.min.js"></script>
|
|
<script src="jquery-ui/jquery-ui.js"></script>
|
|
<script src="canvas.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
window.ORIGINAL_JSON=window.JSON;
|
|
</script>
|
|
|
|
<div class="container-fluid container-md">
|
|
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<h1 class="text-primary">Send shots to the laser!</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<video id="video" autoplay></video>
|
|
</div>
|
|
<div class="col-sm">
|
|
<button class="snap btn btn-lg btn-primary">Take a picture!</button>
|
|
<p class="lead">By allowing the use of your camera, you will be able to take snapshots, convert them to black and white images before sending them to the laser server. How cool is that?!</p>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="result">
|
|
<div class="col-sm">
|
|
<canvas id="canvas" width="640" height="480"></canvas>
|
|
</div>
|
|
<div class="col-sm">
|
|
<h3 class="snap btn btn-lg btn-primary">Not satisfied of the contrast? </h3>
|
|
<br/>
|
|
<div id="slider"></div>
|
|
<br/>
|
|
<div class="float-left">white ++</div>
|
|
<div class="float-right">++ dark</div><br>
|
|
|
|
<br/>
|
|
<h3>Satisfied? </h3>
|
|
<p class="lead">Type the text visible on your image (if any) and push Send.</p>
|
|
<div class="form-group">
|
|
<input id="text" type="text" class="form-control form-control-lg" placeholder="Type text here"/>
|
|
<button id="send" class="form-control form-control-lg btn btn-lg btn-warning btn-block">Send</button>
|
|
</div>
|
|
|
|
<div id="messages">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
</body>
|
|
</html>
|