User1248040958 posted
<!--
/**
* jQuery AS3 Webcam
*
* Copyright (c) 2012, Sergey Shilko (sergey.shilko@gmail.com)
*
* @author Sergey Shilko
* @see https://github.com/sshilko/jQuery-AS3-Webcam
*
**/
-->
<html>
<head>
<title> Example of usage: jQuery AS3 Webcam </title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.webcam.as3.js"></script>
<style type="text/css">
.webcam-container {padding:0;margin:0}
.size320x240 { width:320px; height:240px;}
.webcam-container object {border:1px solid #000;}
.webcam-error {color:red;padding-top:10px;}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="webcam-container size320x240">
<div id="webcam" class="size320x4240"></div>
</td>
</tr>
<tr>
<td class="webcam-text">
<div>
<select id="popup-webcam-cams"></select>
</div>
<div>
<input
id="popup-webcam-take-photo"
type="button"
disabled="disabled"
value="Take a photo"
style="display:none" /
</div>
<p class="webcam-error"></p>
</td>
</tr>
</table>
<br/>
<div id="result"></div>
<br/>
<h4> </h2>
<script type="text/javascript">
$(document).ready(function() {
$("#webcam").webcam({
swffile: "sAS3Cam.swf?v="+Math.random(),
previewWidth: 320,
previewHeight: 240,
resolutionWidth: 320,
resolutionHeight: 240,
/**
* Determine if we need to stretch or scale the captured stream
*
* @see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#scaleMode
* @see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageScaleMode.html
*/
StageScaleMode: 'noScale', //
/**
* Aligns video output on stage
*
* @see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageAlign.html
* @see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#align
* Empty value defaults to "centered" option
*/
StageAlign: 'TL',
noCameraFound: function () {
this.debug('error', 'Web camera is not available');
},
swfApiFail: function(e) {
this.debug('error', 'Internal camera plugin error');
},
cameraDisabled: function () {
this.debug('error', 'Please allow access to your camera');
},
debug: function(type, string) {
if (type == 'error') {
$(".webcam-error").html(string);
} else {
$(".webcam-error").html('');
}
},
cameraEnabled: function () {
this.debug('notice', 'Camera enabled');
var cameraApi = this;
if (cameraApi.isCameraEnabled) {
return;
} else {
cameraApi.isCameraEnabled = true;
}
var cams = cameraApi.getCameraList();
for(var i in cams) {
$("#popup-webcam-cams").append("<option value='"+i+"'>" + cams[i] + "</option>");
}
setTimeout(function() {
$("#popup-webcam-take-photo").removeAttr('disabled');
$("#popup-webcam-take-photo").show();
cameraApi.setCamera('0');
}, 750);
$("#popup-webcam-cams").change(function() {
var success = cameraApi.setCamera($(this).val());
if (!success) {
cameraApi.debug('error', 'Unable to select camera');
} else {
cameraApi.debug('notice', 'Camera changed');
}
});
$('#popup-webcam-take-photo').click(function() {
var result = cameraApi.save();
if (result && result.length) {
var actualShotResolution = cameraApi.getResolution();
var img = new Image();
img.src = 'data:image/jpeg;base64,' + result;
$("#result").append(img);
alert('base64encoded jpeg (' + actualShotResolution[0] + 'x' + actualShotResolution[1] + '): ' + result.length + 'chars');
/* resume camera capture */
cameraApi.setCamera($("#popup-webcam-cams").val());
} else {
cameraApi.debug('error', 'Broken camera');
}
});
var reload = function() {
$('#popup-webcam-take-photo').show();
};
$('#popup-webcam-save').click(function() {
reload();
});
}
});
});
</script>
</body>
</html>
