h5移动端实时获取摄像头拍照-可以通过上传图片进行人脸识别

IOS系统要11以上，且必须是https

<template>
    <div>
        <video id="video" autoplay style="width: 480px;height: 320px;background: #ddd;"></video>
    <!--拍照按钮-->
        <div>
            <button id="capture" @click="drawImage">拍照</button>
            <button @click="playVideo">播放</button>
        </div>
        <!--描绘video截图-->
        <canvas id="canvas" width="480" height="320"></canvas>
    </div>
</template>
<script>
export default {
    data() {
        return {
            video: null,
            canvas: null,
            context: null
        };
    },
    mounted() {
        this.moveToCameraAVG();
        this.init();
    },
    methods: {
         moveToCameraAVG() {
            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;
                    // 一些浏览器根本没实现它 - 那么就返回一个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);
                    });
                };
            };
        },
        init() {
            navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((stream) => {
                console.log('成功了');
                var video = document.querySelector('video');
                // 旧的浏览器可能没有srcObject
                if ('srcObject' in video) {
                    video.srcObject = stream;
                } else {
                    // 防止在新的浏览器里使用它，应为它已经不再支持了
                    video.src = window.URL.createObjectURL(stream);
                };
                video.onloadedmetadata = function(e) {
                    video.play();
                };
            }).catch((err) => {
                console.log('失败了');
                console.log(err.name + ': ' + err.message);
            });
        },
        drawImage() {
            this.context.drawImage(this.video, 0, 0, 480, 320);
            var a = document.createElement('a');
            a.href = this.canvas.toDataURL('image/png'); // 将画布内的信息导出为png图片数据
            a.download = '截图'; // 设定下载名称
            a.click();
            this.context.clearRect(0, 0, 480, 320);
        }
    }
}
</script>