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

<<template>
	<view class="page">
		<view class='content'>
			<view class='row'>
				<view class='img-video'>
					<view class="video-content">
						<KJ-Camera ref='Camera' class="KJ-Camera" :style="{width:'100%',height:cameraHeight}">
						</KJ-Camera>
					</view>
				</view>
			</view>
			<view class='row2'>
				请将头像放于圆圈内，并阅读以下文字
			</view>
			<view class='row2 text'>
				网络客服过段时间浪费多少级范德萨快逻辑范德萨拉丝机多亏了房价按时付款了金坷垃所肩负的看离开静安寺了发动机as在考虑家双方都会计分录卡死范德萨拉使肌肤抵抗力
			</view>
			<view class='btn'>
				<!-- <view class="verify-btn" @click="getCamera" v-show="!showVideo">打开摄像头</view> -->
				<view class='video-btn'>
					<view class="verify-btn" @click="saveVideo" v-if='!isAlreadyRecord'>开始录制</view>
					<view class="verify-btn" @click="saveVideo" v-if='isAlreadyRecord' data-action="navigateTo">结束录制
					</view>
					<!-- <button class="video-close" @click="closeVideo">×</button>
					<button class="video-save" @click="saveVideo">
						{{ isAlreadyRecord ? '结束录制(' + count + 's)' : '开始录制' }}</button> -->
				</view>
			</view>
			<!-- <video ref="videob" controls="" name="media" width="100%" height="100"></video> -->
		</view>
		<!--      <view class="btn-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>
		var videoFilePath;
		export default {
			data() {
				return {
					cameraWidth: "100%",
					cameraHeight: "auto",
					src: ""
				}
			},
			onReady() {
				console.log("onReady")
				// this.$refs.Camera.initCamera();
			},

			methods: {
				/**
				 * 初始化相机 默认加载插件的时候已初始化
				 * 在横竖屏切换的时候，需要重新初始化，要不然画面是颠倒的
				 * */
				initCamera() {
					this.$refs.Camera.initCamera();
				},
				/**
				 * 拍照
				 * */
				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": 0, //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") {
							console.log("开始录像")
						} else if (res.status == "end") {
							console.log("结束录像")
							videoFilePath = res.filePath;
							uni.saveVideoToPhotosAlbum({
								filePath: plus.io.convertAbsoluteFileSystem(videoFilePath),
								success: function() {
									console.log('save success');
								}
							});
						}
					});
				},
				/**
				 * 停止录像
				 * */
				stopVideoCapture() {
					this.$refs.Camera.stopVideoCapture();
				},
				/**
				 * 前后摄像头切换
				 * */
				switchCamera() {
					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(res_max.value);
							});
						});
					});
				},
				/**
				 * 设置闪光灯模式  默认是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() {
					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);
								console.log(JSON.stringify(dic));
							});
						});
					});
				}
			}
		}
	</script>

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

		.btn {
			height: 35px;
			width: 260px;
		}

		.btn-view {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.content {
			background: #F5F6FA;
			height: 100vh;
			position: relative;
		}
		
		.row {
			display: flex;
			justify-content: center;
			padding-top: 50px;
		
		}
		
		.img-video {
			position: relative;
			border-radius: 280px;
			width: 250px;
			height: 250px;
			overflow: hidden;
		}
		
		.row2 {
			display: flex;
			font-size: 20px;
			justify-content: center;
			margin-top: 20px;
		}
		
		.verify-btn {
			background: #2772FB;
			font-size: 20px;
			padding: 10px 0;
			width: 70%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50px;
			color: white;
		
		}
		
		.btn {
			position: absolute;
			bottom: 0;
			background: white;
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 40px 0;
		}
		
		.img {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
			width: 564px;
			height: 564px;
			right: 0;
			left: 0;
			margin: auto;
		}
		
		.video-content {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
			right: 0;
			left: 0;
			// margin: auto;
		}
		
		.video {
			width: calc(100%);
			background: #F5F6FA;
		}
		
		.video-btn {
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.progressBar {
			width: 50%;
			height: 25px;
			display: block;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			// margin: auto;
			padding: 10px 10px 10px 10px;
			position: absolute;
			z-index: 2001;
			background: rgb(102, 102, 102);
			color: white;
			border-radius: 5px;
		}
		.text{
			padding: 20px;
		}
	</style>