简柏林 / thingskit-app · Commits

Commit 2234b04562ed76f00d1ac06659a0e6bdcf206834

Authored by loveumiko
1 parent 289d74b8

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

Inline Side-by-side
Showing 1 changed file with 156 additions and 133 deletions
@@ -3,30 +3,30 @@ @@ -3,30 +3,30 @@
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 <header-org @openOrg="openOrg" :total="cameraTotal" title="摄像头数：" :imageSrc="imageSrc"></header-org> 5 <header-org @openOrg="openOrg" :total="cameraTotal" title="摄像头数：" :imageSrc="imageSrc"></header-org>
6 - <view style="height: 150rpx;"></view> 6 + <view style="height: 150rpx"></view>
7 <!-- 自带分页组件 --> 7 <!-- 自带分页组件 -->
8 - <mescroll-body height="80%" ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback"  
9 - @up="upCallback"> 8 + <mescroll-body height="80%" ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption"
  9 + @down="downCallback" @up="upCallback">
10 <view class="camera-container"> 10 <view class="camera-container">
11 <view class="container-item"> 11 <view class="container-item">
12 <!-- #ifdef MP-WEIXIN --> 12 <!-- #ifdef MP-WEIXIN -->
13 - <view v-for="(item, index) in list" :key="item.id" class="item" > 13 + <view v-for="(item, index) in list" :key="item.id" class="item">
14 <video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none" 14 <video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none"
15 :id="'video' + item.id" class="video" :src="item.videoUrl" controls :title="item.name" 15 :id="'video' + item.id" class="video" :src="item.videoUrl" controls :title="item.name"
16 - x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn  
17 - :poster="item.avatar" @play="playVideo"></video>  
18 - <view class="bottom-text text-clip w-300"> 16 + x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn :poster="item.avatar"
  17 + @play="playVideo"></video>
  18 + <view class="bottom-text text-clip w-300">
19 <text class="text">{{ item.name }}</text> 19 <text class="text">{{ item.name }}</text>
20 </view> 20 </view>
21 </view> 21 </view>
22 <!-- #endif --> 22 <!-- #endif -->
23 <!-- #ifdef APP-PLUS --> 23 <!-- #ifdef APP-PLUS -->
24 - <cover-view v-for="(item, index) in list" :key="item.id" class="item" style="overflow: hidden;"> 24 + <cover-view v-for="(item, index) in list" :key="item.id" class="item" style="overflow: hidden">
25 <video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none" 25 <video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none"
26 :id="'video' + item.id" class="video" :src="item.videoUrl" controls :title="item.name" 26 :id="'video' + item.id" class="video" :src="item.videoUrl" controls :title="item.name"
27 - x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn  
28 - :poster="item.avatar" @play="playVideo"></video>  
29 - <cover-view class="bottom-text text-clip w-300"> 27 + x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn :poster="item.avatar"
  28 + @play="playVideo"></video>
  29 + <cover-view class="bottom-text text-clip w-300">
30 <cover-view class="text">{{ item.name }}</cover-view> 30 <cover-view class="text">{{ item.name }}</cover-view>
31 </cover-view> 31 </cover-view>
32 </cover-view> 32 </cover-view>
@@ -36,143 +36,166 @@ @@ -36,143 +36,166 @@
36 <!-- <mescroll-empty v-if="!list.length" /> --> 36 <!-- <mescroll-empty v-if="!list.length" /> -->
37 </mescroll-body> 37 </mescroll-body>
38 <!-- 自带分页组件 --> 38 <!-- 自带分页组件 -->
39 - <view style="height: 60rpx;"></view> 39 + <view style="height: 60rpx"></view>
40 </view> 40 </view>
41 </template> 41 </template>
42 42
43 <script> 43 <script>
44 - import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';  
45 - import api from '@/api/index.js'  
46 - import {  
47 - useNavigateTo  
48 - } from '@/plugins/utils.js'  
49 - import headerOrg from '@/components/common/header-org.vue' 44 +import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
  45 +import api from '@/api/index.js'
  46 +import { useNavigateTo } from '@/plugins/utils.js'
  47 +import headerOrg from '@/components/common/header-org.vue'
50 48
51 - export default {  
52 - mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)  
53 - components:{  
54 - headerOrg 49 +export default {
  50 + mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
  51 + components: {
  52 + headerOrg,
  53 + },
  54 + data() {
  55 + return {
  56 + imageSrc: '/static/camer.png',
  57 + page: {
  58 + num: 0,
  59 + size: 10,
  60 + },
  61 + downOption: {
  62 + auto: true, //是否在初始化后,自动执行downCallback; 默认true
  63 + },
  64 + upOption: {
  65 + auto: false, // 不自动加载
  66 + },
  67 + current: 0,
  68 + cameraTotal: 0,
  69 + list: [],
  70 + ordId: '',
  71 + }
  72 + },
  73 + onShow() {
  74 + if (this.ordId) {
  75 + this.loadData(1, this.ordId)
  76 + }
  77 + },
  78 + onHide() {
  79 + this.ordId = ''
  80 + },
  81 + onLoad() {
  82 + // 隐藏原生的tabbar
  83 + uni.hideTabBar()
  84 + },
  85 + methods: {
  86 + /*下拉刷新的回调 */
  87 + downCallback() {
  88 + //联网加载数据
  89 + this.page.num = 1
  90 + this.loadData(1)
55 }, 91 },
56 - data() {  
57 - return {  
58 - imageSrc:'/static/camer.png',  
59 - page: {  
60 - num: 0,  
61 - size: 10  
62 - },  
63 - downOption: {  
64 - auto: true //是否在初始化后,自动执行downCallback; 默认true  
65 - },  
66 - upOption: {  
67 - auto: false // 不自动加载  
68 - },  
69 - current: 0,  
70 - cameraTotal: 0,  
71 - list: [],  
72 - ordId: '',  
73 - }; 92 + /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  93 + upCallback() {
  94 + //联网加载数据
  95 + this.page.num += 1
  96 + this.loadData(this.page.num)
74 }, 97 },
75 - onShow() {  
76 - if (this.ordId) {  
77 - this.loadData(1, this.ordId); 98 + async loadData(pageNo, organizationId) {
  99 + let httpData = {
  100 + page: pageNo,
  101 + pageSize: 10,
  102 + organizationId,
  103 + }
  104 + const res = await api.homeApi.getCameraApi({
  105 + params: httpData,
  106 + custom: {
  107 + load: false,
  108 + },
  109 + })
  110 + if (res) {
  111 + uni.stopPullDownRefresh()
  112 + this.mescroll.endBySize(res.items.length, res.total)
  113 + this.cameraTotal = res.total
  114 + if (!res.items.length && res.total == 0) {
  115 + this.mescroll.showEmpty()
  116 + } else {
  117 + this.mescroll.removeEmpty()
  118 + }
  119 + // this.list = res.items
  120 + this.getPlaySource(res.items)
  121 + // this.$nextTick(()=>{
  122 + // for(let item of res.items){
  123 + // if(item.accessMode===1){
  124 + // item.videoUrl = ( api.homeApi.byCameraIdGetDetailApi(item.id)).data.url
  125 + // }
  126 + // if(item.accessMode === 2){
  127 + // const {deviceId,channelNo} = item.params || {}
  128 + // try{
  129 + // const result = api.homeApi.getCameraGBTUrl(deviceId,channelNo)
  130 + // const {data:{flv}} = result || {}
  131 + // item.videoUrl = flv
  132 + // }catch(err){
  133 + // console.log(err,'error')
  134 + // }
  135 + // }
  136 + // }
  137 + // })
  138 +
  139 + if (pageNo == 1) {
  140 + this.list = res.items
  141 + } else {
  142 + this.list = this.list.concat(res.items)
  143 + }
78 } 144 }
79 }, 145 },
80 - onHide() {  
81 - this.ordId = '';  
82 - },  
83 - onLoad() {  
84 - // 隐藏原生的tabbar  
85 - uni.hideTabBar();  
86 - },  
87 - methods: {  
88 - /*下拉刷新的回调 */  
89 - downCallback() {  
90 - //联网加载数据  
91 - this.page.num = 1;  
92 - this.loadData(1);  
93 - },  
94 - /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */  
95 - upCallback() {  
96 - //联网加载数据  
97 - this.page.num += 1;  
98 - this.loadData(this.page.num);  
99 - },  
100 - async loadData(pageNo, organizationId) {  
101 - let httpData = {  
102 - page: pageNo,  
103 - pageSize: 10,  
104 - organizationId  
105 - };  
106 - const res = await api.homeApi.getCameraApi({  
107 - params: httpData,  
108 - custom: {  
109 - load: false  
110 - }  
111 - })  
112 - if (res) {  
113 - uni.stopPullDownRefresh();  
114 - this.mescroll.endBySize(res.items.length, res.total);  
115 - this.cameraTotal = res.total;  
116 - if(!res.items.length && res.total==0){  
117 - this.mescroll.showEmpty()  
118 - }else{  
119 - this.mescroll.removeEmpty()  
120 - } 146 + getPlaySource(items) {
  147 + for (let item of items) {
  148 + if (item.accessMode === 1) {
  149 + api.homeApi.byCameraIdGetDetailApi(item.id).then(res => {
  150 + item.videoUrl = res.data.url
  151 + })
  152 + }
  153 + if (item.accessMode === 2) {
  154 + const { deviceId, channelNo } = item.params || {}
  155 + try {
  156 + api.homeApi.getCameraGBTUrl(deviceId, channelNo).then(res => {
  157 + const { data: { flv,fmp4,hls } } = res || {}
  158 + item.videoUrl = hls
  159 + })
121 160
122 - for(let item of res.items){  
123 - if(item.accessMode===1){  
124 - item.videoUrl = (await api.homeApi.byCameraIdGetDetailApi(item.id)).data.url  
125 - }  
126 - if(item.accessMode === 2){  
127 - const {deviceId,channelNo} = item.params || {}  
128 - try{  
129 - const result = await api.homeApi.getCameraGBTUrl(deviceId,channelNo)  
130 - const {data:{flv}} = result || {}  
131 - item.videoUrl = flv  
132 - }catch(err){  
133 - console.log(err,'error')  
134 - }  
135 - }  
136 - }  
137 161
138 - if (pageNo == 1) {  
139 - this.list = res.items;  
140 - } else {  
141 - this.list = this.list.concat(res.items); 162 + } catch (err) {
  163 + console.log(err, 'error')
142 } 164 }
143 } 165 }
144 - },  
145 - //播放视频  
146 - async playVideo(e) {  
147 - const {currentTarget: {dataset: {accessmode,id}} = {}} = e  
148 - // let currentId = 'video' + id;  
149 - // const videoContext = uni.createVideoContext(currentId, this);  
150 - // videoContext.play()  
151 - /**  
152 - * 点击全屏播放当前视频，暂停其余视频  
153 - * 兼容APP和MP端  
154 - */  
155 - this.videoContent = uni.createVideoContext(currentId, this);  
156 - this.videoContent.requestFullScreen();  
157 - // 获取视频列表  
158 - let trailer = this.list;  
159 - trailer.forEach((item, index) => {  
160 - if (item.videoUrl != null && item.videoUrl != '') {  
161 - let temp = 'video' + item.id;  
162 - if (temp != currentId) {  
163 - //暂停不是当前的视频  
164 - uni.createVideoContext(temp, this).pause();  
165 - }  
166 - }  
167 - });  
168 - },  
169 - openOrg() {  
170 - useNavigateTo('/pages/organization/organization')  
171 } 166 }
172 - }  
173 - }; 167 + },
  168 + //播放视频
  169 + async playVideo(e) {
  170 + const { currentTarget: { dataset: { accessmode, id } } = {} } = e
  171 + let currentId = 'video' + id;
  172 + // const videoContext = uni.createVideoContext(currentId, this);
  173 + // videoContext.play()
  174 + /**
  175 + * 点击全屏播放当前视频，暂停其余视频
  176 + * 兼容APP和MP端
  177 + */
  178 + // this.videoContent = uni.createVideoContext(currentId, this)
  179 + // this.videoContent.requestFullScreen()
  180 + // 获取视频列表
  181 + let trailer = this.list
  182 + trailer.forEach((item, index) => {
  183 + if (item.videoUrl != null && item.videoUrl != '') {
  184 + let temp = 'video' + item.id
  185 + if (temp != currentId) {
  186 + //暂停不是当前的视频
  187 + uni.createVideoContext(temp, this).pause()
  188 + }
  189 + }
  190 + })
  191 + },
  192 + openOrg() {
  193 + useNavigateTo('/pages/organization/organization')
  194 + },
  195 + },
  196 +}
174 </script> 197 </script>
175 198
176 <style lang="scss" scoped> 199 <style lang="scss" scoped>
177 - @import '../../static/camera.scss'; 200 +@import '../../static/camera.scss';
178 </style> 201 </style>