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

1 <video id="video" autoplay width="300" height="400"></video>
2 <canvas id="canvas" width="300" height="400"></canvas>
3 <button type="button" id="takePhotos">拍照</button>
4 <button type="button" id="stopTakePhotos">停止</button>
 1 $(function() {
 2     var pageSelf = $('.page');
 3     var mediaStreamTrack = null;
 4     init()
 5     // 调用摄像头
 6     function init() {
 7         try{
 8             navigator.getUserMedia = navigator.getUserMedia ||
 9                 navigator.webkitGetUserMedia ||
10                 navigator.mozGetUserMedia ||
11                 navigator.mediaDevices.getUserMedia;
12         }catch(e) {
13             
14         }
15         if (navigator.getUserMedia) {
16             navigator.getUserMedia({
17                 audio: true,
18                 video: {
19                     width: 300,
20                     height: 400
21                 }
22             }, function(stream) {
23                 console.log(stream)
24                 mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
25                 console.log(mediaStreamTrack)
26                 var video = document.getElementById("video");
27                 if ('srcObject' in video) {
28                     console.log('支持srcObject')
29                     video.srcObject = stream;
30                 } else {
31                     console.log('支持src')
32                     video.src = (window.URL || window.webkitURL).createObjectURL(stream);
33                 }
34                 video.play();
35             }, function(err) {
36                 // 调取摄像头失败
37                 console.log("The following error occurred: ");
38             });
39         } else {
40             console.log("getUserMedia not supported");
41             
42             // 调取摄像头失败
43         }
44     }
45     
46     pageSelf.on('click', '#takePhotos', function() {
47         takePhotos()
48     })
49     
50     pageSelf.on('click', '#stopTakePhotos', function() {
51         mediaStreamTrack && mediaStreamTrack.stop();
52     })
53     
54     // 拍照
55     function takePhotos() {
56         var video = document.getElementById("video"),
57             canvas = document.getElementById("canvas"),
58             context = canvas.getContext("2d"),
59             vHeight = video.offsetHeight,
60             vWidth = video.offsetWidth;
61         canvas.width = vWidth; // 改变画布的宽高
62         canvas.height = vHeight;
63         context.drawImage(video, 0, 0, vWidth, vHeight);
64         // 获取图片src  base64格式
65         photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
66     }
67     
68 })
View Code  js

运行后，没毛病。

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

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

1 <div id="camera" class="borderstyle"></div>
2 <canvas id="canvas" class="borderstyle" width="320px" height="240px"></canvas>
3 <div id="showImg"></div>
4 <ul id="cams"></ul>
5 <button class="play">拍照</button>
ie-html
 1 // 该控件默认只支持320*240尺寸。
 2 // 如果需要修改，可以参考  https://blog.csdn.net/qq_34310906/article/details/105573012
 3 // 打开demo时，如果不能播放，请用http:// 方式打开，而不是file:///C:/  方式
 4 $(function() {
 5     var w = 320,
 6         h = 240;
 7     var pos = 0,
 8         ctx = null,
 9         saveCB;
10     var canvas = document.getElementById("canvas")
11     if (canvas.toDataURL) {
12         ctx = canvas.getContext("2d");
13         var image = ctx.getImageData(0, 0, w, h);
14         // console.log(image)
15         // let data = image.data
16         saveCB = function(data) {
17             var col = data.split(";");
18             var img = image;
19             // console.log(4123456)
20             for (var i = 0; i < 320; i++) {
21                 var tmp = parseInt(col[i]);
22                 img.data[pos + 0] = (tmp >> 16) & 0xff;
23                 img.data[pos + 1] = (tmp >> 8) & 0xff;
24                 img.data[pos + 2] = tmp & 0xff;
25                 img.data[pos + 3] = 0xff;
26                 pos += 4;
27             }
28             if (pos >= 4 * 320 * 240) {
29                 ctx.putImageData(img, 0, 0);
30                 var Imagedata = canvas.toDataURL().substring(22); //上传给后台的图片数据
31                 pos = 0;
32                 console.log(Imagedata)
33             }
34         };
35     } else {
36         // 低版本的ie不支持canvas.toDataURL，需要把数据传给后台转换
37         var image = [];
38         saveCB = function(data) {
39             image.push(data);
40             pos += 4 * 320;
41             if (pos >= 4 * 320 * 240) {
42                 $.post(URL, {
43                     briStr: image.join(';')
44                 }, function(data) {
45                     //在页面显示base64图片处理
46                     pos = 0;
47                     image = [];
48                 });
49             }
50         };
51     }
52     $("#camera").webcam({
53         width: w,
54         height: h,
55         mode: "callback",
56         swffile: "./swf/jscam.swf",
57         // swffile: "./swf/jscam_canvas_only.swf",
58         onSave: saveCB,
59         onCapture: function() { //捕获图像
60             webcam.save();
61         },
62         debug: function(type, string) { //控制台信息
63             console.log(type + ": " + string);
64         },
65         onLoad: function() { //flash 加载完毕执行
66             var cams = webcam.getCameraList();
67             for (var i in cams) {
68                 jQuery("#cams").append("<li>" + cams[i] + "</li>");
69             }
70         }
71     });
72 
73     $(".play").click(function() {
74         webcam.capture();
75     });
76 
77 });
ie-js