Question

如何使用jquery webcam 调用

Answer 1

　jQueryWebcam这个插件为直接在JavaScript中与摄像头通信提供了一个透明的访问层。它通一个SW文件与摄像头交互，可以显示Webcam输出和捕捉图象。如果有多个摄像头，它可以显示可用的摄像头列表，然后供用户选择其中任意一个。

　　一、jQuery Webcam介绍

　　jQuery的摄像头插件是一个透明层，用相机直接在JavaScript中的沟通。

　　这个插件提供了三种不同的模式，通过一个小的接入网络摄像头应用程序接口直接与JavaScript
　　-或者更准确地说是jQuery。因此，它是可能带来的图像在画布上（回调模式），存储图像在服务器（保存模式）和流的Flash元素的实况图像画布上（流模式）。

　　二、jQuery Webcam使用方法

　　简单调用
　　$("#camera").webcam({
　　width: 320,
　　height: 240,
　　mode: "callback",
　　swffile: "/download/jscam_canvas_only.swf",
　　onTick: function() {},
　　onSave: function() {},
　　onCapture: function() {},
　　debug: function() {},
　　onLoad: function() {}
　　});

　　参数说明

　　windth：flash文件的宽度

　　height：flash文件的高度

　　mode：储存模式：callback, save, stream

　　swffile：flash文件的地址

　　拍照

　　调用webcam.capture();方法实现拍照。

　　保存照片

　　webcam.save();方法实现保存照片，简单调用里面的onSave参数是保存照片的方法，接收一个函数为照片
　　var canvas = document.createElement("canvas");
　　canvas.setAttribute('width', 320);
　　canvas.setAttribute('height', 240);
　　if (canvas.toDataURL) {
　　ctx = canvas.getContext("2d");
　　image = ctx.getImageData(0, 0, 320, 240);
　　saveCB = function(data) {
　　var col = data.split(";");
　　var img = image;
　　for(var i = 0; i < 320; 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 * 320 * 240) {
　　ctx.putImageData(img, 0, 0);
　　$.post("/author/uedsc?page=avatar", {type: "data", image: canvas.toDataURL("image/jpeg")}, function(){
　　location.reload();
　　});
　　pos = 0;
　　}
　　};
　　} else {
　　saveCB = function(data) {
　　image.push(data);
　　pos+= 4 * 320;
　　
　　if (pos >= 4 * 320 * 240) {
　　$.post("/author/uedsc?page=avatar", {type: "data", image: image.join('|')}, function(){
　　location.reload();
　　});
　　pos = 0;
　　}
　　};
　　}