<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"),//调用canvas接口
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {//错误处理
console.log("Video capture error: ", error.code);
};
if(navigator.getUserMedia) {//调用html5拍摄接口
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;//摄像机属于视频流,所以当然要输出到html5的video标签中了
video.play();//开始播放
}, errBack);
} else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);//同上
video.play();//同上
}, errBack);
}
else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);//同上
video.play();//同上
}, errBack);
}
}, false);
document.getElementById('btn_submit_fx').addEventListener("click",function(){//获取拍照按钮绑定事件
var canvans = document.getElementById("canvas");//调用canvas接口
context = canvas.getContext("2d");
context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片,其实就是截图
var imgData = canvans.toDataURL();//获取图片的base64格式的数据
$.post("../yzf/form_action.jsp",
{ "img": base64Data }, function (data, status) {
if (status == "success") {
if (data == "OK") {
alert("二维 已经解析");
} else {
// alert(data);
}
}else {
alert("数据上 失败");
}
}, "text");
});
</script>
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"),//调用canvas接口
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {//错误处理
console.log("Video capture error: ", error.code);
};
if(navigator.getUserMedia) {//调用html5拍摄接口
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;//摄像机属于视频流,所以当然要输出到html5的video标签中了
video.play();//开始播放
}, errBack);
} else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);//同上
video.play();//同上
}, errBack);
}
else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);//同上
video.play();//同上
}, errBack);
}
}, false);
document.getElementById('btn_submit_fx').addEventListener("click",function(){//获取拍照按钮绑定事件
var canvans = document.getElementById("canvas");//调用canvas接口
context = canvas.getContext("2d");
context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片,其实就是截图
var imgData = canvans.toDataURL();//获取图片的base64格式的数据
$.post("../yzf/form_action.jsp",
{ "img": base64Data }, function (data, status) {
if (status == "success") {
if (data == "OK") {
alert("二维 已经解析");
} else {
// alert(data);
}
}else {
alert("数据上 失败");
}
}, "text");
});
</script>