wangluohuoyun-huozhuapp/pages/mine/company/companyvideo.nvue

<<template>
	<view class="u-page">
		<KJ-Camera ref='Camera' class="KJ-Camera" :style="{width:'100vw',height:cameraHeight}">
		</KJ-Camera>
		<view class="view-content" :style="contentStyle">
			<!-- <image :showLoading="true" src="@/static/video-bgc.png" @click="click" class="img-bgc"
				:style="contentStyle" mode='widthFix'></image> -->
		<!-- 	<image :showLoading="true" src="@/static/video-bgc.png" @click="click" class="img-bgc"
				:style="contentStyle"></image> -->
			<view class="content" :style="{width:width}">
				<view class="title">
					请阅读以下文字
				</view>
				<view class="text">
					我已同意段时间放假啦硕大的房间里方法是打开立方爱睡懒觉发的房间拉法史莱克激发熟练度拉收费记录卡士大夫积分代暗室逢灯金坷垃似懂非懂接口了
				</view>
			</view>
			<view class="btn-view"  :style="{width:width}">
					<u-button @click="startVideoCapture" class="btn" v-if='!isAlreadyRecord' type="primary" text="开始录像"></u-button>
					<u-button @click="stopVideoCapture" class="btn" v-if='isAlreadyRecord' text="停止录像" type="primary"></u-button>
				<!-- <u-button @click="saveVideo" class="btn" v-if='isSaveVideo' type="primary" text="保存视频"></u-button> -->
				<u-button :disabled="changeCamera" @click="switchCamera" class="btn" type="primary" text="切换摄像头"></u-button>
				<!-- <button @click="setZoomFactor" class="btn" type="primary">
				    设置焦距
				</button> -->
			</view>

			<!--    <button @click="captureImage" class="btn" type="primary">
                拍照
            </button>
            <button @click="startVideoCapture" class="btn" type="primary">
                开始录像
            </button>
            <button @click="stopVideoCapture" class="btn" type="primary">
                停止录像
            </button>
            <button @click="switchCamera" class="btn" type="primary">
                前后摄像头切换
            </button>
            <button @click="setZoomFactor" class="btn" type="primary">
                设置焦距
            </button>
            <button @click="setFlash" class="btn" type="primary">
                设置闪光灯模式
            </button>
            <button @click="setTorch" class="btn" type="primary">
                设置手电筒
            </button>
            <button @click="ios_getSessionPresets" class="btn" type="primary">
                ios获取支持的分辨率
            </button>
            <button @click="ios_setSessionPreset" class="btn" type="primary">
                ios设置分辨率
            </button>
            <button @click="android_getSupportedPictureSizes" class="btn" type="primary">
                android获取照片支持分辨率列表
            </button>
            <button @click="android_getSupportedPreviewSizes" class="btn" type="primary">
                android获取预览支持分辨率列表
            </button>
            <button @click="android_getSupportedVideoSizes" class="btn" type="primary">
                android获取视频支持分辨率列表
            </button>
            <button @click="android_setCameraParams" class="btn" type="primary">
                android设置相机参数
            </button>
            <button @click="setRotation" class="btn" type="primary">
                android设置旋转角度
            </button>
            <button @click="initCamera" class="btn" type="primary">
                初始化相机
            </button>
            <image :src="src" style="width: 50px;height: 50px;"></image> -->
		</view>
	</view>
	</template>

	<script>
		import uploadImage from '@/components/ossutil/uploadFile.js';
	import permision from "@/js_sdk/wa-permission/permission.js"
		var videoFilePath;
		export default {
			data() {
				return {
					isSaveVideo: false,
					isAlreadyRecord: false,
					changeCamera:false,
					cameraWidth: "100vw",
					cameraHeight: "100vh",
					src: '',
					contentStyle: {
						width: 0,
						height: 'auto',
					},
					width: 0,
					height: 0,
					videoSrc: ''

				}
			},
			onLoad() {
				this.get_camera_permission()
			},
			onShow() {
				uni.getSystemInfo({
					success: (res) => {
						console.log(res)
						this.width = res.windowWidth
						this.height = res.windowHeight
						this.contentStyle = {
							width: res.windowWidth,
							// height: res.windowHeight,
						}
					}
				})
			},
			async onReady() {
			
				console.log("onReady")
				 await this.$refs.Camera.initCamera();
				 await this.$refs.Camera.setZoomFactor(5)
				 await this.$refs.Camera.switchCamera();
				 await this.android_setCameraParams(); //因为andorid前后摄像头，设置相机参数不一样，需要重置
			
			},

			methods: {
				async get_camera_permission() {
					var photol=await permision.requestAndroidPermission("android.permission.RECORD_AUDIO")
					if(photol == false){
						uni.showModal({
							title: '提示',
							content: '您未开启音频权限,去设置',
							success: function (res) {
								if (res.confirm) {
									permision.gotoAppPermissionSetting()
										            // plus.runtime.openURL("app-settings:");
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});	
					}
				},
				saveVideo() {
					uni.$u.route('/pages/mine/company/addcompany');
				},
				/**
				 * 初始化相机 默认加载插件的时候已初始化
				 * 在横竖屏切换的时候，需要重新初始化，要不然画面是颠倒的
				 * */
			// async initCamera() {
			// 	let Camera = await this.$refs.Camera.initCamera();
			// 	console.log('Camera',Camera)
			// 		// setTimeout(() => {
			// 		// 	this.switchCamera()
			// 		// 	this.setZoomFactor()
			// 		// }), 1000
			// 	},
				/**
				 * 拍照
				 * */
				captureImage() {
					var _this = this;
					var dic = {
						"savePath": plus.io.convertLocalFileSystemURL("_doc/KJ-Camera"), //保存图片位置，一定要是_doc绝对路径
						"format": "jpeg", //保存的图片格式 有效值：png、jpeg
						"quality": 80 //andorid才可用 保存的图片质量，取值1-100
					}
					this.$refs.Camera.captureImage(dic, (res) => {
						console.log("filePath: " + res)
						//_this.src = "file://" + res.filePath;
						uni.saveImageToPhotosAlbum({
							filePath: plus.io.convertAbsoluteFileSystem(res.filePath),
							success: function() {
								console.log('save success');
							},
							fail: function(e) {
								console.log(JSON.stringify(e));
							}
						});
					}, (res) => {
						_this.src = "data:image/png;base64," + res.base64;
						console.log("base64: " + res)
					});

				},
				/**
				 * 开始录像
				 * */
				startVideoCapture() {
					var _this = this;
					var dic = {
						"savePath": plus.io.convertLocalFileSystemURL("_doc/KJ-Camera"), //保存视频位置，一定要是_doc绝对路径
						"isAddAudio": true, //是否添加音频，默认是true
						"videoEncoder": 2, //andorid有效,DEFAULT = 0;H263 = 1;H264 = 2;MPEG_4_SP = 3;VP8 = 4;HEVC = 5;
						"audioEncoder": 3, //andorid有效,DEFAULT = 0;AMR_NB = 1;AMR_WB = 2;AAC = 3;HE_AAC = 4;AAC_ELD = 5;VORBIS = 6;
					}
					this.$refs.Camera.startVideoCapture(dic, (res) => {
						console.log("startVideoCapture: " + JSON.stringify(res))
						if (res.status == "start") {
							this.changeCamera=true
							console.log("开始录像")
							setTimeout(()=>{
								this.isAlreadyRecord = true
							},1000)
						} else if (res.status == "end") {
							console.log("结束录像")
							uni.showLoading({
								title: '压缩中...',
								mask:true
							});
							var that = this;
							uni.compressVideo({
								src: res.filePath,  
								quality: 'low', //'low':低，'medium':中，'high':高  
								success: function (res){            
									console.log('压缩后',res)
									videoFilePath = res.tempFilePath;
									uni.showLoading({
										title:"保存视频中"
									})
									uploadImage('mp4', videoFilePath, 'appData/',
										result => {
											uni.hideLoading()
											// 上传成功回调函数
											console.log('视频地址', result)
											uni.setStorageSync("videoSrc",result)
											uni.navigateBack({
												delta:1
											})
											// uni.$u.route('/pages/mine/company/addcompany', {
											// 	videoSrc: result,
											// });
										}
									)
								},
								fail: function (err) {
									uni.showToast({  
										title:'视频压缩失败',  
										icon:'none'
									},2000)
								}
							})
							
							//                uni.saveVideoToPhotosAlbum({
							//                    filePath: plus.io.convertAbsoluteFileSystem(videoFilePath),
							//                    success: function(e) {
							//                        console.log('save success');
							// console.log(e);
							//                    }
							//                });
						}
					});
				},
				/**
				 * 停止录像
				 * */
				stopVideoCapture() {
					this.$refs.Camera.stopVideoCapture();
					this.isSaveVideo = true
				},
				/**
				 * 前后摄像头切换
				 * */
				switchCamera() {
					if(!this.changeCamera){
						this.$refs.Camera.switchCamera();
						this.android_setCameraParams(); //因为andorid前后摄像头，设置相机参数不一样，需要重置
					}
					
				},
				/**
				 * 设置焦距
				 * */
				setZoomFactor() {
					this.$refs.Camera.getZoomFactor((res_zoom) => {
						console.log("获取当前焦距：" + res_zoom.value);
						this.$refs.Camera.getMaxZoomFactor((res_max) => {
							console.log("可设置的最大焦距：" + res_max.value);
							this.$refs.Camera.getMinZoomFactor((res_min) => {
								console.log("可设置的最小焦距：" + res_min.value);
								this.$refs.Camera.setZoomFactor(1);
							});
						});
					});
				},
				/**
				 * 设置闪光灯模式  默认是auto
				 * auto-自动
				 * on-开
				 * off-关
				 * */
				setFlash() {
					this.$refs.Camera.setFlash("off");
				},
				/**
				 * 设置手电筒  默认是auto
				 * auto-自动
				 * on-开
				 * off-关
				 * */
				setTorch() {
					this.$refs.Camera.setTorch("on");
				},
				/**
				 * ios获取支持的分辨率
				 * */
				ios_getSessionPresets() {
					this.$refs.Camera.ios_getSessionPresets((res) => {
						console.log("ios_getSessionPresets：" + JSON.stringify(res));
					});
				},
				/**
				 * ios设置分辨率  默认是high
				 * photo-适用于高分辨率照片质量输出
				 * high-适用于高质量视频和音频输出
				 * medium-适用于中等质量输出
				 * low-适用于低质量输出
				 * 其它。。。
				 * */
				ios_setSessionPreset() {
					this.$refs.Camera.ios_setSessionPreset("low"); //从ios_getSessionPresets方法获取
				},
				/**
				 * android获取照片支持分辨率列表
				 * 只用于设置照片分辨率 或 视频分辨率
				 * */
				android_getSupportedPictureSizes() {
					this.$refs.Camera.android_getSupportedPictureSizes((res) => {
						console.log("android_getSupportedPictureSizes：" + JSON.stringify(res));
					});
				},
				/**
				 * android获取预览支持分辨率列表
				 * 只用于设置预览分辨率
				 * */
				android_getSupportedPreviewSizes() {
					this.$refs.Camera.android_getSupportedPreviewSizes((res) => {
						console.log("android_getSupportedPreviewSizes：" + JSON.stringify(res));
					});
				},
				/**
				 * android获取视频支持分辨率列表
				 * 只用于视频分辨率
				 * */
				android_getSupportedVideoSizes() {
					this.$refs.Camera.android_getSupportedVideoSizes((res) => {
						console.log("android_getSupportedVideoSizes：" + JSON.stringify(res));
					});
				},
				/**
				 * android设置旋转角度
				 * 值参考：0，90，180，270 为null，则为自动设置
				 * */
				setRotation() {
					this.$refs.Camera.setRotation(null);
				},
				/**
				 * android设置相机参数
				 * 照片和预览分辨率等于0，默认使用从支持分辨率列表中选取合适的分辨率
				 * 其它等于0的话，不设置这个参数
				 * */
				android_setCameraParams() {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					const res = uni.getSystemInfoSync();
					var screenBiLi = res.screenWidth / res.screenHeight
					screenBiLi = Math.floor(screenBiLi * 10) / 10;
					console.log("screenBiLi:" + screenBiLi)

					//设置最大分辨率
					this.$refs.Camera.android_getSupportedPictureSizes((PictureSizes) => {
						this.$refs.Camera.android_getSupportedPreviewSizes((PreviewSizes) => {
							this.$refs.Camera.android_getSupportedVideoSizes((VideoSizes) => {

								var maxPictureSizesIndex = 0;
								var maxPictureSizeWidthHeight = 0;
								for (var i = 0; i < PictureSizes.length; i++) {
									var item = PictureSizes[i];
									var PictureSizeBiLi = item.height / item.width;
									PictureSizeBiLi = Math.floor(PictureSizeBiLi * 10) / 10;
									console.log("PictureSizeBiLi:" + PictureSizeBiLi)
									if (PictureSizeBiLi == screenBiLi) {
										if (maxPictureSizeWidthHeight < item.width * item.height) {
											maxPictureSizeWidthHeight = item.width * item.height;
											maxPictureSizesIndex = i;
										}
									}
								}

								var maxPreviewSizesIndex = 0;
								var maxPreviewSizeWidthHeight = 0;
								for (var i = 0; i < PreviewSizes.length; i++) {
									var item = PreviewSizes[i];
									var PreviewBiLi = item.height / item.width;
									PreviewBiLi = Math.floor(PreviewBiLi * 10) / 10;
									console.log("PreviewBiLi:" + PreviewBiLi)
									if (PreviewBiLi == screenBiLi) {
										if (maxPreviewSizeWidthHeight < item.width * item.height) {
											maxPreviewSizeWidthHeight = item.width * item.height;
											maxPreviewSizesIndex = i;
										}
									}
								}

								var maxVideoSizesIndex = 0;
								var maxVideoSizesWidthHeight = 0;
								for (var i = 0; i < VideoSizes.length; i++) {
									var item = VideoSizes[i];
									// var PreviewBiLi = item.height / item.width;
									// PreviewBiLi = Math.floor(PreviewBiLi * 10) / 10;
									console.log("PreviewBiLi:" + PreviewBiLi)
									//if (PreviewBiLi == screenBiLi) {
									if (maxVideoSizesWidthHeight < item.width * item.height) {
										maxVideoSizesWidthHeight = item.width * item.height;
										maxVideoSizesIndex = i;
									}
									//}
								}
								var dic = {
									picSizeWidth: PictureSizes[maxPictureSizesIndex]
										.width, //照片分辨率宽 从android_getSupportedPictureSizes方法获取
									picSizeHeight: PictureSizes[maxPictureSizesIndex]
										.height, //照片分辨率高 从android_getSupportedPictureSizes方法获取
									jpegQuality: 100, //照片质量 取值1-100
									preSizeWidth: PreviewSizes[maxPreviewSizesIndex]
										.width, //预览分辨率宽 从android_getSupportedPreviewSizes方法获取
									preSizeHeight: PreviewSizes[maxPreviewSizesIndex]
										.height, //预览分辨率高 从android_getSupportedPreviewSizes方法获取
									videoSizeWidth: VideoSizes[maxVideoSizesIndex]
										.width, //视频分辨率宽 从android_getSupportedVideoSizes方法获取
									videoSizeHeight: VideoSizes[maxVideoSizesIndex]
										.height, //视频分辨率高 从android_getSupportedVideoSizes方法获取
									videoEncodingBitRate: 5 * VideoSizes[maxVideoSizesIndex]
										.width * VideoSizes[maxVideoSizesIndex]
										.height, //视频编码比特率，如果设置了视频分辨率，这个一定要设置，否则视频不清晰
								}
								this.$refs.Camera.android_setCameraParams(dic);
								
								setTimeout(()=>{
									uni.hideLoading()
								},1000)
								console.log(JSON.stringify(dic));
							});
						});
					});
				}
			}
		}
	</script>

	<style lang="scss">
		.KJ-Camera {
			width: 100vw;
			position: fixed;
			top: 0px;
			bottom: 0px;
			left: 0;
			right: 0;
		}

		.view-content {
			position: fixed;
			top: 0;
		}

		.img-bgc {
			position: fixed;
			top: -50px;
		}

		.content {
			position: fixed;
			bottom: 200rpx;
			// top: 800rpx;
			// background: red;
			background-color: rgba(169, 151, 151, 0.7);
			
		}

		.title {
			flex-direction: row;
			justify-content: center;
			padding: 5rpx;
		}

		.text {
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
			padding: 20rpx 10rpx 0rpx 10rpx;
		}

		.btn-view {
			position: fixed;
			bottom: 20rpx;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 20rpx;
		}
		.btn{
			flex-direction: row;
			justify-content: center;
			width: 300rpx;
			height: 100rpx;
			align-items: center;
			background: #F5BA3C;
			color: #FFFFFF;
		}
		.u-button--disabled{
			background:#ccc;
			border:1px solid #ccc;
		}
	</style>