網頁調用攝像頭拍照

頁面內容

<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.bind(this));
        },

        //關閉攝像頭
        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