uni自定义相机可编辑（包含小程序，app）

小程序端

使用了camera他只支持小程序

<template>
	<view class="">
		<camera class="camera" id="myCamera" :flash="flash" :device-position="devicePosition" @error="onCameraError">
			<cover-view  @click="handleClick">
					拍照
			</cover-view>
			<cover-view  @click="handleCut">
				切换摄像头
			</cover-view>
		</camera>
		<image :src="tempImagePath"></image>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const flash = ref('')
	const devicePosition = ref('front')
	const tempImagePath = ref('')
	const onCameraError = (error) => {
		console.log('摄像头错误', error);
	}
	const handleClick = () => {
		console.log('拍照');
		let cameraContext = uni.createCameraContext(); // 创建camera上下文实例
		cameraContext.takePhoto({
			quality: 'high', // 指定拍照质量
			success: (res) => {
				// 成功拍照的回调
				console.log('拍照成功', res);
				tempImagePath.value = res.tempImagePath
			},
			fail: (err) => {
				// 拍照失败的回调
				console.error('拍照失败', err);
			}
		});
	}
	const handleCut = () => {
		console.log('切换');
		devicePosition.value = devicePosition.value == 'front' ? 'back' : 'front'
	}
</script>

<style lang="scss" scoped>
	.camera {
		width: 600rpx;
		height: 600rpx;
	}

	image {
		width: 400rpx;
		height: 400rpx;
	}
</style>

app端在.nvue中使用了live-pusher

<template>
	<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
		<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: windowWidth/2, height: windowHeight/2 }"
		></live-pusher>
		<cover-image class="snapshotsrc" :src="snapshotsrc"></cover-image>
		<view class="menu">
			<!--返回键-->
			<cover-view @tap="back">返回</cover-view>
			<!--快门键-->
			<cover-view @tap="snapshot">快门键</cover-view>
			<!--反转键-->
			<cover-view @tap="flip">反转键</cover-view>
		</view>
	</view>
</template>

<script>
let _this = null;
export default {
	data() {
		return {
			poenCarmeInterval:null,//打开相机的轮询
			aspect: '2:3', //比例
			windowWidth: '', //屏幕可用宽度
			windowHeight: '', //屏幕可用高度
			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) {
					_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);
		},

		//开始预览
		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;
			}
		},
		//抓拍
		snapshot() {
			//震动
			uni.vibrateShort({
			    success: function () {
			        console.log('success');
			    }
			});
			//拍照
			this.livePusher.snapshot({
				success: e => {
					console.log('拍照', e);
					_this.snapshotsrc = e.message.tempImagePath;
				}
			});
		},
		//反转
		flip() {
			this.livePusher.switchCamera();
		},
	}
};
</script>

<style lang="scss">
.live-camera {
	justify-content: center;
	align-items: center;
	.snapshotsrc {
		width: 100rpx;
		height: 200rpx;
		border: 1px solid red;
	}
	.menu {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 180rpx;
		z-index: 98;
		align-items: center;
		justify-content: center;
		background: #fff;
		.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>