刘翠
刘翠
  • 发布:2024-03-05 14:03
  • 更新:2024-04-29 10:45
  • 阅读:469

【报Bug】微信小程序中,使用live-pusher 自定义拍照,snapshot快门方法,不能正确触发回调

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.99

手机系统: Android

手机系统版本号: Android 14

手机厂商: 荣耀

手机机型: 荣耀v30pro

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

    <view class="live-camera" :style="{ width: '100vw', height: '100vh' }">  
        <heads title=" " titleColor="transparent" :bgColor='bgColor' :border="true" :ishead_w="3" class="title">  
        </heads>  
        <live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0"  
            :aspect="aspect" min-bitrate="1000" audio-quality="16KHz" device-position="back" :auto-focus="true"  
            :muted="true" :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange"  
            :style="{ width: '100vw', height: '100vh'}"></live-pusher>  
        <view class="mongban flex-col">  
            <text class="text1">拍摄{{imgtype==1?'舌苔':'舌底'}}照片</text>  
            <text>舌头{{imgtype==1?'向下伸长':'向上抬起'}},口张大</text>  
            <image v-if="imgtype==1" class="stzm" :src="stzm"></image>  
            <image v-else class="stbm" :src="stbm"></image>  
            <image class="discriputimg" :src="discriputimg"></image>  
            <view class="flex-bet bot-area" style="box-sizing: border-box;flex-direction: row; width: 540rpx;">  
                <image @click="flip" class="camera" :src="switchimg" hover-class="avtive">  
                </image>  
                <image @click='snapshot' class="shutterBox" hover-class="avtive" :src="cerclebut">  
                </image>  
                <image @click="uploadImage" class="camera" :src="pucture" hover-class="avtive"></image>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    let _this = {};  
    export default {  
        data() {  
            return {  
                poenCarmeInterval: null, //打开相机的轮询  
                imgtype: 1,  
                aspect: '2:3', //比例  
                windowWidth: '', //屏幕可用宽度  
                windowHeight: '', //屏幕可用高度  
                camerastate: false, //相机准备好了  
                livePusher: null, //流视频对象  
                snapshotsrc: null, //快照  
                bgColor: [{  
                        item: 'transparent'  
                    },  
                    {  
                        item: 'transparent'  
                    }  
                ],  
                stzm: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL +  
                    'images/otherItem/stzm.png', //快照  
                stbm: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL +  
                    'images/otherItem/stbm.png', //快照  
                discriputimg: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL +  
                    'images/otherItem/discriputimg.png', //快照  
                switchimg: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL +  
                    'images/otherItem/switch.png', //快照  
                pucture: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL +  
                    'images/otherItem/pucture.png', //快照  
                cerclebut: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL +  
                    'images/otherItem/cerclebut.png', //快照  
            };  
        },  
        onLoad(e) {  
            _this = this;  
            this.initCamera();  
            this.imgtype = e.type  
        },  
        onReady() {  
            this.livePusher = uni.createLivePusherContext('livePusher', this);  
            this.startPreview(); //开启预览并设置摄像头  
            this.poenCarme();  
        },  
        methods: {  

            //轮询打开  
            poenCarme() {  
                //#ifdef APP-PLUS  
                if (plus.os.name == 'Android') {  
                    this.poenCarmeInterval = setInterval(function() {  
                        if (!_this.camerastate) _this.startPreview();  
                    }, 2500);  
                }  
                //#endif  
            },  
            //初始化相机  
            initCamera() {  
                uni.getSystemInfo({  
                    success: function(res) {  
                        _this.windowWidth = res.windowWidth;  
                        _this.windowHeight = res.windowHeight;  
                        let zcs = _this.aliquot(_this.windowWidth, _this.windowHeight);  
                        _this.aspect = (_this.windowWidth / zcs) + ':' + (_this.windowHeight / zcs);  
                    }  
                });  
            },  

            //整除数计算  
            aliquot(x, y) {  
                if (x % y == 0) return y;  
                return this.aliquot(y, x % y);  
            },  

            //开始预览  
            startPreview() {  
                this.livePusher.startPreview({  
                    success: a => {  
                        console.log(a)  
                    }  
                });  
            },  

            //停止预览  
            stopPreview() {  
                this.livePusher.stopPreview({  
                    success: a => {  
                        _this.camerastate = false; //标记相机未启动  
                    }  
                });  
            },  

            //状态  
            statechange(e) {  
                //状态改变  
                console.log(e);  
                if (e.detail.code == 1007) {  
                    _this.camerastate = true;  
                } else if (e.detail.code == -1301) {  
                    _this.camerastate = false;  
                }  
            },  

            //返回  
            back() {  
                uni.navigateBack();  
            },  

            //抓拍  
            snapshot() {  
                //震动  
                uni.vibrateShort({  
                    success: function() {  
                        console.log('success震动');  
                    }  
                });  
                //拍照  
                console.log(this.livePusher.snapshot,'this.livePusher.snapshot');  
                this.livePusher.snapshot({  
                    success: (e) => {  
                        console.log(e, '文件?');  
                        _this.snapshotsrc = e.message.tempImagePath;  
                        _this.stopPreview();  
                        // _this.setImage();  
                        uni.navigateBack();  
                    },  
                    fail: e => {  
                        console.log(e, '拍照失败??');  
                    },  
                    complete: e => {  
                        console.log(e, '拍照情况??');  
                    }  
                });  
            },  

            //反转  
            flip() {  
                this.livePusher.switchCamera({  
                    success: e => {  
                        console.log(e, '翻转成功');  
                    },  
                    fail: e => {  
                        console.log(e, '翻转失败??');  
                    }  
                });  
            },  
            //选择图片  
            uploadImage() {  
                console.log('选择图片');  
                uni.chooseMedia({  
                    count: 1,  
                    sizeType: ["compressed"],  
                    mediaType: ['image'],  
                    sourceType: ['album'],  
                    success: function(res) {  
                        _this.stopPreview();  
                        console.log(res, '选择图片');  
                        _this.snapshotsrc = res.tempFiles  
                    },  
                });  
            },  
            //设置  
            setImage() {  
                let pages = getCurrentPages();  
                let prevPage = pages[pages.length - 2]; //上一个页面  

                //直接调用上一个页面的setImage()方法,把数据存到上一个页面中去  
                prevPage.$vm.setImage({  
                    path: _this.snapshotsrc  
                });  
            }  
        }  
    };  
</script>  

<style lang="scss">  
    .live-camera {  
        justify-content: center;  
        align-items: center;  
        position: relative;  
        background: rgba(000, 000, 000, 0.5);  

        .mongban {  
            position: absolute;  
            z-index: 99;  
            background: rgba(000, 000, 000, 0.5);  
            width: 100vw;  
            height: 100vh;  
            top: 0;  
            left: 0;  

            .text1 {  
                font-size: 36rpx;  
                margin-top: 25%;  
                margin-bottom: 32rpx;  
            }  

            text {  
                font-size: 40rpx;  
                color: #FFFFFF;  
            }  

            .stzm {  
                margin-top: 100rpx;  
                width: 502rpx;  
                height: 598rpx;  
                margin-bottom: 166rpx;  
            }  

            .stbm {  
                margin-top: 161rpx;  
                width: 502rpx;  
                height: 466rpx;  
                margin-bottom: 237rpx;  
            }  
        }  

        .discriputimg {  
            width: 616rpx;  
            height: 70rpx;  
        }  

        .bot-area {  
            position: fixed;  
            bottom: 100rpx;  
            width: 100%;  
        }  

        .camera {  
            width: 64rpx;  
            height: 64rpx;  

            &.avtive::after {  
                content: '';  
                display: block;  
                position: absolute;  
                top: 0;  
                left: 0;  
                bottom: 0;  
                right: 0;  
                background-color: rgba(000, 000, 000, 0.5);  
            }  
        }  

        .shutterBox {  
            width: 140rpx;  
            height: 140rpx;  

            &.avtive::after {  
                content: '';  
                display: block;  
                position: absolute;  
                top: 0;  
                left: 0;  
                bottom: 0;  
                right: 0;  
                background-color: rgba(000, 000, 000, 0.5);  
            }  
        }  

        .trachBox {  
            margin-top: 32rpx;  
            background-color: #FFFFFF;  
            width: 60rpx;  
            height: 60rpx;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            border-radius: 100rpx;  
            box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);  
            z-index: 30;  

            .trach {  
                width: 50rpx;  
            }  
        }  

    }  
</style> ```

操作步骤:

点击拍照,执行拍照方法

预期结果:

this.livePusher.snapshot正确执行反馈

实际结果:

this.livePusher.snapshot没有执行,或者回调

bug描述:

在编译微信小程序中,使用live-pusher 自定义拍照,snapshot快门方法,不能正确触发回调。

2024-03-05 14:03 负责人:无 分享
已邀请:
g***@163.com

g***@163.com - 我叫李岗

解决了吗?

要回复问题请先登录注册