关于uni-app:踩坑日记uniapp相机抽帧相机被多次初始化问题

120次阅读

共计 2237 个字符,预计需要花费 6 分钟才能阅读完成。

缘起:最近频繁接到应用咱们 AI 运行辨认插件 用户的反馈,局部机型在 uni 中抽几帧后,就不再帧的了。开始认为又是小程序的 API 兼容的问题(确有机型呈现过抽帧兼容性问题),前面越来越多的反馈在原生下无问题,只有采纳 uni-app 计划的有问题 …

一、先看抽帧简略代码

上面是小程序做 AI 静止辨认的第一步,摄像头帧数据采集的精简代码版段,大抵流程是:在摄像头初始化实现后,初始化一个 CameraFrameListener、进行抽帧,并依据抽取的帧图像大小,调整Camera 组件大小与帧图大小同比缩放(宽全为全屏、高自适应)。

为什么要同比缩放的起因,请见咱们的系列分享:【一步步开发 AI 静止小程序】四、小程序如何抽帧

<template>
    <view class="container">
        <camera id="preview" class="preview" :style="videoStyles" flash="off" :device-position="deviceKey"
            resolution="high" frame-size="low" @initdone="onCameraReady">
        </camera>
    </view>
</template>

<script>

    export default {data() {
            return {
                deviceKey: "back",
                previewWidth: 480,
                previewHeight: 640,
                previewRate: 1,

                frameWidth: 480,
                frameHeight: 640
            };
        },
        computed: {videoStyles() {const style = `width:${this.previewWidth}px;height:${this.previewHeight}px;`;

                return style;
            }
        },
        methods: {autoFitPreview(width, height) {const sifno = uni.getSystemInfoSync();
                let rate = sifno.windowWidth / width;

                this.previewWidth = width * rate;
                this.previewHeight = height * rate;
                this.previewRate = rate;
                this.frameWidth = width;
                this.frameHeight = height;
            },
            initCamera(){
                // 避免重初始化
                if(this.listener)
                    return;
                    
                const that = this;
                const context = wx.createCameraContext();
                const listener = context.onCameraFrame((frame) => {
                    // 当帧图像大小发生变化时,从新调整摄像头代码
                    if(that.frameWidth != frame.width)
                        that.autoFitPreview(frame.width, frame.height);
                      console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
                });
                listener.start();},
            onCameraReady(e) {this.autoFitPreview(480, 640);
                this.initCamera();},
            onStart(){this.listener.start();
            },
            onStop(){this.listener.stop();
            }
        }
    }
</script>

二、BUG 复现

在确认原生小程序抽帧无问题后,咱们偿试了问题复现,通过屡次测试,发现在 uni 下,Camera组件会屡次触发 initdone 事件,进一步测试后发现,只有动静扭转 camera 的 style 高、宽,便会触发从新初始化。

initCamera(){
    // 这里的防初始化,便是引发抽帧断流的起因,因为相机从新初始化了,所以 listener 理论曾经无奈再监听帧流了,必须从新创立
    if(this.listener)
        return;
        
    const that = this;
    const context = wx.createCameraContext();
    const listener = context.onCameraFrame((frame) => {
        // 当帧图像大小发生变化时,从新调整摄像头代码
        // 此处的从新适应,便导致了相机的重初始化
        if(that.frameWidth != frame.width)
        that.autoFitPreview(frame.width, frame.height);
          console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
    });
    listener.start();}

三、问题修复

找出问题起因,修复便很简略了,去除相应的防 CameraFrameListener 从新始化锁,只有触发 initdone 便从新初始化,并同步初始化其它逻辑。同时也要留神尽量将 camera 大小一次绑定到位,缩小动静绑定的次数。

四、问题总结

尽管 uni-app 大部分场景都与原生无异,然而受限于 vue 的值绑定和节点渲染机制,在理论应用中还是有轻微的差异的,特地是原生组件。

另外,针对此问题,咱们曾经更新了咱们的 AI 静止辨认小程序插件uni版本 Demo,请各用户分割咱们索取。

正文完
 0