JS调用本地摄像头拍照（兼容各大浏览器及IE8+）

最新推荐文章于 2024-07-27 22:26:20 发布

Wonder233

最新推荐文章于 2024-07-27 22:26:20 发布

阅读量3.2w

点赞数 2

分类专栏： JavaScript 文章标签： flash 视频 ie 8

本文链接：https://blog.csdn.net/Wonder233/article/details/79003412

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

最近做的项目遇到了个难题，使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE。
原因：IE8及以下不支持HTML5标签：video和canvas；IE11及以下所有版本，包括Edge都不支持getUserMedia()。
所以，这几天在网上各种搜，发现想要兼容IE浏览器就只能使用Flash。

解决方案

方案一

flash+as3.0+swfobject实现摄像头拍照
方案分析：
1、使用 adobe flash + actionscript 制作swf文件；
2、采用swfobject.js插件实现页面调用swf文件。
有一篇博客写得特别好：flash+as3.0+swfobject实现摄像头拍照

这样可以自定义swf文件，但是代价好高啊，还要去学actionscript并且要装adobe flash CS6，花的时间太多了。

所以我想到既然有封装的swfobject插件可以更方便的插入flash，那是不是有兼容性好的封装好的控件可以直接调用摄像头。这个搜索过程真的是艰辛无比啊！终于让我找到了jQuery摄像头插件“jquery-webcam-plugin”。

方案二

jquery-webcam-plugin+canvas+后台处理
方案分析：

使用 jquery-webcam-plugin 显示本地摄像头。
点击拍照按钮后，
（a）针对 IE9 及以上：通过flash调用摄像头后，将图像直接输出到canvas画布中，再通过canvas中的方法 toDataURL()方法，生成图像的base64编码传到后台。
（b）针对 IE8 及以下：因为 IE8 无法用canvas.toDataURL() ，因此拍照后无法直接将图片进行显示。这时通过flash调用摄像头，将得到的像素点阵传到后台，让后台处理，生成图像的 base64 编码，再在前端进行显示。

/* CSS */
.borderstyle {
    border: 1px solid #b6b6b6;
    width: 320px;
    height: 240px;
}
#camera {
    float: left;
    margin:10px;
}
#canvas {
    width: 320px;
    height: 240px;
    margin:10px;
}

/* camera.js代码 */
$(function () {
    var w = 320, h = 240;
    var pos = 0,
        ctx = null,
        saveCB;

    var canvas = document.getElementById("canvas")
    if (canvas.toDataURL) {
        ctx = canvas.getContext("2d");
        var image = ctx.getImageData(0, 0, w, h);

        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);
                var Imagedata = canvas.toDataURL().substring(22);  //上传给后台的图片数据

                pos = 0;
            }
        };
    } else {
        var image = [];
        saveCB = function (data) {
            image.push(data);
            pos += 4 * 320;
            if (pos >= 4 * 320 * 240) {
                $.post(URL, {briStr: image.join(';')}, function (data) {
                    console.log(data);
                    //在页面显示base64图片处理
                    pos = 0;
                    image = [];
                });
            }
        };
    }

    $("#camera").webcam({
        width: w,
        height: h,
        mode: "callback", 
        swffile: "plugins/jQuery-webcam-master/jscam.swf",
        onSave: saveCB,
        onCapture: function () {               //捕获图像
            webcam.save();
        },
        debug: function (type, string) {       //控制台信息
            //console.log(type + ": " + string);
        },
        onLoad: function () {                   //flash 加载完毕执行
            //console.log('加载完毕！')
        }
    });

    $(".play").click(function () {
        webcam.capture();
    });

});

base64图片在页面上显示参考：base64图片在各种浏览器的兼容性处理

<!-- index.html -->
<body>
<div>
    <div id="camera" class="borderstyle"></div>
    <canvas id="canvas" class="borderstyle" width="320px" height="240px"></canvas>
    <div id="showImg"></div>
    <button class="play">拍照</button>
</div>
<script src="camera.js"></script>
</body>

Wonder233

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
15
评论
JS调用本地摄像头拍照（兼容各大浏览器及IE8+）

最近做的项目遇到了个难题，使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE。原因：IE8及以下不支持HTML5标签：video和canvas；IE11及以下所有版本，包括Edge都不支持getUserMedia()。所以，这几天在网上各种搜，发现想要兼容IE浏览器就只能使用Flash。解决方案方案一flash+as3.0+swf
复制链接

扫一扫

专栏目录