pc前端调用摄像头(二）入门demo

<template>
    <div>
        <div class="videodome">
            <div>
                <video id="videoCamera" width="250" height="250" autoplay style="border-radius:180px;box-shadow: darkgrey 0 0  30px 5px ;"></video>
            </div>
            <canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
        </div>
        <div class="img_bg_camera">
            <p style="color: #000000;">图片显示</p>
            <img :src="imgSrc" alt="" class="tx_img" style="border-radius:360px;box-shadow: darkgrey 0 0  30px 5px ;" v-if="imgif">
        </div>
        <div class="bommen">
            <el-button type="success" @click="getCompetence()">打开摄像头</el-button>
            <el-button type="success" @click="closeCarama()">关闭摄像头</el-button>
            <el-button type="success" @click="setImage()">拍照</el-button>
            <el-button type="primary" @click="uploadImage()">提交</el-button>
        </div>
    </div>
</template>

<script>
import Util from "@/api/util.js";
export default {
    data() {
        return {
            imgif: false,
            videoWidth: 250,
            videoHeight: 250,
            imgSrc: '', //图片src
            canvasCamera: null,
            contextCamera: null,
            videoCamera: null,
        }
    },
    mounted() {
    },
    methods: {
        // 打开摄像头
        getCompetence() {
            this.canvasCamera = document.getElementById('canvasCamera')
            this.contextCamera = this.canvasCamera.getContext('2d')
            this.videoCamera = document.getElementById('videoCamera')
            var _this = this
            // 旧版本浏览器可能根本不支持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。旧的浏览器可能没有srcObject
                if ('srcObject' in _this.videoCamera) {
                    _this.videoCamera.srcObject = stream
                } else {
                    // 避免在新的浏览器中使用它，因为它正在被弃用。
                    _this.videoCamera.src = window.URL.createObjectURL(stream)
                }
                _this.videoCamera.onloadedmetadata = function (e) {
                    _this.videoCamera.play()
                }
            }).catch(err => {
                console.log(err)
                Util.showMsg('warning', '没有开启摄像头权限或浏览器版本不兼容')
            })
        },
        closeCarama() {
            this.videoCamera.srcObject.getTracks()[0].stop()
        },
        //  绘制图片（拍照功能）
        setImage() {
            this.imgif = true
            // 点击，canvas画图
            this.contextCamera.drawImage(this.videoCamera, 0, 0, 250, 250)
            // 获取图片base64链接
            var image = this.canvasCamera.toDataURL('image/png')
            this.imgSrc = image
            // console.log(this.imgSrc);
        },
        //上传数据
        uploadImage() {
            var file = this.imgSrc
            console.log(file);
            //base64数据放formData里面
            var formData = new FormData(); //*
            formData.append("multipartFile", file); //*
            formData.append("password", this.ruleForm.password); //*
            formData.append("username", this.ruleForm.name); //*
            //自己配置axios。
            this.$http.post('url接口', formData).then(res => {
                console.log(res);
            })
        },

    }
}
</script>

<style scoped lang="scss">
.face {
    width: 400px;
    height: 450px;
    position: relative;
    .face-img {
        width: 400px;
        height: 450px;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .face-content {
        width: 310px;
        height: 322px;
        position: absolute;
        top: 64px;
        left: 45px;
        #video {
            object-fit: fill;
        }
    }
}
.step {
    text-align: center;
    margin-top: 30px;
    .step-ul {
        .step-li {
            .step-title {
                font-size: 16px;
                color: #65dffe;
                padding-bottom: 10px;
                .step-titleimg {
                    height: 26px;
                    width: 26px;
                    margin-left: 20px;
                    cursor: pointer;
                }
            }
            .step-img {
                height: 150px;
                width: 150px;
                border: 3px solid #eecfa1;
                border-radius: 50%;
                img {
                    height: 100%;
                    width: auto;
                }
            }
        }
    }
}
</style>