<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> ```

- 发布:2024-03-05 14:03
- 更新:2024-04-29 10:45
- 阅读:469
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: w10
HBuilderX类型: 正式
HBuilderX版本号: 3.99
手机系统: Android
手机系统版本号: Android 14
手机厂商: 荣耀
手机机型: 荣耀v30pro
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
点击拍照,执行拍照方法
点击拍照,执行拍照方法
预期结果:
this.livePusher.snapshot正确执行反馈
this.livePusher.snapshot正确执行反馈
实际结果:
this.livePusher.snapshot没有执行,或者回调
this.livePusher.snapshot没有执行,或者回调
bug描述:
在编译微信小程序中,使用live-pusher 自定义拍照,snapshot快门方法,不能正确触发回调。
1 个回复
g***@163.com - 我叫李岗
解决了吗?