VueJs调用本地摄像头拍照,保存视频
使用H5原生接口获取视频流,短暂延迟后拍照
在VueJs框架下,利用H5原生接口navigator.mediaDevices.getUserMedia调起摄像头,保存视频和图片
<template>
<div><button @click="getSnap"></div>
</template>
<script>
export default{
name: 'Snap',
data() {
width: 640,
height: 480,
},
methods: {
getSnap() {
let video = document.createElement('video');
video.width = this.width;
video.height = this.height;
let canvas= document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
let context = canvas.getContext('2d');
let constains = {
video: true
}
navigator.mediaDevices.getUserMedia(constains )
.then(async (stream) => {
video.srcObject = stream;
video.play();
// 这里拍照的时候需要延时,等待视频加载播放,否则拿到空base64数据
setTimeout(() => {
context.drawImage(video, 0, 0, this.width, this.height);
let image = canvas.toDataURL('image/jpeg');
image = image.split(image.indexOf(',')+1);
await FileUtils.saveImg('D:/snap.jpeg', image);
// 停止视频流,释放摄像头
stream.stop();
video = null;
canvas = null;
context = null;
image = null;
}, 3000);
}).catch((error) => {
console.log(error.code, error.message, error);
});
}
},
}
</script>