记录一下,方便以后自己再查询。
要求:不直接用手机全屏摄像头,而是在app内需要完成嵌入自定义相机来拍照。
camera不支持app使用。
最后查到可以用live-pusher 实时音视频录制 完成。
并且创建的是.nvue
拍完照之后,压缩图片并且转base64数据,最后传给上页面显示出来。(存本地实现)
代码如下:
1.拍照前一页面
<view>
<button type="primary" @tap="toPhoto">打开自定义相机</button>
<view>拍摄结果预览图,见下方</view>
<view class="photo">
<image class="preview" :src="path" mode="aspectFit"></image>
</view>
</view>
<script>
export default {
data() {
return {
path:''
}
},
onShow() {
this.getPicData()
},
methods:{
// 接收base64数据
getPicData() {
this.path = uni.getStorageSync('pic');
plus.push.createMessage('拍照成功');
// console.log(this.path);
},
}
2.拍照页面(cover-image 中的src是在线地址,实验用别的地址都不行)
<template>
<view class="photo">
<view class="live-camera">
<live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0"
:aspect="aspect" min-bitrate="1000" audio-quality="16KHz" device-position="front" :auto-focus="true"
:muted="true" :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange"
></live-pusher>
<view class="menu">
<!--底部菜单区域背景-->
<!--返回键-->
<cover-image class="menu-back" @tap="back" src=""></cover-image>
<!--快门键-->
<cover-image class="menu-snapshot" @tap="snapshot" src="">
</cover-image>
<!--反转键-->
<cover-image class="menu-flip" @tap="flip" src=""></cover-image>
</view>
</view>
<view class="tips">
<text class="textphoto">平视屏幕,并正对光源</text>
<text class="texttips">注意事项:</text>
<text class="text">1.为了确保学时有效性,请进行人脸拍照比对</text>
</view>
</view>
</template>
<script>
import {
pathToBase64,
base64ToPath
} from 'image-tools'
let _this = null;
export default {
data() {
return {
poenCarmeInterval: null, //打开相机的轮询
aspect: '3:4', //比例
windowWidth: '700rpx', //屏幕可用宽度
windowHeight: '800rpx', //屏幕可用高度
camerastate: false, //相机准备好了
livePusher: null, //流视频对象
snapshotsrc: null //快照
};
},
onLoad(e) {
_this = this;
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) {
console.log(res)
},
fail: err => {
console.log(err)
}
});
},
//开始预览,初始化
startPreview() {
this.livePusher.startPreview({
success: a => {
console.log(a)
},
fail: err => {
console.log(err)
}
});
},
//停止预览
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(ee) {
uni.navigateBack();
console.log(ee)
},
//抓拍
snapshot() {
//震动
uni.vibrateShort({
success: function() {
console.log('success');
}
});
//拍照
this.livePusher.snapshot({
success: e => {
_this.snapshotsrc = e.message.tempImagePath;
// 压缩图片
uni.compressImage({
src: e.message.tempImagePath,
quality: 80,
success: list => {
console.log(list)
// 转Base64
pathToBase64(list.tempFilePath)
.then(base64 => {
uni.setStorageSync('pic', base64)
_this.stopPreview();
uni.navigateBack();
})
}
})
}
})
},
//反转
flip() {
this.livePusher.switchCamera();
},
}
};
</script>
<style lang="scss" scoped>
.live-camera {
width: 650rpx;
height: 980rpx;
padding-top: 0rpx;
padding-left: 100rpx;
display: flex;
justify-content: center;
align-items: center;
.livePusher{
padding: 0;
width: 650rpx;
height: 640rpx;
top: 0;
}
.menu {
background: rgba(0, 0, 0, .3);
position: absolute;
left: 50rpx;
bottom: 0;
width: 650rpx;
height: 170rpx;
// 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;
background: rgba(0, 0, 0, .4);
left: 30rpx;
bottom: 50rpx;
width: 80rpx;
height: 80rpx;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.menu-snapshot {
width: 130rpx;
height: 130rpx;
background: rgba(0, 0, 0, .4);
z-index: 99;
}
.menu-flip {
position: absolute;
right: 30rpx;
bottom: 50rpx;
width: 80rpx;
height: 80rpx;
z-index: 99;
background: rgba(0, 0, 0, .4);
align-items: center;
justify-content: center;
}
}
}
.tips {
margin-top: 20rpx;
margin-left: 25px;
.textphoto {
display: flex;
text-align: center;
align-items: center;
font-size: 28rpx;
padding-right: 15rpx;
}
.texttips {
margin-top: 50rpx;
font-size: 35rpx;
font-weight: bold;
}
.text {
margin-top: 20rpx;
margin-left: 30rpx;
font-size: 30rpx;
}
}
</style>