直接调用电脑摄像头拍照上传的实现

恍1

开场的废话我就不说了

1.条件
有摄像头，浏览器的安全性要设置一下，还要有设置信任你这个网站让调摄像头。因为是JS调用本地摄像头，根据现在的原则，有点不安全，所以会导致http没法调用，https能（应该是）。
但是不影响本地测试。这部分不细说，有问题可以回帖。

2.步骤
第一步：加载结束事件加上

$("#C2-0-0").html('<video id="video" autoplay="" style="width:640px;height:480px"></video>');
$("#canvas").hide();
var flage= 0;
if( flage==0 ){
flage=1;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
var video = document.querySelector('video');
navigator.getUserMedia({
video: true
},
function(stream) {
if(video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
}
video.play();
$('#inp', parent.document).parent().parent().children('div.fr-core-panel-header').children().children('div:eq(1)').click(function(){
stream.getVideoTracks()[0].stop();
//window.parent.contentPane.parameterEl.getWidgetByName('serialnumber').fireEvent("click");
})
},
function(error) {
console.log("不支持媒体流～ ", error);
});
}

复制代码

上面的代码大概意思就是给一个单元格加上一个video标签，用来调用摄像头（或者说调用了摄像头之后把摄像头放在哪里）。需要改动的地方就是第一句话的C2。你需要放在哪里

第二步：给页面摸个单元格加上

<canvas id="canvas" width="470px" height="480px" style='position:absolute;left:54px;top:48px'></canvas>

复制代码

并且用html显示。这个意思就是你拍照这一步，你拍了之后把照片放在这里。位置随意。这个照片你可以放出来，也可以隐藏，这个就是你拍出来的照片是什么样子。注意这里的left和top，这是距离上边框和左边框的距离，一般你需要来调整这个位置，以达到调整照片的位置的效果，前面的width和height就是照片的大小，可以根据需要调整。基本上做了这2步，你的页面就可以调用你的摄像头出现视频画面了。

第三步：拍照，把照片拍出来放到canvas里面，出现你的照片

$("#canvas").show();
var video = document.querySelector('video');
var context = canvas.getContext("2d");
context.drawImage(video, 0, 0);

复制代码

把这些代码放到一个按钮这个按钮就是拍照按钮，点击了之后生成照片到canvas。

第四步：将得到的照片保存到数据库
这里说下处理方法。每张图片都有一个base64码，我们得到这个码存起来就行了，区别于图片的好处各位可以百度下。（这个地方如果有大佬指教请指教，这些东西都是我自己学习，自己理解的，可能不是那么专业，但是我们的最终目的是实现对不，不要在意这些细节）