67 lines
1.6 KiB
HTML
67 lines
1.6 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>WebcamJS Constraints Test Page</title>
|
|
<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; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="results">Your captured image will appear here...</div>
|
|
|
|
<h1>WebcamJS Constraints Test Page</h1>
|
|
<h3>Demonstrates using the HTML5 user media constraints object</h3>
|
|
|
|
<div id="my_camera"></div>
|
|
|
|
<!-- 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: 320,
|
|
height: 240,
|
|
image_format: 'jpeg',
|
|
jpeg_quality: 90,
|
|
constraints: {
|
|
mandatory: {
|
|
minWidth: 320,
|
|
minHeight: 240
|
|
// minFrameRate: 30
|
|
},
|
|
optional: [
|
|
{ minFrameRate: 60 }
|
|
]
|
|
}
|
|
});
|
|
Webcam.attach( '#my_camera' );
|
|
</script>
|
|
|
|
<!-- A button for taking snaps -->
|
|
<form>
|
|
<input type=button value="Take Snapshot" onClick="take_snapshot()">
|
|
</form>
|
|
|
|
<!-- Code to handle taking the snapshot and displaying it locally -->
|
|
<script language="JavaScript">
|
|
function take_snapshot() {
|
|
// take snapshot and get image data
|
|
Webcam.snap( function(data_uri) {
|
|
// display results in page
|
|
document.getElementById('results').innerHTML =
|
|
'<h2>Here is your image:</h2>' +
|
|
'<img src="'+data_uri+'"/>';
|
|
} );
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|