jQuery Webcam 调用摄像头拍照插件 - 文章教程

jQuery Webcam 调用摄像头拍照插件

发布于 2018-07-27 字数 3227 浏览 3259 评论 0

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

jQuery 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 来保存图片,然后上传到服务端。

如何获取

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论