VUE用瀏覽器調用USB攝像頭

公司需求:

　　在線上瀏覽器調用攝像頭拍照上傳

　 本人實現調用攝像頭拍照以下代碼 經測試 (Google Chrome 88.0.4324.182) 版本可用 各位可以試一試其他瀏覽器

　　參考代碼 https://www.jb51.net/article/193305.htm

以下代碼直接用就可以

<template>    <p >        <video  :width="videoWidth" :height="videoHeight" autoplay></video>        <canvas style="display:none;"  :width="videoWidth" :height="videoHeight"></canvas>        <p v-if="imgSrc" >            <img :src="imgSrc" alt="" >        </p>        <p>            <button @click="getCompetence()">打開攝像頭</button>            <button @click="stopNavigator()">關閉攝像頭</button>            <button @click="setImage()">拍照</button>        </p>    </p></template><script>    export default {        data() {            return {                videoWidth: 540,                videoHeight: 410,                imgSrc: '',                thisCancas: null,                thisContext: null,                thisVideo: null,                validTip: '驗證中'            }        },        computed: {},        methods: {            /*             *@author wf_Huang             *@Time 2019/6/5 0005 17:35             *@function  調用權限             *****************************************/            getCompetence() {                var _this = this                this.thisCancas = document.getElementById('canvasCamera')                this.thisContext = this.thisCancas.getContext('2d')                this.thisVideo = document.getElementById('videoCamera')                // 舊版本瀏覽器可能根本不支持mediaDevices,我們首先設置一個空對象                if (navigator.mediaDevices === undefined) {                    navigator.mediaDevices = {}                }                // 一些瀏覽器實現了部分mediaDevices,我們不能只分配一個對象                // 使用getUserMedia,因為它會覆蓋現有的屬性。                // 這里,如果缺少getUserMedia屬性,就添加它。                if (navigator.mediaDevices.getUserMedia === undefined) {                    navigator.mediaDevices.getUserMedia = function (constraints) {                        // 首先獲取現存的getUserMedia(如果存在)                        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia                        // 有些瀏覽器不支持,會返回錯誤信息                        // 保持接口一致                        if (!getUserMedia) {                            return Promise.reject(new Error('getUserMedia is not implemented in this browser'))                        }                        // 否則,使用Promise將調用包裝到舊的navigator.getUserMedia                        return new Promise(function (resolve, reject) {                            getUserMedia.call(navigator, constraints, resolve, reject)                        })                    }                }                var constraints = {                    audio: false,                    video: {width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)'}                }                navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {                    // 舊的瀏覽器可能沒有srcObject                    if ('srcObject' in _this.thisVideo) {                        _this.thisVideo.srcObject = stream                    } else {                        // 避免在新的瀏覽器中使用它,因為它正在被棄用。                        _this.thisVideo.src = window.URL.createObjectURL(stream)                    }                    _this.thisVideo.onloadedmetadata = function () {                        _this.thisVideo.play()                    }                }).catch(err => {                    console.log(err)                })            },            /*             *@author wf_Huang             *@Time 2019/6/5 0005 17:32             *@function  繪制圖片             *****************************************/            setImage() {                var _this = this                // 點擊,canvas畫圖                _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)                // 獲取圖片base64鏈接                var image = this.thisCancas.toDataURL('image/png')                _this.imgSrc = image                this.$emit('refreshDataList', this.imgSrc)            },            /*             *@author wf_Huang             *@Time 2019/6/5 0005 17:44             *@function  base64轉文件             *****************************************/            dataURLtoFile(dataurl, filename) {                var arr = dataurl.split(',')                var mime = arr[0].match(/:(.*?);/)[1]                var bstr = atob(arr[1])                var n = bstr.length                var u8arr = new Uint8Array(n)                while (n--) {                    u8arr[n] = bstr.charCodeAt(n)                }                return new File([u8arr], filename, {type: mime})            },            /*             *@author wf_Huang             *@Time 2019/6/10 0010 3:41             *@function  關閉攝像頭             *****************************************/            stopNavigator() {                this.thisVideo.srcObject.getTracks()[0].stop()            }        },        mounted() {            this.getCompetence()        },        beforeDestroy() {            this.stopNavigator()        }    }</script><style lang="scss" scoped>    .camera_outer {        position: relative;        overflow: hidden;        background-size: 100%;        video, canvas, .tx_img {            -moz-transform: scaleX(-1);            -webkit-transform: scaleX(-1);            -o-transform: scaleX(-1);            transform: scaleX(-1);        }        .btn_camera {            position: absolute;            bottom: 4px;            left: 0;            right: 0;            height: 50px;            background-color: rgba(0, 0, 0, 0.3);            line-height: 50px;            text-align: center;            color: #ffffff;        }        .bg_r_img {            position: absolute;            bottom: 0;            left: 0;            right: 0;            top: 0;        }        .img_bg_camera {            position: absolute;            bottom: 0;            left: 0;            right: 0;            top: 0;            img {                width: 100%;                height: 100%;            }            .img_btn_camera {                position: absolute;                bottom: 0;                left: 0;                right: 0;                height: 50px;                line-height: 50px;                text-align: center;                background-color: rgba(0, 0, 0, 0.3);                color: #ffffff;                .loding_img {                    width: 50px;                    height: 50px;                }            }        }    }</style>