jquery.webcam.js实现调用摄像头拍照兼容各个浏览器

时间：2021-08-03 13:31:46

jquery.webcam.js实现调用摄像头拍照兼容各个浏览器

1.demo 可直接复制使用，需要在环境里运行。
2.所需 js 文件和 swf 控件可在官方博客下载，地址http://www.xarg.org/project/jquery-webcam-plugin/
3.感谢你的阅读
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-webcam-js</title>
<link href="cs.css" rel="stylesheet" type="text/css">
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.webcam.min.js"></script>
</head>
<body>
<button class="play">拍照</button>
<div id="status">倒计时</div>
<div id="webcam"></div>         
</body>
<script>
var w = 320, h = 240; //摄像头配置,创建canvas
var pos = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement("canvas");
 $("body").append(canvas);
 canvas.setAttribute('width', w);
 canvas.setAttribute('height', h);
 ctx = canvas.getContext("2d");
 image = ctx.getImageData(0, 0, w, h);

 $("#webcam").webcam({
 width: w,
 height: h,
 mode: "callback", //stream,save，回调模式,流模式和保存模式
 swffile: "jscam_canvas_only.swf",
 onTick: function(remain) { 
if (0 == remain) {
 $("#status").text("拍照成功!");
 } else {
 $("#status").text("倒计时"+remain + "秒钟...");
 }
 },
 onSave: function(data){ //保存图像
var col = data.split(";");
var img = image;
for(var i = 0; i < w; i++) {
var tmp = parseInt(col[i]);
 img.data[pos + 0] = (tmp >> 16) & 0xff;
 img.data[pos + 1] = (tmp >> 8) & 0xff;
 img.data[pos + 2] = tmp & 0xff;
 img.data[pos + 3] = 0xff;
 pos+= 4;
 }
if (pos >= 4 * w * h) {
 ctx.putImageData(img,0,0); //转换图像数据，渲染canvas
 pos = 0;
 Imagedata=canvas.toDataURL().substring(22); //上传给后台的图片数据
 }
 },
 onCapture: function () { //捕获图像
 webcam.save(); 
 },
 debug: function (type, string) { //控制台信息
 console.log(type + ": " + string);
 },
 onLoad: function() { //flash 加载完毕执行
 console.log('加载完毕！')
var cams = webcam.getCameraList();
for(var i in cams) {
 $("body").append("<p>" + cams[i] + "</p>");
 }
 }
 }); 

 $(".play").click(function(){
 webcam.capture(5); //拍照，参数5是倒计时
 });

</script>
</html>
标签：

相关文章