<template>
<div class="face">
<div class="face-meiti">
<view style="font-size: 40rpx;font-weight: 600;text-align: center;" @click="test.init">
开始检测
</view>
<div class="tip">{{tip}}</div>
<video ref="video" id="video" objectFit="cover" class="video" :controls="false"
:show-center-play-btn="false" :autoplay="true" :loop="true"></video>
<canvas ref="canvas" :style="canvasStyle" canvas-id="myCanvas" id="myCanvas" class="myCanvas"></canvas>
<view
style="display: flex;justify-content: space-between;align-items: center;position: fixed;bottom: 0;left: 0;right:0;">
<template v-if="src && src.length > 0">
<template v-for="(item, index) in src">
<image style="width: 100%;" :key="index" :src="item.src" mode="widthFix"></image>
</template>
</template>
</view>
</div>
</div>
</template>
<script lang="renderjs" module="test">
import '@/static/tracking/tracking-min.js';
import '@/static/tracking/data/face-min.js';
export default {
data() {
return {
tip: '请正对摄像头',
mediaStreamTrack: null,
video: null, // 播放器实例
trackerTask: null, //tracking实例
uploadLock: true, // 上传锁
faceflag: false, //是否进行拍照
src: [],
canvasStyle: {}
}
},
mounted() {
this.init()
},
methods: {
init(options) {
const _this = this;
// 下面一行代码在浏览器运行是6,在app上运行是0。我需要取到document.querySelector('.video').children[0].children[0]这个dom
console.log("document.querySelector('.video')", document.querySelector('.video').children[0].children.length);
if (document.querySelector('.video') && document.querySelector('.video').children[0] !== null && document
.querySelector('.video').children[0].children[0] !== null && document.querySelector('.myCanvas') &&
document.querySelector('.myCanvas').children[0] !== null) {
this.video = this.mediaStreamTrack = document.querySelector('.video').children[0].children[0];
// this.video = this.mediaStreamTrack = this.$refs.video;
this.getUserMedia = navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.mediaDevices.getUserMedia({
'video': true
}, function(stream) {
_this.video.srcObject = stream
}, function(err) {
_this.tip = '摄像头调用失败'
})
_this.initTracker(options)
}
},
initTracker(options) {
const _this = this;
// 固定写法
let tracker = new window.tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
//摄像头初始化
this.trackerTask = window.tracking.track(this.video, tracker, {
camera: true
});
tracker.on('track', function(event) {
if (event.data.length == 0) {
if (!_this.faceflag) {
_this.tip = '未检测到人脸'
}
} else if (event.data.length > 0) {
_this.tip = '识别成功,正在拍照,请勿乱动~';
// const ctx = uni.createCanvasContext('myCanvas');
let canvas = document.querySelector('.myCanvas').children[0];
const context = canvas.getContext('2d', {
willReadFrequently: true
});
event.data.forEach(function(rect) {
if (!_this.faceflag) {
_this.faceflag = true;
// context.drawImage(_this.video, 0, 0, options.width, options.height);
context.drawImage(_this.video, 0, 0, '390', '390');
const base64Img = canvas.toDataURL('image/jpeg');
if (_this.src.length < 3) {
_this.src.push({
src: base64Img
})
setTimeout(function() {
_this.faceflag = false
}, 500)
} else {
uni.showToast({
title: '检测认证已完成'
})
}
}
});
}
})
}
}
}
</script>
<script>
export default {
data() {
return {
tip: '请正对摄像头',
mediaStreamTrack: null,
video: null, // 播放器实例
trackerTask: null, //tracking实例
uploadLock: true, // 上传锁
faceflag: false, //是否进行拍照
src: [],
canvasStyle: {}
}
},
mounted() {
const _this = this;
uni.getSystemInfo({
success(res) {
_this.canvasStyle = {
width: res.windowWidth + 'px',
height: res.windowWidth + 'px',
}
}
})
},
}
</script>
<style lang="scss">
.face {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 60rpx 0;
box-sizing: border-box;
.face-meiti {
position: relative;
.tip {
text-align: center;
font-size: 24rpx;
padding-bottom: 30rpx;
}
video {
display: block;
width: 360rpx;
height: 360rpx;
-webkit-border-radius: 180rpx;
-moz-border-radius: 180rpx;
border-radius: 180rpx;
object-fit: cover;
border: 2rpx solid #000;
box-sizing: border-box;
margin: 0 auto;
}
canvas {
position: fixed;
top: 0;
left: 100vw;
}
}
img {
width: 100%;
height: auto;
}
}
</style>
- 发布:2023-11-27 16:31
- 更新:2023-11-27 16:36
- 阅读:115
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 22H2
HBuilderX类型: 正式
HBuilderX版本号: 3.98
手机系统: Android
手机系统版本号: Android 11
手机厂商: vivo
手机机型: IQOO NEO 855竞速版
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
直接在app端运行就可以
直接在app端运行就可以
预期结果:
能够在app端获取到document.querySelector('.video').children[0].children[0]
能够在app端获取到document.querySelector('.video').children[0].children[0]
实际结果:
document.querySelector('.video').children[0].children[0]
为undefined,也就是说document.querySelector('.video').children[0].children
是个空数组
document.querySelector('.video').children[0].children[0]
为undefined,也就是说document.querySelector('.video').children[0].children
是个空数组
bug描述:
在renderjs中获取app端的video的document.querySelector('.video').children[0].children[0]
获取不到,在pc端运行可以获取到
1 个回复
l***@yuntengsj.cn (作者)
在浏览器中运行时,
document.querySelector('.video').children[0].children[0]
可以正确获取到想要的DOM,document.querySelector('.video').children[0].children.length
是6,app端document.querySelector('.video').children[0].children.length
是0