uniapp 录制视频并保存到本地

墨客先生
于 2024-09-26 01:51:27 发布
阅读量45
点赞数 1
文章标签：前端
本文链接：https://blog.csdn.net/qq_41367785/article/details/142536623
版权
<template>
	<view class="content">
		<view class="margin-bottom padding-sm radius shadow bg-white">
			<image v-if="!videoPath" :src="imagePath" mode="widthFix"></image>
			<!-- 视频播放器 -->
			<view v-if="videoPath" :class="{'video-container': true, 'portrait': isPortrait}">
				<video :src="videoPath" controls></video>
			</view>
		</view>

		<button class="margin-lr-xl cu-btn bg-red shadow-blur round lg" @click="startRecording()">房间 {{room}} 录像</button>
		<button class="margin-xl cu-btn bg-red shadow-blur round lg" @click="stopRecording()"
			:disabled="!isRecording">停止录制</button>
		<!-- 显示当前的 modalName 值 -->
		<view class="margin-tb">当前显示路径</view>
		<view class="auto-wrap margin-tb padding-sm radius shadow bg-white"> {{ videoPath }}</view>
		<view>上传返回路径</view>
		<view class="auto-wrap margin-tb padding-sm radius shadow bg-white"> {{ returnVideoPath }}</view>

		<view class="box footn" v-if="isShown">
			<view class="cu-bar btn-group">
				<button @click="goUpload" class="cu-btn bg-green shadow-blur round lg">开始上传</button>
			</view>
		</view>

		<view class="cu-load load-modal" v-if="loadModal">
			<!-- <image src="/static/loading.png" mode="aspectFit"></image> -->
			<view style="width: 100px;" class="gray-text">视频正在上传中请勿离开...</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CameraPage',
		data() {
			return {
				room: '1',
				imagePath: '/static/98035487-eac1-4d24-928f-79f3fa3724f3.jpg',
				isShown: false, // 初始状态为隐藏
				modalName: null,
				textareaAValue: '',
				token: "",
				videoPath: '',
				returnVideoPath: '',
				isPortrait: false, // 控制视频是否为竖屏
				loadModal: false,
				postData: {
					roomId: '',
					url: '',
					videothumbnail: ''
				},
				isRecording: false,
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token'); // 用户信息
			this.room = uni.getStorageSync('room'); // 用户信息

			this.postData.roomId = uni.getStorageSync('roomId'); // 用户信息

			this.checkToken();
		},
		methods: {
			checkToken() {
				uni.request({
					url: "/app/getCurrentUser",
					method: 'GET',
					header: {
						'content-type': 'application/json', // 根据后端要求设置合适的Content-Type
						'Authorization': this.token
					},
					success: (res) => {
						console.log('请求成功:', res);
						if (res.statusCode === 200) {
							if (res.data.code === 401) {
								uni.showToast({
									title: '您token过期，请重新登录',
									icon: "none"
								});
								uni.redirectTo({
									url: '/pages/user/index'
								});
							}
						} else {
							// 处理错误响应
							console.error('错误状态码', res.statusCode);
							return;
						}
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
			},
			goUpload() {
				this.loadModal = true;
				uni.uploadFile({
					url: '/common/upload',
					filePath: this.videoPath,
					name: 'file',
					formData: {
						'room': this.room
					},
					header: {
						'Authorization': this.token // 添加 token 到请求头
					},
					success: (res) => {
						const data = JSON.parse(res.data);
						console.log("上传成功：", res.data)

						this.returnVideoPath = data.url;
						this.postData.videothumbnail = data.VideoThumbnail;

						this.postData.url = data.url;
						// uni.showToast({
						// 	title: data.msg,
						// 	icon: "none"
						// });
						this.VideoInformation();

					},
					fail: (err) => {
						console.error('上传失败', err);
						uni.showToast({
							title: '上传失败，请重试',
							icon: "none"
						});
						this.isShown = false;
						this.loadModal = false; // 上传失败后关闭加载模态框
					}
				});
			},
			VideoInformation() {

				console.log(this.postData);
				uni.request({
					url: "/app/saveVideo",
					method: 'POST',
					data: this.postData,
					header: {
						'Authorization': this.token // 添加 token 到请求头
					},
					success: (res) => {
						console.log('请求成功:', res);
						if (res.statusCode === 200) {
							if (res.data.code === 200) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								this.isShown = false;
								this.loadModal = false; // 上传成功后关闭加载模态框
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								// 处理成功响应
								console.log('响应数据', res.data.msg);
							}

						} else {
							// 处理错误响应
							console.error('错误状态码', res.statusCode);
						}
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});

			},
			chooseVideo() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera'],
					maxDuration: 3600, // 最大视频录制时长（秒）
					success: (res) => {
						const videotempFilePath = res.tempFilePath;
						console.log('选择视频成功，返回的参数URL：', videotempFilePath);
						this.isShown = true;

						// 保存视频到持久存储路径
						this.saveVideoToPersistentStorage(videotempFilePath);
					},
					fail: (err) => {
						console.error('选择视频失败：', err);
					}
				});
			},
			saveVideoToPersistentStorage(tempFilePath) {
				uni.saveFile({
					tempFilePath: tempFilePath,
					success: (saveResult) => {
						const savedFilePath = saveResult.savedFilePath;
						console.log('视频已保存到：', savedFilePath);

						// 更新视频路径
						this.videoPath = savedFilePath;

						// 获取视频信息
						uni.getVideoInfo({
							src: savedFilePath,
							success: (videoInfo) => {
								console.log('视频信息：', videoInfo);
								// 判断视频是否为竖屏
								if (videoInfo.size.height > videoInfo.size.width) {
									this.isPortrait = true;
								} else {
									this.isPortrait = false;
								}
							},
							fail: (err) => {
								console.error('获取视频信息失败：', err);
							}
						});
					},
					fail: (err) => {
						console.error('保存视频失败：', err);
					}
				});
			},
			startRecording() {
				console.log("kaishiluzhi")
				const that = this;
				const dcRichAlert = uni.requireNativePlugin("xxm-videorecord");
				
				// 开始录制视频
				dcRichAlert.startvideo({
					resolution: "640*480", // 可选值：320*240, 640*480, 1280*720
					videoname: "my_video.mp4" // 视频名称
				}, (result) => {
					console.log(result);
					if (result.status === "-1") {
						// 录制成功
						that.isRecording = false;
						that.videoPath = result.message;
					} else if (result.status === "0") {
						// 录制取消
						that.isRecording = false;
						console.log("录制取消");
					} else if (result.status === "9999") {
						// 重新录制
						console.log("重新录制");
					}
				});

				// 设置录制状态
				that.isRecording = true;
			},
			stopRecording() {
				const that = this;
				const dcRichAlert = uni.requireNativePlugin("xxm-videorecord");

				// 停止录制视频
				dcRichAlert.stopvideo((result) => {
					console.log(result);
					if (result.status === "-1") {
						// 录制成功
						that.isRecording = false;
						that.videoPath = result.message;
					} else if (result.status === "0") {
						// 录制取消
						that.isRecording = false;
						console.log("录制取消");
					} else if (result.status === "9999") {
						// 重新录制
						console.log("重新录制");
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		margin: 30rpx;
	}

	.footn {
		position: fixed;
		width: 90%;
		bottom: 20rpx;
		z-index: 1024;
	}

	.auto-wrap {
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	.video-container {
		width: 100%;
		max-width: 400px;
	}

	.portrait .video-container {
		transform: rotate(90deg);
		transform-origin: left top;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.portrait .video-container video {
		width: 100vh;
		height: 100vw;
		transform: rotate(-90deg);
		transform-origin: left top;
	}
</style>