h5player播放接口添加
This commit is contained in:
chenchenzai
parent
ffbf434cd7
commit
c619d24cf9
|
|
@ -117,11 +117,22 @@ export function getPlaceType() {
|
|||
//西海岸 根据标签树查询视频列表
|
||||
export function CameraConditionPlaceType(params) {
|
||||
return axios.post(
|
||||
'http://10.134.135.92:9537/data_service/getCamera/CameraConditionPlaceType',
|
||||
'http://10.134.135.92:9537/data_service/getCamera/CameraConditionPlaceType' +
|
||||
params,
|
||||
config2
|
||||
)
|
||||
}
|
||||
|
||||
// 西海岸视频wss流获取
|
||||
export function getCameraLiveStream(params) {
|
||||
return axios.get(
|
||||
'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' +
|
||||
params.channelId +
|
||||
'&protocol=' +
|
||||
'wss' + '&transmode=1&streamType=1',
|
||||
config2
|
||||
)
|
||||
}
|
||||
// 西海岸--获取摄像头列表的后台地址 (测试环境地址：10.134.135.92:9537)
|
||||
let _cameraUrl =
|
||||
(_global &&
|
||||
|
|
|
|||
|
|
@ -1734,8 +1734,9 @@ export function MapFun(mapObj) {
|
|||
// })
|
||||
// }
|
||||
marker.on('click', e => {
|
||||
console.log('点位数据', e)
|
||||
clickDataList.push(e.resourceData);
|
||||
//console.log('点位数据', e)
|
||||
//console.log('点位数据1', e.sourceTarget.resourceData)
|
||||
clickDataList.push(e.sourceTarget.resourceData);
|
||||
// 判断是否需要选中之后更换marker的图标
|
||||
//const layers = layerGroup.get(layerName).getLayers()
|
||||
// layers.forEach((layer) => {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<script>
|
||||
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
|
||||
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
||||
import { message } from 'ant-design-vue'
|
||||
export default {
|
||||
name: 'H5Player',
|
||||
props: {
|
||||
|
|
@ -57,7 +58,19 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
|||
this.createPlayer()
|
||||
this.arrangeWindow()
|
||||
//videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
|
||||
this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
|
||||
this.realplay(this.videoUrl,0);
|
||||
//this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
|
||||
},
|
||||
watch: {
|
||||
videoUrl: {
|
||||
// 数据发生变化就会调用这个函数
|
||||
handler(newVal, oldVal) {
|
||||
console.log('oldVal:', oldVal)
|
||||
console.log('newVal:', newVal)
|
||||
},
|
||||
// 立即处理 进入页面就触发
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 海康视频初始化加载
|
||||
|
|
@ -127,7 +140,10 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
|||
() => {
|
||||
console.log('realplay success')
|
||||
},
|
||||
e => { console.error(e) }
|
||||
e => {
|
||||
console.error(e);
|
||||
message.error('请联系视频提供方!')
|
||||
}
|
||||
)
|
||||
},
|
||||
// 关闭所有视频
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@
|
|||
<h5-player :video-url="videoUrl"></h5-player>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
<span>{{defaultIndex}}</span>/<span>{{cameraDataList.length}}</span>
|
||||
<span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>
|
||||
</div>
|
||||
<div class="footer-button">
|
||||
<a-button type="primary" @click="applyNow(url)">立即申请</a-button>
|
||||
<a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button>
|
||||
<a-button type="primary" @click="applyNow(cameraDataList[defaultIndex])">立即申请</a-button>
|
||||
<a-button type="primary" style="margin-left:20px" @click="addIntoCart(cameraDataList[defaultIndex])">加入申购车</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,9 +46,11 @@
|
|||
LeftCircleOutlined,
|
||||
RightCircleOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import H5Player from '@/views/home/components/H5Player.vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { getStreamByChannelCode } from '@/api/videoSurveillance'
|
||||
import {getCameraLiveStream} from '@/api/file'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
|
|
@ -65,7 +67,9 @@
|
|||
},
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
|
||||
},
|
||||
// directives: {
|
||||
// viewer: viewer({
|
||||
// debug: true,
|
||||
|
|
@ -76,7 +80,8 @@
|
|||
openVideo: false,
|
||||
videoStream: '',
|
||||
videoUrl:'', //视频预览url
|
||||
defaultIndex:0//默认显示列表中的对一个
|
||||
defaultIndex:0,//默认显示列表中的对一个
|
||||
router:useRouter()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -90,32 +95,59 @@
|
|||
//立即申请
|
||||
applyNow(item){
|
||||
console.log('applyNowapplyNow',item);
|
||||
mybus.emit('selectCamera', item)
|
||||
//跳转至申请页面
|
||||
this.router.push({
|
||||
path: '/apply',
|
||||
query: {
|
||||
|
||||
},
|
||||
})
|
||||
},
|
||||
//加入申购车
|
||||
addIntoCart(item){
|
||||
console.log('addIntoCartaddIntoCart',item);
|
||||
mybus.emit('selectCamera', item)
|
||||
},
|
||||
//获取视频控件所需播放地址
|
||||
getVideoUrl(data){
|
||||
let param = data;
|
||||
getCameraLiveStream(param).then((res) => {
|
||||
//console.log('555555rrrrr',res)
|
||||
if(res.data.data){
|
||||
this.videoUrl = res.data.data.url;
|
||||
}
|
||||
//visible.value = true
|
||||
//options.src = res.data.data
|
||||
//options.src ="wss://10.134.135.45:6014/proxy/10.10.20.15:559/openUrl/0kIF7La"
|
||||
})
|
||||
},
|
||||
//查看前一个
|
||||
handlePrev(){
|
||||
let maxLength = this.cameraDataList.length-1;
|
||||
this.defaultIndex = this.defaultIndex - 1;
|
||||
console.log('opopopop',this.cameraDataList[maxLength]);
|
||||
if(this.defaultIndex === 0){
|
||||
this.defaultIndex = maxLength;
|
||||
console.log('opopopop',this.cameraDataList[maxLength]);
|
||||
//根据当前数据的channelId查询视频播放的url传递给H5组件调用接口
|
||||
//this.videoUrl =
|
||||
this.getVideoUrl(this.cameraDataList[maxLength]);
|
||||
} else{
|
||||
this.defaultIndex = this.defaultIndex - 1;
|
||||
console.log('uyutyuyopopopop',this.cameraDataList[this.defaultIndex]);
|
||||
this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
|
||||
}
|
||||
|
||||
},
|
||||
//查看下一个
|
||||
handleNext(){
|
||||
this.defaultIndex = this.defaultIndex + 1;
|
||||
if(this.defaultIndex === this.cameraDataList.length){
|
||||
this.defaultIndex = this.cameraDataList.length;
|
||||
console.log('opopopop',this.cameraDataList[0]);
|
||||
this.getVideoUrl(this.cameraDataList[0]);
|
||||
}else{
|
||||
this.defaultIndex = this.defaultIndex + 1;
|
||||
console.log('opopopop',this.cameraDataList[this.defaultIndex]);
|
||||
this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -224,6 +224,12 @@ import { ElMessage } from 'element-plus'
|
|||
this.queryCameraConditionPlace(data)
|
||||
|
||||
})
|
||||
|
||||
//清空地图上所有数据
|
||||
mybus.off('clearLeftSelect')
|
||||
mybus.on('clearLeftSelect', () => {
|
||||
this.hiMapFun.clearAllLayers();
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//查询标签视频
|
||||
|
|
|
|||
Loading…
Reference in New Issue