v3-h5-web/pages_basics/views/earlyWarningManage/videoMonitoring.vue

<!-- 视频监控-->
<template>
	<view class="earlyWarning">
		<scroll-view scroll-x @scrolltolower="scrollGet" class="header">
			<view class="tabTitle_tow">
				<view class="tabTitle_tow_li" @tap="tabClickTow(item,index)" :key="index"
					v-for="(item,index) in videoHardwareList">
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item.name}}</view>
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<!-- 视频部分 -->
			<view class="video-max-box">
				<video v-for="(item,index) in urlList" :key="index" ref="videoRef" :src="item.url" :poster="videoCover"
					:custom-cache='false' :autoplay="true" :controls="true" :enable-danmu="false" :muted="true"
					:show-fullscreen-btn="true" :show-center-play-btn="false" :show-play-btn="false" @error="videoErrorCallback">
				</video>
			</view>

			<view class="broadcast">
				<view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
				<!-- 按钮部分 -->
				<view class="trumpet-max-box">
					<view @click="trumpetClick(index)" class="trumpet-for-box"
						:class="item.type?'trumpet-color-a':'trumpet-color-b'" v-for="(item,index) in trumpetList" :key="index">
						<img :src="imagesUrl('commonality/icon_sskz_zc.png')" v-if="!item.type">
						<img :src="imagesUrl('commonality/icon_sskz_xz.png')" v-if="item.type">
						{{item.name}}
					</view>
				</view>
				<view class="broadcast_m">
					<view class="broadcast_m_t" :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'"
						@longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">
						{{liveType?'松开发送':'按住说话'}}
					</view>
					<view class="broadcast_m_b" v-if="!liveType">按住说话，录入广播内容</view>
					<view class="broadcast_m_b" v-if="liveType">松开发送，向上滑动取消发送</view>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		iotAppSpeakerFindHorn,
		iotAppSpeakerPlayVoice
	} from '@/pages_manage/api/index.js'
	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				videoCover: uni.getStorageSync('videoCover'),
				tabTextTow: [{
					name: 'RFID摄像头'
				}, {
					name: '房间内监控1'
				}, {
					name: '房间内监控2'
				}, {
					name: '房间内监控3'
				}, {
					name: '房间内监控3'
				}, {
					name: '房间内监控3'
				}, ],
				curTabTow: 0,
				//视频数据
				urlList: [{}],
				videoHardwareNUM: [], //实验室和楼道摄像头编码
				trumpetList: [],
				//广播相关
				liveType: false,
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				recorderManager: wx.getRecorderManager(),
				videoHardwareList: [], //获取所有摄像头编码
				hardwareList: [], //硬件列表
				subId: '',
				floorId: '',

			}
		},
		onLoad(option) {
			if (option.subId || option.floorId) {
				this.subId = option.subId
				this.floorId = option.floorId
			}
		},
		onShow() {

		},
		mounted() {
			this.getDeviceList() //喇叭接口
			this.GetVideoList(); //摄像头接口
		},
		methods: {
			//顶部tab点击
			tabClickTow(item, index) {
				this.curTabTow = index;
				console.log(item)
				// this.GetStartList(item)

			},
			//滚动事件
			scrollGet() {
				let self = this;

			},
			videoErrorCallback(e) {
				console.log("播放失败", e);
			},
			//查询摄像头地址
			async GetVideoList() {
				let obj = {
					page: '1',
					count: '10',
					deviceIds: this.itemData.hardwareNUM
				};
				const {
					data
				} = await GetStartList(obj);
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						let text = uni.getStorageSync('cameraUrl');
						let url = data.data[i].hls;
						url = url.split("rtp/");
						let newUrl = text + 'rtp/' + url[1];
						let obj = {
							id: data.data[i].deviceID,
							url: newUrl,
						}
						list.push(obj)
						console.log("obj", obj)
					}
					this.urlList = list;
				}
			},

			//获取喇叭列表
			async getDeviceList() {
				let obj = {
					subId: this.subId,
					floorId: this.floorId,
				};
				const {
					data
				} = await iotAppSpeakerFindHorn(obj)
				if (data.code == 200) {
					for (let i = 0; i < data.data.length; i++) {
						data.data[i].type = false;
					}
					this.$set(this, 'trumpetList', data.data)
				}
			},
			//点击选择喇叭
			trumpetClick(index) {
				this.trumpetList[index].type = !this.trumpetList[index].type
			},
			//录制
			recordButton(e) {
				console.log("按下")
				let self = this;
				let num = 0;
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {
						num++
					}
				}
				if (num == 0) {
					uni.showToast({
						title: '请选择喇叭',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				this.liveType = true;
				console.log('录制', e)
				this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				const options = {
					duration: 10000,
					sampleRate: 16000,
					numberOfChannels: 1,
					encodeBitRate: 48000,
					format: 'mp3',
					frameSize: 50
				}
				this.recorderManager.start(options); //开始录音
				this.recorderManager.onStart(() => {
					console.log('recorder start')
				})
				this.recorderManager.onError((res) => {
					console.log(res);
				})
				wx.showToast({
					title: "正在录音，上划取消发送",
					icon: "none",
					duration: 60000 //先定义个60秒，后面可以手动调用wx.hideToast()隐藏
				});
				this.sendLock = false; //长按时是不上锁的。
			},
			//取消
			cancelButton(e) {
				console.log("移动")
				let self = this;
				let num = 0;
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {
						num++
					}
				}
				if (num == 0) {
					return
				}
				this.liveType = false;
				console.log('取消', e)
				let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
				if (Math.abs(moveLenght) > 50) {
					wx.showToast({
						title: "松开手指,取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = true; //触发了上滑取消发送，上锁
				} else {
					wx.showToast({
						title: "正在录音，上划取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = false; //上划距离不足，依然可以发送，不上锁
				}
			},
			//发送
			sendButton(e) {
				console.log("松开")
				let self = this;
				let num = 0;
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {

						num++
					}
				}
				if (num == 0) {
					return
				}
				this.liveType = false;
				console.log('发送', e)
				wx.hideToast(); //结束录音、隐藏Toast提示框
				this.recorderManager.stop(); //结束录音
				this.recorderManager.onStop((res) => {
					if (!this.sendLock) {
						console.log('1', this.recorderManager)
						this.uploadImg(res.tempFilePath);
					}
					console.log('停止录音', res.tempFilePath)
					console.log("sendLock", this.sendLock);
				})
			},
			//上传MP3
			async uploadImg(tempFilePaths) {
				var self = this;
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							console.log("上传成功", res)
							let url = uni.getStorageSync('fileBrowseEnvironment') + '/' + res.data.url
							self.iotAppSpeakerPlayVoice(url);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {
						uni.hideLoading()
					},
					complete: () => {}
				});
			},
			//发送语音
			async iotAppSpeakerPlayVoice(text) {
				let self = this;
				let list = [];
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {
						list.push(self.trumpetList[i].deviceNo)
					}
				}
				let obj = {
					deviceNo: list.join(','),
					voiceUrls: text,
					cycle: 1,
					level: 1000,
				}
				const {
					data
				} = await iotAppSpeakerPlayVoice(obj)
				if (data.code == 200) {
					uni.showToast({
						title: '发送成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			handleClick(row, doType) {
				let self = this;
				if (doType == 'detail') { //详情

				}

			},


		}
	}
</script>

<style lang="stylus" scoped>
	@import '@/api/request/imagesUrl.styl';

	.earlyWarning {
		height: 100%;
		display flex;
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.header {
			width: 750rpx;
			height: 100rpx;
			position: fixed;
			top: 0rpx;
			z-index: 100;
			background: #fff;

			.tabTitle_tow {
				height: 100rpx;
				white-space: nowrap;
				display: inline-flex;

				.tabTitle_tow_li {

					position: relative;
					width: 210rpx;
					height: 100rpx;
					text-align center;
					padding-top: 26rpx;
					box-sizing: border-box;

					.tabTitle_tow_text {
						display: inline-block;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 46rpx;
						position: relative;

						&.on {
							color: #0183FA;
						}
					}

					.tabTitle_tow_across {
						width: 50rpx;
						height: 4rpx;
						background: #0183FA;
						border-radius: 2rpx;
						margin:0 auto 0;
						display none;

						&.on {
							display block;
						}
					}

				}
			}

		}

		.video-max-box {
			width: 690rpx;
			height: 420rpx;
			margin: 116rpx 30rpx 20rpx;

			video {
				width: 690rpx;
				height: 420rpx;
			}
		}

		.broadcast {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 22rpx 30rpx 30rpx;
			box-sizing: border-box;
			margin: 20rpx 30rpx 0;

			.broadcast_t {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;

				>label {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 30rpx;
					margin-left: 16rpx;
				}
			}

			.trumpet-max-box {
				display: flex;
				justify-content: flex-start;
				margin-top: 22rpx;
				flex-wrap: wrap;

				.trumpet-for-box {
					display: inline-block;
					width: auto;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
					text-align: center;
					cursor: pointer;
					overflow: hidden;
					border: 1rpx solid #E0E0E0;
					border-radius: 10rpx;
					color: #E0E0E0;
					display: flex;
					justify-content: center;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
					padding: 0 12rpx;
					box-sizing: border-box;

					>img {
						width: 36rpx;
						height: 34rpx;
						margin: 12rpx 20rpx 0 25rpx;
					}
				}

				.trumpet-color-a {
					border: 1px solid #0183FA;
					color: #0183FA;
				}

				.trumpet-color-b {
					border: 1px solid #CCCCCC;
					color: #999;
				}
			}

			.broadcast_m {
				width: 100%;

				.broadcast_m_t {
					width: 142rpx;
					height: 142rpx;
					margin: 30rpx 0 0 258rpx;
					position: relative;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 170rpx;
					text-align: center;

					>img {
						width: 142rpx;
						height: 142rpx;
						position: absolute;

					}

					>label {
						width: 100%;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #0183FA;
						line-height: 24rpx;
						display: inline-block;
						text-align: center;
						position: absolute;
						top: 76rpx;
					}

					/* 按下 */
					.press_color {
						color: #FFFFFF;
					}

					/* 松开 */
					.slip_color {
						color: #0183FA;
					}
				}

				.broadcast_m_b {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 24rpx;
					text-align: center;
					margin-top: 14rpx;
				}

				.broadcast_m_t_back_a {
					background: url($imagesUrl+'commonality/icon_sskz_skfs.png') no-repeat center 0px;
					background-size: 100%;
					color: #FFFFFF;
				}

				.broadcast_m_t_back_b {
					background: url($imagesUrl+'commonality/icon_sskz_azsh.png') no-repeat center 0px;
					background-size: 100%;
					color: #0183FA;
				}
			}

			/* 疏散按钮 */
			.evacuation-button-box {
				width: 650rpx;
				height: 100rpx;
				background: #0183FA;
				color: #fff;
				text-align center;
				line-height: 100rpx;
				font-size: 28rpx;
				margin: 88rpx auto 0;
				border-radius: 20rpx;
			}
		}
	}
</style>