vue PC端实现选择图片或摄像头拍照

添加用户的时候需要选择本地照片或拍照采集用户头像：

子组件

<template>
	<div class="image-capture">
		<div class="camera_outer">
			<div class="placeholder" v-show="!showVideo">

			</div>
			<video
				id="videoCamera"
				:width="videoWidth"
				:height="videoHeight"
				autoplay
				v-show="showVideo"
			></video>
			<canvas
				style="display: none"
				id="canvasCamera"
				:width="videoWidth"
				:height="videoHeight"
			></canvas>
			<div v-if="imgSrc" class="img_bg_camera" id="img_bg_camera" ref="img_bg_camera">
				<img :src="imgSrc" alt="" :class="['tx_img', {'rotate': imgNeedRotate}]" />
			</div>
		</div>
		<div class="btns">
			<el-button type="text" icon="el-icon-video-camera" @click="getCompetence()"></el-button>
			<el-button type="text" icon="el-icon-camera" @click="setImage()"></el-button>
			<el-button type="text" icon="el-icon-picture-outline" @click="$refs.btnSelectPicture.click()"></el-button>
			<input style="display: none;" ref="btnSelectPicture" type="file" id="uploadImg" @change="handleSelectPicture()">
			<!-- <el-button type="text" icon="el-icon-close" @click="handleCleanPicture" :disabled="imgSrc==''"></el-button> -->

			<!-- <el-button type="text" icon="el-icon-close" @click="headPortraitUpload" :disabled="imgSrc==''">上传</el-button> -->
			<!-- <button @click="getCompetence()">打开摄像头</button>
			<button @click="stopNavigator()">关闭摄像头</button>
			<button @click="setImage()">拍照</button> -->
		</div>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
ex