You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
6.6 KiB
296 lines
6.6 KiB
<template> |
|
<view :style="{ width: windowWidth, height: windowHeight }"> |
|
<live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0" |
|
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: windowWidth, height: windowHeight }"></live-pusher> |
|
<view class="tools-t" v-if="files.length > 0"> |
|
<view> |
|
<button class="rollover-btn tools-btn" @tap="handleNext"> |
|
<uni-icons type="checkmarkempty" size="32" color="#84FF6D" /> |
|
</button> |
|
</view> |
|
</view> |
|
<view class="tools-b"> |
|
<view> |
|
<view class="img-btn tools-btn" @tap="openPhoto"> |
|
<template v-if="files.length > 0"> |
|
<view class="img-number">{{ files.length }}</view> |
|
<net-image :filepath="files[0].filePath" class="img-btn-img" /> |
|
</template> |
|
</view> |
|
|
|
</view> |
|
<view> |
|
<button class="photo-btn tools-btn" @tap="snapshot"> |
|
<view class="photo-btn-c"></view> |
|
</button> |
|
</view> |
|
<view> |
|
<button class="rollover-btn tools-btn" @tap="flip"> |
|
<uni-icons type="loop" size="24" color="#fff" /> |
|
</button> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { addPhoto } from '@/api/photo' |
|
import { pathToBase64 } from 'image-tools' |
|
import { |
|
uploadFileBase64 |
|
} from '@/api/file' |
|
import store from '@/store' |
|
|
|
let _this = null; |
|
export default { |
|
data() { |
|
return { |
|
livePusher: null, |
|
aspect: '2:3', |
|
windowWidth: '', //屏幕可用宽度 |
|
windowHeight: '', //屏幕可用高度 |
|
camerastate: false, |
|
files: [] |
|
} |
|
}, |
|
async onLoad() { |
|
|
|
_this = this; |
|
this.initCamera(); |
|
// 解决 store 取不到值的问题 |
|
store.commit('setRequestUrl', this.$store.state.requestUrl) |
|
store.commit('setFileRequestUrl', this.$store.state.fileRequestUrl) |
|
store.commit('setAppCredential', this.$store.state.appCredential) |
|
store.commit('setUserCredential', this.$store.state.userCredential) |
|
}, |
|
async onReady() { |
|
// #ifdef APP-PLUS |
|
this.livePusher = uni.createLivePusherContext('livePusher', this); |
|
this.startPreview(); //开启预览并设置摄像头 |
|
this.poenCarme(); |
|
// #endif |
|
}, |
|
methods: { |
|
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); |
|
console.log('画面比例：'+_this.aspect); |
|
} |
|
}); |
|
}, |
|
//整除数计算 |
|
aliquot(x, y) { |
|
if (x % y == 0) return y; |
|
return this.aliquot(y, x % y); |
|
}, |
|
//轮询打开 |
|
poenCarme(){ |
|
//#ifdef APP-PLUS |
|
if (plus.os.name == 'Android') { |
|
setInterval(function() { |
|
console.log(_this.camerastate); |
|
if (!_this.camerastate) _this.startPreview(); |
|
}, 2500); |
|
} |
|
//#endif |
|
}, |
|
//开始预览 |
|
startPreview() { |
|
this.livePusher.startPreview({ |
|
success: a => { |
|
console.log('startPreview', a.errMsg) |
|
if (a.errMsg == 'startPreview:ok' || a.errMsg == 'operateLivePusher:ok') { |
|
_this.camerastate = true; //标记相机启动成功 |
|
} |
|
} |
|
}); |
|
}, |
|
//抓拍 |
|
snapshot() { |
|
//震动 |
|
uni.vibrateShort({ |
|
success: function() { |
|
console.log('震动 success'); |
|
} |
|
}); |
|
//拍照 |
|
this.livePusher.snapshot({ |
|
success: (e) => { |
|
console.log(e.message.tempImagePath) |
|
const fileName = e.message.tempImagePath.substring(e.message.tempImagePath.lastIndexOf('/') + 1) |
|
pathToBase64(e.message.tempImagePath).then(base64 => { |
|
|
|
console.log('base64', base64) |
|
console.log('fileName', fileName) |
|
// 上传文件 |
|
uploadFileBase64({ |
|
base64, |
|
originalFilename: fileName |
|
}).then(data => { |
|
_this.files.push({ |
|
filePath: data.filePath, |
|
fileName |
|
}) |
|
addPhoto({ |
|
filePath: data.filePath, |
|
fileName |
|
}).then(() => { |
|
|
|
}) |
|
}) |
|
}); |
|
|
|
_this.stopPreview(); |
|
setTimeout(() => { |
|
_this.startPreview() |
|
}, 1000) |
|
}, |
|
fail(e) { |
|
console.log('fail', e) |
|
} |
|
}); |
|
}, |
|
//停止预览 |
|
stopPreview() { |
|
this.livePusher.stopPreview({ |
|
success: a => { |
|
// _this.camerastate = false; //标记相机未启动 |
|
} |
|
}); |
|
}, |
|
//反转 |
|
flip() { |
|
this.livePusher.switchCamera(); |
|
}, |
|
//状态 |
|
statechange(e) { |
|
//状态改变 |
|
console.log(e); |
|
if (e.detail.code == 1007) { |
|
_this.camerastate = true; |
|
} else if (e.detail.code == -1301) { |
|
_this.camerastate = false; |
|
} |
|
}, |
|
openPhoto() { |
|
uni.navigateTo({ |
|
url: `/pages/photo/index` |
|
}); |
|
}, |
|
handleNext() { |
|
uni.showModal({ |
|
content: `关联问题，将照片关联到对应问题信息，并结束拍照；`, |
|
cancelText: '继续拍照', |
|
confirmText: '关联问题', |
|
success: function (res) { |
|
if (res.confirm) { |
|
uni.navigateTo({ |
|
url: '/pages/task/problem/add?files=' + JSON.stringify(_this.files) |
|
}); |
|
} |
|
} |
|
}); |
|
} |
|
} |
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss"> |
|
.livePusher { |
|
height: 100vh; |
|
width: 100vw; |
|
} |
|
|
|
.tools-t { |
|
position: fixed; |
|
top: 32rpx; |
|
right: 32rpx; |
|
z-index: 9999; |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: flex-end; |
|
|
|
.tools-btn { |
|
border-radius: 50%; |
|
padding: 0; |
|
margin: 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background: rgba(0, 0, 0, 0.6); |
|
height: 112rpx; |
|
width: 112rpx; |
|
border: none; |
|
} |
|
} |
|
|
|
.tools-b { |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
z-index: 9999; |
|
background-color: rgba(0, 0, 0, 1); |
|
padding: 48rpx 80rpx; |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.tools-btn { |
|
border-radius: 50%; |
|
padding: 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.photo-btn { |
|
height: 140rpx; |
|
width: 140rpx; |
|
|
|
>.photo-btn-c { |
|
height: 128rpx; |
|
width: 128rpx; |
|
border-radius: 50%; |
|
border: 2px solid #000; |
|
} |
|
} |
|
|
|
.rollover-btn { |
|
background-color: transparent; |
|
border: 1px solid #fff; |
|
height: 96rpx; |
|
width: 96rpx; |
|
} |
|
.img-btn { |
|
background-color: transparent; |
|
border: 1px solid #fff; |
|
height: 96rpx; |
|
width: 96rpx; |
|
position: relative; |
|
|
|
.img-btn-img { |
|
height: 96rpx; |
|
width: 96rpx; |
|
border-radius: 50%; |
|
display: block; |
|
} |
|
} |
|
.img-number { |
|
position: absolute; |
|
top: -16rpx; |
|
right: -16rpx; |
|
z-index: 999; |
|
color: #fff; |
|
} |
|
} |
|
</style> |