supervision-uniapp/pages/common/camera.nvue

<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">
					<view class="img-number">{{ files.length }}</view>
					<template v-if="files.length > 0">
						<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('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 => {
								const fileItem = {
									filePath: data.filePath,
									fileName
								}
								_this.files.push(fileItem)
								addPhoto(fileItem).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, 0.7);
		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 {
				color: white;
				position: absolute;
			}
		}
		
	}
</style>