Merge branch 'fix/camera-gbt-get-play' into 'main_dev'

fix: 修复摄像头国标视频播放问题

See merge request yunteng/thingskit-app!151

@@ -3,30 +3,30 @@
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
 		<header-org @openOrg="openOrg" :total="cameraTotal" title="摄像头数：" :imageSrc="imageSrc"></header-org>
-		<view style="height: 150rpx;"></view>
+		<view style="height: 150rpx"></view>
 		<!-- 自带分页组件 -->
-		<mescroll-body height="80%" ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback"
-			@up="upCallback">
+		<mescroll-body height="80%" ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption"
+			@down="downCallback" @up="upCallback">
 			<view class="camera-container">
 				<view class="container-item">
 					<!-- #ifdef MP-WEIXIN -->
-					<view v-for="(item, index) in list" :key="item.id" class="item" >
+					<view v-for="(item, index) in list" :key="item.id" class="item">
 						<video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none"
 							:id="'video' + item.id" class="video" :src="item.videoUrl" controls :title="item.name"
-							x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn
-							:poster="item.avatar" @play="playVideo"></video>
-						<view  class="bottom-text text-clip w-300">
+							x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn :poster="item.avatar"
+							@play="playVideo"></video>
+						<view class="bottom-text text-clip w-300">
 							<text class="text">{{ item.name }}</text>
 						</view>
 					</view>
 					<!-- #endif -->
 					<!-- #ifdef APP-PLUS -->
-					<cover-view v-for="(item, index) in list" :key="item.id" class="item" style="overflow: hidden;">
+					<cover-view v-for="(item, index) in list" :key="item.id" class="item" style="overflow: hidden">
 						<video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none"
 							:id="'video' + item.id" class="video" :src="item.videoUrl" controls :title="item.name"
-							x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn
-							:poster="item.avatar" @play="playVideo"></video>
-						<cover-view  class="bottom-text text-clip w-300">
+							x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn :poster="item.avatar"
+							@play="playVideo"></video>
+						<cover-view class="bottom-text text-clip w-300">
 							<cover-view class="text">{{ item.name }}</cover-view>
 						</cover-view>
 					</cover-view>
@@ -36,143 +36,166 @@
 			<!-- <mescroll-empty v-if="!list.length" /> -->
 		</mescroll-body>
 		<!-- 自带分页组件 -->
-		<view style="height: 60rpx;"></view>
+		<view style="height: 60rpx"></view>
 	</view>
 </template>
 
 <script>
-	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
-	import api from '@/api/index.js'
-	import {
-		useNavigateTo
-	} from '@/plugins/utils.js'
-	import headerOrg from '@/components/common/header-org.vue'
+import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
+import api from '@/api/index.js'
+import { useNavigateTo } from '@/plugins/utils.js'
+import headerOrg from '@/components/common/header-org.vue'
 
-	export default {
-		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
-		components:{
-			headerOrg
+export default {
+	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
+	components: {
+		headerOrg,
+	},
+	data() {
+		return {
+			imageSrc: '/static/camer.png',
+			page: {
+				num: 0,
+				size: 10,
+			},
+			downOption: {
+				auto: true, //是否在初始化后,自动执行downCallback; 默认true
+			},
+			upOption: {
+				auto: false, // 不自动加载
+			},
+			current: 0,
+			cameraTotal: 0,
+			list: [],
+			ordId: '',
+		}
+	},
+	onShow() {
+		if (this.ordId) {
+			this.loadData(1, this.ordId)
+		}
+	},
+	onHide() {
+		this.ordId = ''
+	},
+	onLoad() {
+		// 隐藏原生的tabbar
+		uni.hideTabBar()
+	},
+	methods: {
+		/*下拉刷新的回调 */
+		downCallback() {
+			//联网加载数据
+			this.page.num = 1
+			this.loadData(1)
 		},
-		data() {
-			return {
-				imageSrc:'/static/camer.png',
-				page: {
-					num: 0,
-					size: 10
-				},
-				downOption: {
-					auto: true //是否在初始化后,自动执行downCallback; 默认true
-				},
-				upOption: {
-					auto: false // 不自动加载
-				},
-				current: 0,
-				cameraTotal: 0,
-				list: [],
-				ordId: '',
-			};
+		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+		upCallback() {
+			//联网加载数据
+			this.page.num += 1
+			this.loadData(this.page.num)
 		},
-		onShow() {
-			if (this.ordId) {
-				this.loadData(1, this.ordId);
+		async loadData(pageNo, organizationId) {
+			let httpData = {
+				page: pageNo,
+				pageSize: 10,
+				organizationId,
+			}
+			const res = await api.homeApi.getCameraApi({
+				params: httpData,
+				custom: {
+					load: false,
+				},
+			})
+			if (res) {
+				uni.stopPullDownRefresh()
+				this.mescroll.endBySize(res.items.length, res.total)
+				this.cameraTotal = res.total
+				if (!res.items.length && res.total == 0) {
+					this.mescroll.showEmpty()
+				} else {
+					this.mescroll.removeEmpty()
+				}
+				// this.list = res.items
+				this.getPlaySource(res.items)
+				// this.$nextTick(()=>{
+				// 	for(let item of res.items){
+				// 	if(item.accessMode===1){
+				// 		item.videoUrl = ( api.homeApi.byCameraIdGetDetailApi(item.id)).data.url
+				// 	}
+				// 	if(item.accessMode === 2){
+				// 		const {deviceId,channelNo} = item.params || {}
+				// 		try{
+				// 			const result =  api.homeApi.getCameraGBTUrl(deviceId,channelNo)
+				// 			const {data:{flv}} = result || {}
+				// 			item.videoUrl = flv
+				// 		}catch(err){
+				// 			console.log(err,'error')
+				// 		}
+				// 	}
+				// }
+				// })
+
+				if (pageNo == 1) {
+					this.list = res.items
+				} else {
+					this.list = this.list.concat(res.items)
+				}
 			}
 		},
-		onHide() {
-			this.ordId = '';
-		},
-		onLoad() {
-			// 隐藏原生的tabbar
-			uni.hideTabBar();
-		},
-		methods: {
-			/*下拉刷新的回调 */
-			downCallback() {
-				//联网加载数据
-				this.page.num = 1;
-				this.loadData(1);
-			},
-			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
-			upCallback() {
-				//联网加载数据
-				this.page.num += 1;
-				this.loadData(this.page.num);
-			},
-			async loadData(pageNo, organizationId) {
-				let httpData = {
-					page: pageNo,
-					pageSize: 10,
-					organizationId
-				};
-				const res = await api.homeApi.getCameraApi({
-					params: httpData,
-					custom: {
-						load: false
-					}
-				})
-				if (res) {
-					uni.stopPullDownRefresh();
-					this.mescroll.endBySize(res.items.length, res.total);
-					this.cameraTotal = res.total;
-					if(!res.items.length && res.total==0){
-						this.mescroll.showEmpty()
-					}else{
-						this.mescroll.removeEmpty()
-					}
+		 getPlaySource(items) {
+			for (let item of items) {
+				if (item.accessMode === 1) {
+					api.homeApi.byCameraIdGetDetailApi(item.id).then(res => {
+						item.videoUrl = res.data.url
+					})
+				}
+				if (item.accessMode === 2) {
+					const { deviceId, channelNo } = item.params || {}
+					try {
+						api.homeApi.getCameraGBTUrl(deviceId, channelNo).then(res => {
+							const { data: { flv,fmp4,hls } } = res || {}
+							item.videoUrl = hls
+						})
 
-					for(let item of res.items){
-						if(item.accessMode===1){
-							item.videoUrl = (await api.homeApi.byCameraIdGetDetailApi(item.id)).data.url
-						}
-						if(item.accessMode === 2){
-							const {deviceId,channelNo} = item.params || {}
-							try{
-								const result = await api.homeApi.getCameraGBTUrl(deviceId,channelNo)
-								const {data:{flv}} = result || {}
-								item.videoUrl = flv
-							}catch(err){
-								console.log(err,'error')
-							}
-						}
-					}
 
-					if (pageNo == 1) {
-						this.list = res.items;
-					} else {
-						this.list = this.list.concat(res.items);
+					} catch (err) {
+						console.log(err, 'error')
 					}
 				}
-			},
-			//播放视频
-			async playVideo(e) {
-				const {currentTarget: {dataset: {accessmode,id}} = {}} = e
-				// let currentId = 'video' + id;
-				// const videoContext = uni.createVideoContext(currentId, this);
-				// videoContext.play()
-				/**
-				 * 点击全屏播放当前视频，暂停其余视频
-				 * 兼容APP和MP端
-				 */
-				this.videoContent = uni.createVideoContext(currentId, this);
-				this.videoContent.requestFullScreen();
-				// 获取视频列表
-				let trailer = this.list;
-				trailer.forEach((item, index) => {
-					if (item.videoUrl != null && item.videoUrl != '') {
-						let temp = 'video' + item.id;
-						if (temp != currentId) {
-							//暂停不是当前的视频
-							uni.createVideoContext(temp, this).pause();
-						}
-					}
-				});
-			},
-			openOrg() {
-				useNavigateTo('/pages/organization/organization')
 			}
-		}
-	};
+		},
+		//播放视频
+		async playVideo(e) {
+			const { currentTarget: { dataset: { accessmode, id } } = {} } = e
+			let currentId = 'video' + id;
+			// const videoContext = uni.createVideoContext(currentId, this);
+			// videoContext.play()
+			/**
+			 * 点击全屏播放当前视频，暂停其余视频
+			 * 兼容APP和MP端
+			 */
+			// this.videoContent = uni.createVideoContext(currentId, this)
+			// this.videoContent.requestFullScreen()
+			// 获取视频列表
+			let trailer = this.list
+			trailer.forEach((item, index) => {
+				if (item.videoUrl != null && item.videoUrl != '') {
+					let temp = 'video' + item.id
+					if (temp != currentId) {
+						//暂停不是当前的视频
+						uni.createVideoContext(temp, this).pause()
+					}
+				}
+			})
+		},
+		openOrg() {
+			useNavigateTo('/pages/organization/organization')
+		},
+	},
+}
 </script>
 
 <style lang="scss" scoped>
-	@import '../../static/camera.scss';
+@import '../../static/camera.scss';
 </style>