微信小程序（uniapp）拍照和拍视频

前言

微信小程序想要实现拍照和拍小视频功能，就得使用camera组件以及配合一些api来完成。

实现的效果：

一、拍照：

二、拍视频：

---

提示：以下是本篇文章正文内容，下面案例可供参考

HTML:

<camera v-if="isAuth" style="height: 60%;" class="camera" device-position="back" flash="off"></camera>

<!-- 拍照按钮 -->
<view class="image_btn" v-if="show" @click="takePhoto"><image :src="imageIcon + 'takephoto_btn.png'" class="image" mode=""></image></view>

<!-- 拍小视频按钮 -->
<view class="time" v-if="showTime">
	<text class="point">·</text>
	<text>00:</text>
	<text v-if="timingSum < 10">0</text>
		{{ timingSum }}
	</text>
</view>
<view class="image_btn bottom_btn" @longpress="startShootVideo" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
	<image :src="imageIcon + 'takeVideo_btn.png'" class="image" mode=""></image>
</view>

JS:

// 先校验用户是否授权使用摄像头，麦克风
onLoad() {
	const _this = this;
		uni.getSetting({
			success: res => {
				if (res.authSetting['scope.camera']) {
					// 用户已经授权
					_this.isAuth = true;
				} else {
					// 用户还没有授权，向用户发起授权请求
					uni.authorize({
						scope: 'scope.camera',
						success() {
							// 用户同意授权
							_this.isAuth = true;
						},
						fail() {
							// 用户不同意授权
							_this.openSetting('camera').then(res => {
								_this.isAuth = true;
							});
						}
					});
				}
			},
			fail: res => {
				console.log('获取用户授权信息失败');
			}
		});

		uni.getSetting({
			success: res => {
				if (res.authSetting['scope.record']) {
					// 用户已经授权
					_this.isAuth = true;
				} else {
					// 用户还没有授权，向用户发起授权请求
					uni.authorize({
						scope: 'scope.record',
						success() {
							// 用户同意授权
							_this.isAuth = true;
						},
						fail() {
							// 用户不同意授权
							_this.openSetting('record').then(res => {
								_this.isAuth = true;
							});
						}
					});
				}
			},
			fail: res => {
				console.log('获取用户授权信息失败');
			}
		});
},
methods: {
	// 拍照
	takePhoto() {
		if (this.sum == 3) {
			// 只能拍3张照片
			showToast({
				title: '只能添加3张照片',
				icon: 'none'
			});
			return;
		}
		const ctx = uni.createCameraContext();
		ctx.takePhoto({
			quality: 'normal', // 成像质量 high-高质量  normal-普通质量  low-低质量  original-原图
			success: res => {
				uni.showLoading({
					title: '图片处理中'
				});
				// res.tempImagePath 拍摄的照片地址
				this.arr[this.sum].url = res.tempImagePath;
				this.sum++;
				uni.hideLoading();
			}
		});
	}
}

	// 开始录像
	startShootVideo() {
		uni.showLoading({
			title: '正在处理中'
		});
		this.ctx.startRecord({
			success: res => {
				this.videoShow = true;
				this.showTime = true;
				uni.hideLoading();
				// 计时
				this.timing = setInterval(() => {
					this.timingSum++;
				}, 1000);
			},
			fail() {
				uni.hideLoading();
			}
		});
	},
	// 结束录像
	stopShootVideo(e) {
		if (this.stopContienr) {
			if (this.timing) {
				clearInterval(this.timing);
			}
			this.videoShow = false;
			uni.showLoading({
				title: '正在处理中'
			});
			this.ctx.stopRecord({
				compressed: true,
				success: res => {
					this.timingSum = 0;
					this.showTime = false;
					uni.saveFile({
						tempFilePath: res.tempVideoPath,
						success: res => {
							uni.hideLoading();
							// res.savedFilePath 视频地址
							uni.setStorageSync('videoUrl', JSON.stringify(res.savedFilePath));
						}
					});
				},
				fail() {
					uni.hideLoading();
				}
			});
		}
	},
	//touch start 手指触摸开始
	handleTouchStart(e) {
		this.startTime = e.timeStamp;
	},
	//touch end 手指触摸结束
	handleTouchEnd(e) {
		this.endTouch = false;
		if (this.timing) {
			clearInterval(this.timing);
		}
		this.videoShow = false;
		this.endTime = e.timeStamp;
		//判断是点击还是长按，长按 触发结束录像
		if (this.endTime - this.startTime > 350) {
			if (this.timingSum < 5) {
				this.ctx.stopRecord({
					success: res => {
						showToast({
							title: '录制时间过短！',
							icon: 'none'
						});
					},
					fail() {}
				});
				this.timingSum = 0;
			} else {
				this.stopShootVideo();
			}
		}
	}
	

注意：首页确保授权了相关权限，其次拍的小视频最好限制时长，过长会有性能问题。调试以真机为准。