<template>
<view>
<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" @click="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" :src="src"></image>
</view>
</template>
<script>
export default {
data() {
return {
src: "",
}
},
methods: {
show(ctx) {
console.log(2)
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.src = res.tempImagePath
}
});
},
takePhoto() {
const ctx = uni.createCameraContext();
const that = this;
setInterval(function() {
that.show(ctx)
}, 1000);
// const listener = ctx.onCameraFrame((frame) => {
// console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height, frame.data)
// listener.start()
// setTimeout(() => {
// listener.stop()
// }, 1000)
// },
}
}
}
</script>
<style scoped lang="css">
</style>
这里演示的是,每隔1秒截取摄像头内容,放到image标签里显示。
(后面可以改成每隔一秒上传到后端进行识别,假装实时识别)