vue的环境,可直接拷取代码使用。
场景:简单的人脸识别需求
<template>
<div>
<el-button size="mini" type="primary" @click="callCamera">打开摄像头</el-button>
<el-button size="mini" type="primary" @click="photograph">拍照</el-button>
<el-button size="mini" type="primary" @click="downPhoto">下载</el-button>
<el-button size="mini" type="primary" @click="closeCamera">关闭</el-button>
<br>
<br>
<!--摄像头实时视频-->
<video ref="video" width="640" height="480" autoplay></video>
<!--canvas截取流-->
<canvas ref="canvas" width="640" height="480"></canvas>
<!--操作-->
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
imgBase64: '',
}
},
methods: {
// 参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
// 调用摄像头
callCamera () {
// H5调用电脑摄像头API,成功则返回视频流
navigator.mediaDevices.getUserMedia({
video: true
}).then(success => {
// 摄像头开启成功
this.$refs['video'].srcObject = success
// 播放摄像头画面
this.$refs['video'].play()
}).catch(error => {
console.error('摄像头开启失败,请检查摄像头是否可用!')
})
},
// 拍照
photograph () {
let ctx = this.$refs['canvas'].getContext('2d')
// 把当前视频帧内容渲染到canvas上
ctx.drawImage(this.$refs['video'], 0, 0, 640, 480)
// 转base64格式、图片格式转换、图片质量压缩
let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)
this.imgBase64 = imgBase64;
// todo,校验大小时需要,单位kb
// 由字节转换为KB 判断大小
let str = imgBase64.replace('data:image/jpeg;base64,', '')
let strLength = str.length
let fileLength = parseInt(strLength - (strLength / 8) * 2)
// 图片尺寸 用于判断
let size = (fileLength / 1024).toFixed(2)
console.log(size);
},
downPhoto() {
// 保存到本地
let aDom = document.createElement('a')
aDom.href = this.imgBase64;
aDom.download = new Date().getTime() + '.jpeg'
aDom.click()
},
// 关闭摄像头
closeCamera () {
if (!this.$refs['video'].srcObject) {
return false;
}
let stream = this.$refs['video'].srcObject
let tracks = stream.getTracks()
tracks.forEach(track => {
track.stop()
})
this.$refs['video'].srcObject = null
},
},
};
</script>