秃头程序员
秃头程序员
  • 发布:2022-11-22 18:06
  • 更新:2022-11-23 18:43
  • 阅读:323

【报Bug】live-pusher 在vue文件中无法打开前置摄像头

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: 荣耀X40

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template> <view class="face-content"> <view class="face-title"> <text class="face-title-top"> 人脸识别扫描 </text> <text class="face-title-bottom"> 请正对手机,保证光线充足 </text> </view> <view class="livefater"> <live-pusher id="livePusher" ref="livePusher" class="livePusher" url="" mode="SD" :muted="true" enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="1:1"></live-pusher> <cover-view class="face-cover">
<cover-view class="line" ref="line">
</cover-view>
</cover-view>
</view>
<view class="face-notice">
<view class="face-notice-txt">
拍摄须知
</view>
</view>
</view>
</template>

<script>
import {
pathToBase64
} from 'image-tools';
const animation = uni.requireNativePlugin('animation')
export default {
props: {
time: {
default: 5000,
type: Number
},
},
data() {
return {
top: '-400rpx',
isBottom: false,
timer: null,
lineClass: ['line'],
};
},
destroyed() {
clearInterval(this.timer);
},
mounted() {
// 注意:需要在onReady中 或 onLoad 延时
this.context = uni.createLivePusherContext('livePusher', this);
this.timer = setInterval(() => {
var lineEl = this.$refs.line;
animation.transition(lineEl, {
styles: {
transform: 'translateY(-400rpx)',
},
duration: 0, //ms
})
this.initAnimation()
}, 3000);
this.initAnimation()
setTimeout(() => {
this.startPreview();
});
},
methods: {
initAnimation() {
var lineEl = this.$refs.line;
console.log(1)
animation.transition(lineEl, {
styles: {
transform: 'translateY(780rpx)',
},
duration: 3000, //ms
})
},
// 拍照事件
snapshot() {
this.context.snapshot({
success: res => {
pathToBase64(res.message.tempImagePath).then(base64 => {
console.log('[转换成base64]', base64);
});
}
});
},
// 开启摄像头
startPreview() {
var that = this;
this.context.startPreview({
success: () => {
that.Timer = setTimeout(function() {
// that.snapshot();
}, that.time);
}
});
}
}
};
</script>

<style lang="scss" scoped>
.face-content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #fff;

    .face-title {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  

        &-top {  
            /* 人脸识别扫描 */  
            font-size: 42rpx;  
            font-weight: 500;  
            color: #333333;  
        }  

        &-bottom {  
            color: #999999;  
            font-size: 28rpx;  
            margin-top: 10rpx;  
        }  
    }  
    .livefater {  
        display: flex;  
        justify-content: center;  
        flex-direction: column;  
        align-items: center;  
        margin-top: 10rpx;  
        margin-bottom: 50rpx;  
        width: 694rpx;  
        height: 708rpx;  
        position: relative;  

        .livePusher {  
            width: 694rpx;  
            height: 708rpx;  
        }  

        .face-cover {  
            width: 694rpx;  
            height: 708rpx;  
            // margin-top: -300px;  
            position: absolute;  

            .gaiimg {  
                width: 694rpx;  
                height: 708rpx;  
                position: absolute;  
            }  

            .line {  
                width: 694rpx;  
                height: 400rpx;  
                background-image: linear-gradient(to bottom, transparent, #096EFF);  
                position: absolute;  
                left: 0;  
                top: -400rpx;  
                // transition-property: top;  
                // transition-duration: 1s;  
                // transition-timing-function: linear;  
            }  

            .line-rotate {  
                transform: rotate(180deg);  
            }  
        }  
    }  

    .face-notice {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  

        &-txt {  
            font-size: 32rpx;  
            font-weight: 500;  
            text-align: center;  
        }  

        &-img {  
            width: 580rpx;  
            height: 144rpx;  
        }  
    }  
}  

</style>

操作步骤:

复制示例代码到.vue文件可复现无法打开前置摄像头的问题

预期结果:

打开前置摄像头

实际结果:

打开的是后置摄像头

bug描述:

live-pusher 在vue文件中无法打开前置摄像头设置device-position也没有用,修改后缀名为nvue就会默认打开前置摄像头

2022-11-22 18:06 负责人:无 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

该问题目前已经被锁定, 无法添加新回复