html pc调用摄像头进行拍照

前段时间，同事要我帮忙弄个浏览器调用摄像头拍照的demo给客户，一想，这个简单，直接上代码：

<video id="video" autoplay width="300" height="400"></video>
<canvas id="canvas" width="300" height="400"></canvas>
<button type="button" id="takePhotos">拍照</button>
<button type="button" id="stopTakePhotos">停止</button>

$(function() {
    var pageSelf = $('.page');
    var mediaStreamTrack = null;
    init()
    // 调用摄像头
    function init() {
        try{
            navigator.getUserMedia = navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.mediaDevices.getUserMedia;
        }catch(e) {
            
        }
        if (navigator.getUserMedia) {
            navigator.getUserMedia({
                audio: true,
                video: {
                     300,
                    height: 400
                }
            }, function(stream) {
                console.log(stream)
                mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
                console.log(mediaStreamTrack)
                var video = document.getElementById("video");
                if ('srcObject' in video) {
                    console.log('支持srcObject')
                    video.srcObject = stream;
                } else {
                    console.log('支持src')
                    video.src = (window.URL || window.webkitURL).createObjectURL(stream);
                }
                video.play();
            }, function(err) {
                // 调取摄像头失败
                console.log("The following error occurred: ");
            });
        } else {
            console.log("getUserMedia not supported");
            
            // 调取摄像头失败
        }
    }
    
    pageSelf.on('click', '#takePhotos', function() {
        takePhotos()
    })
    
    pageSelf.on('click', '#stopTakePhotos', function() {
        mediaStreamTrack && mediaStreamTrack.stop();
    })
    
    // 拍照
    function takePhotos() {
        var video = document.getElementById("video"),
            canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            vHeight = video.offsetHeight,
            vWidth = video.offsetWidth;
        canvas.width = vWidth; // 改变画布的宽高
        canvas.height = vHeight;
        context.drawImage(video, 0, 0, vWidth, vHeight);
        // 获取图片src  base64格式
        photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
    }
    
})

运行后，没毛病。

然而，客户说需要用在IE上，8-11。what？万恶的IE。。。

找了好久，没办法 用了  jquery.webcam.js 勉强解决了。

<div id="camera" class="borderstyle"></div>
<canvas id="canvas" class="borderstyle" width="320px" height="240px"></canvas>
<div id="showImg"></div>
<ul id="cams"></ul>
<button class="play">拍照</button>

// 该控件默认只支持320*240尺寸。
// 如果需要修改，可以参考  https://blog.csdn.net/qq_34310906/article/details/105573012
// 打开demo时，如果不能播放，请用http:// 方式打开，而不是file:///C:/  方式
$(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);
        // console.log(image)
        // let data = image.data
        saveCB = function(data) {
            var col = data.split(";");
            var img = image;
            // console.log(4123456)
            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;
                console.log(Imagedata)
            }
        };
    } else {
        // 低版本的ie不支持canvas.toDataURL，需要把数据传给后台转换
        var image = [];
        saveCB = function(data) {
            image.push(data);
            pos += 4 * 320;
            if (pos >= 4 * 320 * 240) {
                $.post(URL, {
                    briStr: image.join(';')
                }, function(data) {
                    //在页面显示base64图片处理
                    pos = 0;
                    image = [];
                });
            }
        };
    }
    $("#camera").webcam({
         w,
        height: h,
        mode: "callback",
        swffile: "./swf/jscam.swf",
        // swffile: "./swf/jscam_canvas_only.swf",
        onSave: saveCB,
        onCapture: function() { //捕获图像
            webcam.save();
        },
        debug: function(type, string) { //控制台信息
            console.log(type + ": " + string);
        },
        onLoad: function() { //flash 加载完毕执行
            var cams = webcam.getCameraList();
            for (var i in cams) {
                jQuery("#cams").append("<li>" + cams[i] + "</li>");
            }
        }
    });

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

});