我要评论页面内容
<video id="video" class="video-bg"></video> <canvas id="qrcanvas" class="qr-canvas"></canvas> <div id="imagewarp" class="image-warp"></div> <button type="button" onclick="window.mycamera.openmedia()">开启</button> <button type="button" onclick="window.mycamera.closemedia()">关闭</button> <button type="button" onclick="window.mycamera.drawmediaandtoimg()">拍摄</button>
js内容
var camerainit=(function(window,document,undefined){
function mycamera(videodom,canvasdom) {
this.mediaopts = {
audio: false,
video: true,
video: { facingmode: "environment"} // 或者 "user"
// video: { width: 1280, height: 720 }
// video: { facingmode: { exact: "environment" } }// 或者 "user"
}
this.video=videodom;
this.canvas1=canvasdom;
this.context1 = this.canvas1.getcontext('2d');
this.mediastreamtrack = null;
this.checkenvironment();
}
mycamera.prototype = {
checkenvironment: function() {
window.url = (window.url || window.webkiturl || window.mozurl || window.msurl);
if (navigator.mediadevices === undefined) {
navigator.mediadevices = {};
}
if (navigator.mediadevices.getusermedia === undefined) {
navigator.mediadevices.getusermedia = function(constraints) {
var getusermedia = navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia;
if (!getusermedia) {
return promise.reject(new error('getusermedia is not implemented in this browser'));
}
return new promise(function(resolve, reject) {
getusermedia.call(navigator, constraints, resolve, reject);
});
}
}
},
// 回调
successfunc: function(stream) {
this.mediastreamtrack = stream;
this.video = document.queryselector('video');
if ("srcobject" in this.video) {
this.video.srcobject = stream
} else {
this.video.src = window.url && window.url.createobjecturl(stream) || stream
}
this.video.play();
},
errorfunc:function(err) {
alert(err.name);
},
// 正式启动摄像头
openmedia: function(){
navigator.mediadevices.getusermedia(this.mediaopts).then(this.successfunc.bind(this)).catch(this.errorfunc);
},
//关闭摄像头
closemedia: function(){
var that=this;
that.mediastreamtrack.getvideotracks().foreach(function (track) {
track.stop();
that.context1.clearrect(0, 0,that.context1.width, that.context1.height);//清除画布
});
},
//截取视频并转为图片
drawmediaandtoimg: function(){
this.canvas1.setattribute("width", this.video.videowidth);
this.canvas1.setattribute("height", this.video.videoheight);
this.context1.drawimage(this.video, 0, 0, this.video.videowidth, this.video.videoheight);//显示在canvas中
var image = new image();
image.src = this.canvas1.todataurl('image/png')
var imagewarp = document.getelementbyid("imagewarp");
if(imagewarp.haschildnodes()) {
document.getelementbyid("imagewarp").replacechild(image, imagewarp.firstchild);
}else{
document.getelementbyid("imagewarp").appendchild(image);
}
},
};
return mycamera;
})(window,document)
实例化
window.mycamera=new camerainit(document.getelementbyid("video"), document.getelementbyid("qrcanvas"));
参考内容：https://www.jb51.net/article/160015.htm
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论