移动端开启摄像头拍照截取图片功能实现

其实是一个图片上传功能，但是呢需求不是让做成传统的图片上传。

步骤：

• 开启摄像（）
• 拍照

<video id="video" width="400" height="400" poster="../img/video_fill_light.png"></video>
<canvas id="canvas" width="300px" height="300px"></canvas>
<button type="button" @click="getMedia()" v-if="flag">点击获取摄像头权限</button>
<button type="button" @click="takePhoto()" v-else>点击认证</button>

getMedia() {
                let constraints = {
                    video: {
                        width: 500,
                        height: 500,
                        facingMode:'user'
                    },
                    audio: false
                };
                //获得video摄像头区域
                let video = document.getElementById("video");
                //video设置
                /*
                 * 处理iPhone的Safari浏览器打开相机只有一帧图像问题
                 * 在调用 getUserMedia 之前设置（iOS11、12均生效，iOS13可以不再设置）
                 */
                video.setAttribute('autoplay', '');
                video.setAttribute('muted', '');
                video.setAttribute('playsinline', '');
                // 参考网站：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
                if (navigator.mediaDevices === undefined) {

                    navigator.mediaDevices = {};
                }
                if (navigator.mediaDevices.getUserMedia === undefined) {
                    navigator.mediaDevices.getUserMedia = function (constraint) {

                        // 首先，如果有getUserMedia的话，就获得它
                        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

                        // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                        if (!getUserMedia) {
                            // 如果未启用https，那么微信，苹果都会进入这里，表现为没有实现。
                            var isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
                            if (isiOS) {
                                return Promise.reject(new Error('请升级系统到 iOS 14.3 及以上版本或换用安卓手机'));
                            } else {
                                return Promise.reject(new Error('设备调用异常，请联系管理员'));
                            }
                        }

                        // 否则，为老的navigator.getUserMedia方法包裹一个Promise（这里就兼容了旧版的使用方法）
                        return new Promise(function (resolve, reject) {
                            getUserMedia.call(navigator, constraint, resolve, reject);
                        });
                    }
                }

                let promise = navigator.mediaDevices.getUserMedia(constraints);
                promise.then((stream) => {
                    if ("srcObject" in video) {
                        video.srcObject = stream;
                    } else {
                        // 防止在新的浏览器里使用它，应为它已经不再支持了
                        video.src = window.URL.createObjectURL(stream);
                    }
                    video.onloadedmetadata = function (e) {
                        video.play();
                    };
                   
                }).catch((err) => {
                    var errStr = err.toString();
                    if (errStr.indexOf('NotAllowedError') != -1) {
                        vant.Toast('请允许摄像头权限');
                    } else if (errStr.indexOf('Error') == 0) {
                        // 去掉前面的“Error:”字符串
                        vant.Toast(errStr.slice(6));
                    } else {
                        vant.Toast('设备调用异常，请联系管理员');
                    }
                })
            },
takePhoto() {
				let canvas1=document.getElementById("canvas");
                let ctx = canvas1.getContext('2d');
                ctx.drawImage(video, 0, 0, 300, 300);
                //将canvas对象转换为base64位编码传到后台
                this.convertCanvasToImage(canvas1.toDataURL())
            }

遇到了很多兼容性问题：
1、iPhone的Safari浏览器打开相机有点问题
2、iPhone将h5嵌到app里面必须让用户手动获取摄像头权限
…当时还有些兼容性问题的…忘记了
注意点：
1、 iOS 14.3 及以下版本不支持MediaDevices.getUserMedia()
2、要在https的环境使用