2022-08-08 10:55:27 +08:00
|
|
|
|
<!doctype html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title>jQuery-webcam-master</title>
|
2022-08-17 17:21:01 +08:00
|
|
|
|
<!-- <link href="cs.css" rel="stylesheet" type="text/css"> -->
|
2022-08-08 10:55:27 +08:00
|
|
|
|
<script src="jquery.js"></script>
|
|
|
|
|
|
<script src="jquery.webcam.min.js"></script>
|
2022-08-11 17:29:34 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2022-08-16 16:03:30 +08:00
|
|
|
|
<div id="webcam" style="float: left; clear: both;"></div>
|
2022-08-17 17:21:01 +08:00
|
|
|
|
<!-- <input id="snapBtn" type="button" value="人脸识别" style="float: left; clear: both;"/>
|
|
|
|
|
|
<img id="base64image" src='' width="450" height="320" style="float: left; clear: both;"/> -->
|
2022-08-08 10:55:27 +08:00
|
|
|
|
<script type="text/javascript">
|
2022-08-11 17:29:34 +08:00
|
|
|
|
var image = new Array();
|
|
|
|
|
|
var pos = 0;
|
2022-08-17 17:21:01 +08:00
|
|
|
|
var w = 382;//图片的宽高，无论图片的尺寸是否大于画布的尺寸都能自适应
|
|
|
|
|
|
var h = 200;
|
2022-08-11 17:29:34 +08:00
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
$("#webcam").webcam({
|
|
|
|
|
|
width: w,
|
|
|
|
|
|
height: h,
|
|
|
|
|
|
mode: "callback",
|
|
|
|
|
|
swffile: "jscam_canvas_only.swf", // 这里引入swf文件，注意路径
|
|
|
|
|
|
onTick: function(remain) {},
|
|
|
|
|
|
onSave: function(data) {
|
|
|
|
|
|
image.push(data);
|
|
|
|
|
|
pos += 4 * 320;
|
|
|
|
|
|
//post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
|
|
|
|
|
|
if (pos >= 4 * 320 * 240) {
|
2022-08-12 10:24:41 +08:00
|
|
|
|
window.parent.postMessage({"image":image.join('|')}, '*');
|
2022-08-11 17:29:34 +08:00
|
|
|
|
image = new Array();
|
|
|
|
|
|
pos = 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onCapture: function() {
|
|
|
|
|
|
webcam.save();
|
|
|
|
|
|
// Show a flash for example
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
debug: function(type, string) {
|
|
|
|
|
|
console.log('type:' + type + ',string:' + string);
|
|
|
|
|
|
// Write debug information to console.log() or a div
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onLoad: function() {
|
|
|
|
|
|
// Page load
|
2022-08-08 10:55:27 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2022-08-11 17:29:34 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
2022-08-17 17:21:01 +08:00
|
|
|
|
// $('#snapBtn').on('click', function() {
|
|
|
|
|
|
// webcam.capture();
|
|
|
|
|
|
// });
|
2022-08-12 10:24:41 +08:00
|
|
|
|
|
|
|
|
|
|
function receiveMessageFromParent ( event ) {
|
2022-09-07 16:20:59 +08:00
|
|
|
|
if(event.data == 'releaseCamera'){
|
|
|
|
|
|
location.reload();
|
|
|
|
|
|
}else if(event.data = 'capture'){
|
|
|
|
|
|
webcam.capture();
|
|
|
|
|
|
}
|
2022-08-17 17:21:01 +08:00
|
|
|
|
//$('#base64image').attr('src', 'data:image/jpg;base64,' + event.data.data);
|
2022-08-12 10:24:41 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener('message', receiveMessageFromParent, false);
|
2022-08-11 17:29:34 +08:00
|
|
|
|
});
|
2022-08-08 10:55:27 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
