其实是一个图片上传功能,但是呢需求不是让做成传统的图片上传。
步骤:
- 开启摄像()
- 拍照
<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的环境使用