247 lines
5.2 KiB
Vue
247 lines
5.2 KiB
Vue
<template>
|
|
<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
|
|
<view class="preview" :style="{ width: windowWidth, height: windowHeight - 80 }">
|
|
<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: cameraWidth, height: cameraHeight }"
|
|
></live-pusher>
|
|
|
|
<!--提示语-->
|
|
<cover-view class="remind">
|
|
<text class="remind-text" style="">{{ message }}</text>
|
|
</cover-view>
|
|
|
|
<!--辅助线-->
|
|
<cover-view class="outline-box" :style="{ width: windowWidth, height: windowHeight - 80 }">
|
|
<cover-image
|
|
class="outline-img"
|
|
:src="dotype == 'idcardface' ? '/static/live-camera/outline/idcardface.png' : '/static/live-camera/outline/idcardbadge.png'"
|
|
style=""
|
|
></cover-image>
|
|
</cover-view>
|
|
</view>
|
|
|
|
<view class="menu">
|
|
<!--底部菜单区域背景-->
|
|
<cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image>
|
|
|
|
<!--返回键-->
|
|
<cover-image class="menu-back" @tap="back" src="/static/live-camera/back.png"></cover-image>
|
|
|
|
<!--快门键-->
|
|
<cover-image class="menu-snapshot" @tap="snapshot" src="/static/live-camera/shutter.png"></cover-image>
|
|
|
|
<!--反转键-->
|
|
<cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let _this = null;
|
|
export default {
|
|
data() {
|
|
return {
|
|
poenCarmeInterval: null, //打开相机的轮询
|
|
dotype: 'face', //操作类型
|
|
message: '', //提示
|
|
aspect: '2:3', //比例
|
|
cameraWidth: '', //相机画面宽度
|
|
cameraHeight: '', //相机画面宽度
|
|
windowWidth: '', //屏幕可用宽度
|
|
windowHeight: '', //屏幕可用高度
|
|
camerastate: false, //相机准备好了
|
|
livePusher: null, //流视频对象
|
|
snapshotsrc: null //快照
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
_this = this;
|
|
this.dotype = e.dotype;
|
|
this.initCamera();
|
|
},
|
|
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() {
|
|
console.log(_this.camerastate);
|
|
if (!_this.camerastate) _this.startPreview();
|
|
}, 2500);
|
|
}
|
|
//#endif
|
|
},
|
|
//初始化相机
|
|
initCamera() {
|
|
//处理安卓手机异步授权问题
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
_this.windowWidth = res.windowWidth;
|
|
_this.windowHeight = res.windowHeight;
|
|
_this.cameraWidth = res.windowWidth;
|
|
_this.cameraHeight = res.windowWidth * 1.5;
|
|
}
|
|
});
|
|
},
|
|
|
|
//开始预览
|
|
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() {
|
|
this.livePusher.snapshot({
|
|
success: e => {
|
|
_this.snapshotsrc = e.message.tempImagePath;
|
|
_this.stopPreview();
|
|
_this.setImage();
|
|
uni.navigateBack();
|
|
}
|
|
});
|
|
},
|
|
|
|
//反转
|
|
flip() {
|
|
this.livePusher.switchCamera();
|
|
},
|
|
|
|
//设置
|
|
setImage() {
|
|
let pages = getCurrentPages();
|
|
let prevPage = pages[pages.length - 2]; //上一个页面
|
|
|
|
//直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
|
|
prevPage.$vm.setImage({ path: _this.snapshotsrc, dotype: this.dotype });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.live-camera {
|
|
.preview {
|
|
justify-content: center;
|
|
align-items: center;
|
|
.outline-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.outline-img {
|
|
width: 750rpx;
|
|
height: 1125rpx;
|
|
}
|
|
}
|
|
.remind {
|
|
position: absolute;
|
|
top: 880rpx;
|
|
width: 750rpx;
|
|
z-index: 100;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.remind-text {
|
|
color: #dddddd;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.menu {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 750rpx;
|
|
height: 180rpx;
|
|
z-index: 98;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.menu-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 750rpx;
|
|
height: 180rpx;
|
|
z-index: 98;
|
|
}
|
|
.menu-back {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
bottom: 50rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
z-index: 99;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.menu-snapshot {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
z-index: 99;
|
|
}
|
|
.menu-flip {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 50rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
z-index: 99;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|