前端調用電腦攝像頭攝像

今天完成的需求，調用電腦攝像頭，來進行拍照

首先需要有一個video的標簽，像這個樣子，id可以隨便起哈

 

 然后如果有個按鈕來開始拍攝，添加一個事件用來調用，然后在事件中這么寫，為了好復制，我就插入代碼了，不上圖片了

調用打開攝像頭

 if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先，如果有getUserMedia的話，就獲得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                // 一些瀏覽器根本沒實現它 - 那么就返回一個error到promise的reject來保持一個統一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }

                // 否則，為老的navigator.getUserMedia方法包裹一個Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        const constraints = {
            video: true,
            audio: false
        };
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(stream => {
            let v = document.getElementById('v');
            // 舊的瀏覽器可能沒有srcObject
            if ("srcObject" in v) {
                v.srcObject = stream;
            } else {
                // 防止再新的瀏覽器里使用它，應為它已經不再支持了
                v.src = window.URL.createObjectURL(stream);
            }
            v.onloadedmetadata = function (e) {
                v.play();
            };
        }).catch(err => {
            console.log("失敗");
        })

關閉攝像頭

var video = document.getElementById('v');
            if (!video.srcObject) return
            let stream = video.srcObject
            let tracks = stream.getTracks();
            tracks.forEach(track => {
                track.stop()
            })

這個方法親測可用！！！希望有點幫助