uniapp嵌入自定义相机拍照

记录一下，方便以后自己再查询。

要求：不直接用手机全屏摄像头，而是在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>