又是好一阵忙碌，终于迎来短暂的闲暇，忙里偷闲写了这篇文章。
最近项目中使用到了摄像头扫码、拍照，因为是web项目，不能直接使用java调用摄像头，更不能写个插件让客户去安装，唯一的方法只能使用js去调用摄像头，由此记录下自己的实现。
开始准备使用网上现成的js插件（webcam.js），但是项目中同时接入了高拍仪，高拍仪实际也是摄像头，当摄像头存在2个或以上时，调用就会不正常，不调用应该调用的摄像头。查询了插件的相关文档，没有在插件中找到指定摄像头的api，遂自己DIY了一个插件(webvideo.js)。水平有限、如发现问题请留言。下面是相关API和压缩后的js代码，完整代码可以在这里下载。
WebVideo.open(obj)
打开摄像头，obj为js对象，不传使用默认值，如下：
{
width: 600,//窗口宽度
height: 450,//窗口高度
scale: 1,//照片比例，默认与视频大小相同
imgType: “png”,//照片格式，默认为png
deviceLabel: “HIK”,//摄像头品牌，默认为海康
isScan: true,//扫码或拍照，默认为扫码
dom: null,//摄像头窗口父元素,默认为body
videoBox:{}//摄像头相关，自定义可传入video(视频),closeBtn(关闭按钮),clickBtn(拍照按钮),startBtn(录像开始按钮),stopBtn(录像结束按钮)，根据需要选择传入。
}
默认效果如下：
WebVideo.getPic()
立即获取一张base64的照片。
WebVideo.takePic(callback)
点击拍照按钮拍照，callback参数为base64图片。
WebVideo.downloadPic(base64, imgName)
下载图片，可与WebVideo.getPic()或WebVideo.takePic(callback)联合使用。
WebVideo.scanQRCode(callback,timer)
扫描二维码，callback参数为base64图片，timer为扫码间隔(毫秒)，扫码成功后callback中return true结束扫码。
WebVideo.recordVideo(callback)
录制视频,callback参数为blob格式数据，默认为单按钮操作，点击一次为开始录像，再次点击为录像结束。
WebVideo.downloadVideo(blob, fileName)
下载视频，可与WebVideo.recordVideo()联合使用。
WebVideo.blobTofile(blob, fileName)
blob转file。
WebVideo.getStream()
获取视频流。
WebVideo.close()
手动关闭窗口。
WebVideo.closeListner(callback)
窗口关闭监听，callback无参数。
(function(g){var b={width:600,height:450,scale:1,imgType:"png",deviceLabel:"HIK",isScan:!0,dom:null,videoBox:{}},k={open:function(c){b.dom=document.body;c?(Object.assign(b,c),c.videoBox||m()):m();var a={audio:!1,video:{deviceId:void 0,width:b.width*2,height:b.height*2}};navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices?navigator.mediaDevices.enumerateDevices().then(function(d){var e;d.forEach(function(f){"videoinput"==f.kind&&-1!=f.label.indexOf(b.deviceLabel)&&(e=f.deviceId,console.log("\u8c03\u7528\u6444\u50cf\u5934id\uff1a"+
f.deviceId));console.log(f.kind+","+f.label+","+f.deviceId)});a.video.deviceId=e;n(a)}).catch(function(d){console.log(d.name+": "+d.message)}):n(a)},getPic:function(){var c=document.createElement("canvas");c.width=b.videoBox.video.videoWidth*b.scale;c.height=b.videoBox.video.videoHeight*b.scale;c.getContext("2d").drawImage(b.videoBox.video,0,0,c.width,c.height);return c.toDataURL("image/"+b.imgType)},takePic:function(c){b.videoBox.clickBtn.addEventListener("click",function(){c(k.getPic())},!1)},downloadPic:function(c,
a){var d=document.createElement("a");d.href=c;d.download=a?a+"."+b.imgType:(new Date).getTime()+"."+b.imgType;b.dom.appendChild(d);d.click();d.remove()},scanQRCode:function(c,a){p(c,a)},recordVideo:function(c){var a,d=!1;if(b.videoBox.startBtn&&b.videoBox.stopBtn)b.videoBox.startBtn.addEventListener("click",function(){d||(a=q(c),d=!0);a.start();h("\u5f55\u5236\u5f00\u59cb")},!1),b.videoBox.stopBtn.addEventListener("click",function(){a.stop();h("\u5f55\u5236\u7ed3\u675f")},!1);else{var e=!0;b.videoBox.clickBtn.addEventListener("click",
function(){e?(d||(a=q(c),d=!0),a.start(),e=!1,h("\u5f55\u5236\u5f00\u59cb")):(a.stop(),e=!0,h("\u5f55\u5236\u7ed3\u675f"))},!1)}},getStream:function(){return b.stream},downloadVideo:function(c,a){var d=document.createElement("a");d.href=g.URL.createObjectURL(c);d.download=a?a+".mp4":(new Date).getTime()+".mp4";b.dom.appendChild(d);d.click();g.URL.revokeObjectURL(d.href);d.remove()},blobTofile:function(c,a){return new File([c],a?a+".mp4":(new Date).getTime()+".mp4")},close:function(){b.videoBox.closeBtn.click()},
closeListner:function(c){b.videoBox.closeBtn.addEventListener("click",function(){c&&c()},!1)}},p=function(c,a){setTimeout(function(){var d=k.getPic();c(d)||p(c,a)},a)},q=function(c){var a=new MediaRecorder(b.stream,{audioBitsPerSecond:128E3,videoBitsPerSecond:25E5,mimeType:"video/webm"});a.ondataavailable=function(d){console.log("# ondataavailable, size = "+parseInt(d.data.size/1024)+"KB");var e=[];e.push(d.data);c&&c(new Blob(e,{mineType:"video/mp4"}))};return a},n=function(c){void 0===navigator.mediaDevices&&
(navigator.mediaDevices={});void 0===navigator.mediaDevices.getUserMedia&&(navigator.mediaDevices.getUserMedia=function(a){var d=navigator.webkitGetUserMedia||navigator.mozGetUserMedia;return d?new Promise(function(e,f){d.call(navigator,a,e,f)}):Promise.reject(Error("getUserMedia is not implemented in this browser"))});navigator.mediaDevices.getUserMedia(c).then(function(a){b.stream=a;"srcObject"in b.videoBox.video?(b.videoBox.video.srcObject=a,l(function(){a.getTracks()[0].stop()})):(b.videoBox.video.src=
g.URL.createObjectURL(a),l(function(){g.URL.revokeObjectURL(b.videoBox.video.src);a.stop()}));b.videoBox.video.onloadedmetadata=function(){b.videoBox.video.play()}}).catch(function(a){h("\u8fde\u63a5\u8bbe\u5907\u5931\u8d25");l();console.log(a.name+": "+a.message)})},m=function(){if(0===Object.keys(b.videoBox).length){var c=document.createElement("div");c.style.cssText="position: absolute;width: "+(b.width-32)+"px;height: "+(b.height-56)+"px;top: 50%;left: 50%;margin-top: "+-b.height/2+"px;margin-left: "+
-b.width/2+"px;box-sizing: content-box;border:16px solid #5bc0de;border-top: 40px solid #5bc0de;z-index: 999;font-size: 20px;border-radius: 15px;";var a=document.createElement("a");a.text="\u5173\u95ed";a.style.cssText="position: absolute;top: -35px;right: 0;color: #fff;cursor: pointer;";var d=document.createElement("video");d.style.cssText="width: "+(b.width-32)+"px;height: "+(b.height-56)+"px;background-color: #999; object-fit: fill;";c.appendChild(a);c.appendChild(d);b.dom.appendChild(c);b.videoBox.div=
c;b.videoBox.closeBtn=a;b.videoBox.video=d;b.isScan||(a=document.createElement("img"),a.style.cssText="position: absolute;width:100px;height:100px;bottom: 30px;left:"+(b.width/2-50)+"px;",a.src="data:image/png;base64,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",
c.appendChild(a),b.videoBox.clickBtn=a)}},h=function(c){var a=document.createElement("span");a.style.cssText="position: absolute;top:"+(b.height/2-25)+"px;left:"+(b.width/2-70)+"px;background-color: rgba(91, 192, 222, 0.5);color:#fff;width:140px;height:50px;line-height:50px;text-align:center;border-radius:5px;";a.innerText=c;b.videoBox.div.appendChild(a);setTimeout(function(){a.remove()},2E3)},l=function(c){b.videoBox.closeBtn.addEventListener("click",function(){b.videoBox.div.remove();b={width:600,
height:450,scale:1,imgType:"png",deviceLabel:"HIK",isScan:!0,dom:g.document.body,videoBox:{}};c&&c()},!1)};g.WebVideo=k})(window);
