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>

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"));