web网页调用摄像头拍照

页面内容

<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