l***@yuntengsj.cn
l***@yuntengsj.cn
  • 发布:2023-11-27 16:31
  • 更新:2023-11-27 16:36
  • 阅读:115

【报Bug】render获取video DOM异常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22H2

HBuilderX类型: 正式

HBuilderX版本号: 3.98

手机系统: Android

手机系统版本号: Android 11

手机厂商: vivo

手机机型: IQOO NEO 855竞速版

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<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>

操作步骤:

直接在app端运行就可以

预期结果:

能够在app端获取到document.querySelector('.video').children[0].children[0]

实际结果:

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端运行可以获取到

2023-11-27 16:31 负责人:无 分享
已邀请:
l***@yuntengsj.cn

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

要回复问题请先登录注册