uniapp和vue实现打开手机前置摄像头和相机的方法

最近在项目遇到了一个问题，用uniapp的框架做一个功能，就是打开平板自带的前置摄像头拍照，uniapp上的功能只有打开默认相机的功能，但是前置摄像头需要你自己去手动转换一下，客户体验感很不好，产品经理要求必须要打开就是前置摄像头~~~~~~~~~~~~~

这可愁坏了我，于是各种百度，小伙伴球高人指点，uniapp的官方群也问了，都么有用，其中群里有个人给了一个方法，但是调用腾讯云的接口，但是小编开发的是本地开发~

网上有个input方法，但是要在https环境下才能用。小编没用过，不知道有么有用~

好了废话不多

直接上代码

html部分

<template>
	<view class="content">
		<!-- 顶部tab -->
		<uni-nav-bar class="nav-tab" left-icon="back" color="#FFFFFF" backgroundColor="#3f62f6" statusBar="true"
			@clickLeft="tapBackIdColle">
			<template v-slot:left>
				<view class=" uni-flex uni-row" style="text-align: center;padding-top: 3px;">
					<text class="px14">面部采集</text>
				</view>
			</template>
			<!-- 	<view class=" uni-flex uni-row" style="text-align: center;position: absolute;right: 40px;" @tap="submit">
				<text style="font-size: 16px;">提交</text>
			</view> -->
		</uni-nav-bar>
		<view class="up-img ">
			<span class="up-span">点击采集面部照片</span>
			<view class="img-picker">
				<!-- 第一次采集 -->
				<view class="first">
					<image :class="imgFlag==true?'up-img-after':'up-img-box'" @click="takePhoto" :src="up_img" mode="">
					</image>
					<view class="btns" v-if="imgFlag==true">
						<button class="btn1" type="default" @click="retakePhoto" size="mini">重新采集</button>
						<button class="btn2" type="default" @click="confirm" size="mini">确定</button>
					</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools';
	export default {
		data() {
			return {
				up_img: '../../../static/img/tzcj/up_img.png',
				// up_img:'file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/camera/1633765326477.jpg',
				imgBase64: '',
				src: '',
				imgFlag: false
			}
		},
		onLoad() {
			let Camera = plus.camera.getCamera();
			console.log(Camera);
		},
		methods: {
			confirm(){//确定事件
			uni.showModal({
			    title: '提示',
			    content: '是否确定使用当前的图片',
			    success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定');
						uni.navigateTo({
							url:'./tzcj?imgBase64='+that.imgBase64
						})
						
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
				
			},
			retakePhoto(){//重新采集
			this.takePhoto();
				
			},
			tapBackIdColle() {//返回上一页
				uni.navigateTo({
					url: './tzcj'
				})
			},
			takePhoto() {// 拍照   
								  
				var cmr = plus.camera.getCamera(1);
				let that = this;
				cmr.captureImage(function(p) {
					//alert(p);//_doc/camera/1467602809090.jpg 
					console.log(p);
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						//alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg   
						that.$nextTick(function() {
							that.up_img = entry.toLocalURL();
						})
						that.imgFlag = true;
						that.compressImage(entry.toLocalURL(), entry.name);


					}, function(e) {
						plus.nativeUI.toast("读取拍照文件错误：" + e.message);
					});
				}, function(e) {}, {
					filename: "_doc/camera/",
					index: 1
				});

			},
			//压缩图片   
			compressImage(url, filename) {
				let name = "_doc/upload/-" + filename; //_doc/upload/F_ZDDZZ-1467602809090.jpg   
				plus.zip.compressImage({
						src: url, //src: (String 类型 )压缩转换原始图片的路径   
						dst: name, //压缩转换目标图片的路径   
						quality: 20, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100   
						overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件   
					},
					function(event) {
						//uploadf(event.target,divid);   
						var path = name; //压缩转换目标图片的路径   
						//event.target获取压缩转换后的图片url路   
						//filename图片名称   

						pathToBase64(path).then(p => {

							that.imgBase64 = p;
						}).catch(error => {
							console.error(error)
						});
					},
					function(error) {
						plus.nativeUI.toast("压缩图片失败，请稍候再试");
					});
			},





		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.up-img {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.up-span {
		/* position: absolute;
		top: 80px;		
		left: 40%;
		right: 30%; */

		color: #B23C3C;
		margin: 0 auto;
		margin-top: 15px;
		font-size: 20px;

	}

	.btns {
		transform: translateX(36%);
		margin-top: 20px;
	}

	.btn1 {
		background-color: #B13C3C !important;
		color: #FFFFFF !important;

	}

	.btn2 {
		background-color: #B13C3C !important;
		margin-left: 25px;
		color: #FFFFFF !important;
	}

	.up-img-box {
		width: 160px;
		height: 160px;
		border-radius: 25px;
		margin-left: 50%;
		margin-top: 15px;
		transform: translateX(-80px);
	}

	.up-img-after {
		width: 300px;
		height: 180px;
		border-radius: 25px;
		margin-left: 50%;
		margin-top: 15px;
		transform: translateX(-150px);
	}
</style>