uniapp调用摄像头然后用canvas进行截屏并上传服务器

<template>
    <div>
        <div class="viewfinder">
            <div class="wrap-box" ref="wrap">
            </div>
        </div>
    </div>
</template>
<script>
    let canvasEle = null
    let video = null
    import {
        UpImgHttp
    } from '../../utils/https.js'
    import {
        warn
    } from "vue"
    export default {
        components: {},
        data() {
            return {
                ioswx: '',
                imageFile: "",
                timerIntv: null, //只需要此参数
            }
        },
        onLoad() {},
        mounted() {
            // uniapp必须创建元素不然获取不到里面的方法
            video = document.createElement('video')
            video.setAttribute('position', 'fixed')
            video.setAttribute('height', '100%')
            video.setAttribute('autoplay', true)
            video.setAttribute('width', '100%')
            canvasEle = document.createElement('canvas')
            canvasEle.width = 450
            canvasEle.height = 450
            var wrap = this.$refs.wrap
            // wrap.appendChild(canvasEle)
            console.log(wrap);
            wrap.appendChild(video)
            this.ioswx = this.isWXandIos();
            // this.openCamera();
        },
        onShow() {
            this.openCamera();
            this.takePhoto()
        },
        methods: {
            isWXandIos() {
                const aegent = navigator.userAgent.toLowerCase();
                if (/micromessenger/.test(aegent) && /iPhone|mac|iPod|iPad/i.test(aegent)) {
                    return true;
                }
                return false;
            },
            async openCamera() {
                const constraints = {
                    audio: false,
                    video: {
                        facingMode: 'environment',
                        width: {
                            min: 1280,
                            ideal: 2040
                        },
                        height: {
                            min: 720,
                            ideal: 1080
                        },
                    },
                };
                // 兼容
                // 老的浏览器没实现mediaDevices
                if (navigator.mediaDevices === undefined) navigator.mediaDevices = {};
                if (navigator.mediaDevices.getUserMedia === undefined) {
                    navigator.mediaDevices.getUserMedia = function(constraints) {
                        const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                            navigator
                            .mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
                        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);
                        });
                    };
                }
                // 获取视频流
                const that = this;
                navigator.mediaDevices.getUserMedia(constraints)
                    .then(function(stream) {
                        const video = document.querySelector('video');
                        video.srcObject = stream;
                        video.onloadedmetadata = function() {
                            video.play();
                        };
                        // 不是微信内置浏览器
                        if (!that.ioswx) {
                            that.status = 1;
                        }
                    })
                    .catch(function(err) {
                        // 调用原始摄像头;
                        that.originCamera();
                    });
            },
            originCamera() {
                // const that = this;
                const promise = new Promise(function(resolve, reject) {
                    const file = document.getElementById('file');
                    file.click();
                    file.onchange = function(event) {
                        if (!event) {
                            reject('empty');
                        }
                        const file = event.target.files[0];
                        resolve(file);
                    };
                });
                promise.then(value => {});
            },
            takePhoto() {
                this.timerIntv = setInterval(() => {
                    // 待处理业务逻辑    
                    var aspectRatio = video.videoWidth / video.videoHeight;
                    canvasEle.getContext('2d').drawImage(video, 0, 0, canvasEle.width, canvasEle.width /
                        aspectRatio);
                    this.imageFile = this.canvasToFile(canvasEle);
                    // const p = new Promise(resolve => {
                    //     // 将截图转化为blob文件
                    //     canvasEle.toBlob(blob => {
                    //         const url = URL.createObjectURL(blob);
                    //         resolve(url);
                    //     });
                    // });
                    // const that = this;
                    // p.then(value => {
                    //     that.imageUrl = value;
                    // });
                }, 5000)
            },
            // 将截图转化为base64格式，通过','分割，将后面的base64值转化为文件格式
            canvasToFile(canvas) {
                const dataurl = canvas.toDataURL('image/png');
                var data = {
                    url: dataurl.split(',')[1]
                }
                UpImgHttp(data).then(res => {
                    alert(res.msg)
                    if (JSON.parse(res.msg).error_msg == 'SUCCESS') {
                        uni.navigateTo({
                            url: `../photograph/photograph?Stu_id=${JSON.parse(res.msg).result.user_list[0].user_id}`
                        })
                    } else {
                        uni.showToast({
                            icon: "error",
                            title: "暂无信息",
                            duration: 1000
                        })
                    }
                }).catch(res => {
                    alert(res)
                })
                // 以下是通过','分割，将后面的base64值转化为文件格式
                // let arr = dataurl.split(','),
                //     mime = arr[0].match(/:(.*?);/)[1],
                //     bstr = atob(arr[1]),
                //     n = bstr.length,
                //     u8arr = new Uint8Array(n);
                // while (n--) {
                //     u8arr[n] = bstr.charCodeAt(n);
                // }
                // const file = new File([u8arr], 'phone.png', {
                //     type: mime
                // });
                // return file;
            },
        },
        onHide() {
            clearInterval(this.timerIntv)
        },
        destroyed() {
            clearInterval(this.timerIntv)
        }
    }
</script>
<style lang="scss" scoped>
    .wrap-box {
        width: 100%;
        height: 100%;
        position: relative;
    }
</style>