<video v-show="isVideo" id="video" autoplay playsinline webkit-playsinline="true"
style="transform: rotate(-90deg);width:266px;height:199px;position: absolute;top:0;right:-33px;z-index: 10;"></video>
<canvas style="display: none;position: absolute;top:0;right:-33px;;z-index: 12;transform: rotate(-90deg);"
width="300" height="300" id="canvasCamera"></canvas>
使用的是常见的video+canvas方法。创建dom元素,绑定ID,
js部分就是获取设备的摄像头并和dom部分的元素绑定,
//打开摄像头
const startCamera = () => {
try {
navigator.mediaDevices.getUserMedia({ video: { width: 266, height: 199 } })
.then((stream) => {
video = document.querySelector('video')
canvas = document.querySelector('canvas')
var _context2d = canvas.getContext("2d");
MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
video.srcObject = stream;
video.onloadedmetadata = function (e) {
video.play();
};
//延时截取画面
setTimeout(() => {
btnTakePhotoClicked(_context2d, canvas, video)
}, 1000)
})
.catch(function (err) {
console.log("Error accessing camera: " + err);
});
} catch (error) {
console.log(error);
}
}
上面这一步就是点击打开按钮,就有画面了,切记若是开发环境调试,需要将开发的IP地址添加到浏览器的可信任网址当中。不然无法打开设备的摄像头。还有就是video元素不能使用v-if控制显示隐藏,会导致不知名错误。
//打开摄像头 截取画面
const btnTakePhotoClicked = (_context2d, canvas, video) => {
_context2d.drawImage(video, 0, 0, 300, 300)
var img = document.createElement("img"); // 创建img元素
img.src = canvas.toDataURL("image/png"); // 截取视频第一帧
base64ToFile(img.src, 'image')
}
这部分是对开启的摄像进行截图获取照片 里面的base64ToFile 是将base64 转化为file 文件传参给后端 在这里找到的方法。Uncaught DONException: Failed to execute ‘atob‘ on “window ‘: The string to be decoded is not carrec..._hello芳芳的博客-CSDN博客
之后就是将处理好的图片 传给后端进行人脸识别,后端使用的是阿里的API。