jQuery Webcam 调用摄像头拍照插件

Question

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

插件介绍

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

使用方法

简单调用

$("#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/jsmail?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/jsmail?page=avatar", {type: "data", image: image.join('|')},  function(){
                location.reload();
            });
            pos = 0;
        }
    };
}

以上是官方的例子，创建一个 Canvas 来保存图片，然后上传到服务端。

如何获取

官方网站 | 在线示例 | 下载地址