@@ -51,7 +51,7 @@ | |||||
}; | }; | ||||
var player = new Aliplayer(options, function () {/* player ready */ }); | var player = new Aliplayer(options, function () {/* player ready */ }); | ||||
player.setVolume(0) | |||||
// 降级时会触发此事件 | // 降级时会触发此事件 | ||||
player.on('rtsFallback', function (event) { | player.on('rtsFallback', function (event) { | ||||
console.log('[EVENT]rtsFallback', event.paramData); | console.log('[EVENT]rtsFallback', event.paramData); | ||||
@@ -66,7 +66,6 @@ | |||||
// 当RTS拉流成功时触发,通过订阅该事件,可以获取到RTS TraceId | // 当RTS拉流成功时触发,通过订阅该事件,可以获取到RTS TraceId | ||||
player.on('rtsTraceId', function (data) { | player.on('rtsTraceId', function (data) { | ||||
console.log('[EVENT]rtsTraceId', data.paramData); | console.log('[EVENT]rtsTraceId', data.paramData); | ||||
player.setVolume(0) | |||||
let fullscreenBtn = document.querySelector('.prism-controlbar .prism-fullscreen-btn') | let fullscreenBtn = document.querySelector('.prism-controlbar .prism-fullscreen-btn') | ||||
if(fullscreenBtn)fullscreenBtn.style.display = 'none' | if(fullscreenBtn)fullscreenBtn.style.display = 'none' | ||||
// event.paramData.traceId 拉流的TraceId | // event.paramData.traceId 拉流的TraceId | ||||
@@ -144,5 +144,10 @@ defineExpose({ | |||||
}); | }); | ||||
</script> | </script> | ||||
<style lang="scss" scoped></style> | |||||
<style lang="scss" scoped> | |||||
.detailpic { | |||||
max-width: 100%; | |||||
object-fit: cover; | |||||
} | |||||
</style> | |||||
@@ -192,6 +192,10 @@ onMounted(async () => { | |||||
}); | }); | ||||
</script> | </script> | ||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
.detailpic { | |||||
max-width: 100%; | |||||
object-fit: cover; | |||||
} | |||||
.table-box { | .table-box { | ||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
@@ -137,5 +137,10 @@ defineExpose({ | |||||
}); | }); | ||||
</script> | </script> | ||||
<style lang="scss" scoped></style> | |||||
<style lang="scss" scoped> | |||||
.detailpic { | |||||
max-width: 100%; | |||||
object-fit: cover; | |||||
} | |||||
</style> | |||||
@@ -124,5 +124,10 @@ defineExpose({ | |||||
}); | }); | ||||
</script> | </script> | ||||
<style lang="scss" scoped></style> | |||||
<style lang="scss" scoped> | |||||
.detailpic { | |||||
max-width: 100%; | |||||
object-fit: cover; | |||||
} | |||||
</style> | |||||
@@ -117,13 +117,15 @@ const showRts = sensorId_ => { | |||||
let rtsUrl_ = "/static/rtsPlayer.html?height=556px&rtsUrl="; | let rtsUrl_ = "/static/rtsPlayer.html?height=556px&rtsUrl="; | ||||
sensorId.value = sensorId_; | sensorId.value = sensorId_; | ||||
screenApi.detail({ sensorId: sensorId_ }).then(res => { | screenApi.detail({ sensorId: sensorId_ }).then(res => { | ||||
if (res.code == 200) { | |||||
if (res.data.rtsPullStreamUrls[0]) { | |||||
rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url; | |||||
} | |||||
streamId.value = res.data.streamId; | |||||
videoToken.value = res.data.videoToken; | |||||
} | |||||
// if (res.code == 200) { | |||||
// if (res.data.rtsPullStreamUrls[0]) { | |||||
// rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url; | |||||
// } | |||||
// streamId.value = res.data.streamId; | |||||
// videoToken.value = res.data.videoToken; | |||||
// } | |||||
// 演示 | |||||
rtsUrl.value = rtsUrl_ + "http://123.57.209.16:8004/video/5.mp4"; | |||||
}); | }); | ||||
} | } | ||||
}; | }; | ||||
@@ -16,7 +16,6 @@ | |||||
</div> | </div> | ||||
<!-- --> | <!-- --> | ||||
<div style="width: 794px; height: 487px; padding-top: 26px"> | <div style="width: 794px; height: 487px; padding-top: 26px"> | ||||
<!-- <img src="/static/screen/testimg/2.png" alt="" style="width: 100%; height: 100%" /> --> | |||||
<iframe id="rtsIframe" style="width: 100%; height: 100%" :src="rtsUrl" frameborder="0"></iframe> | <iframe id="rtsIframe" style="width: 100%; height: 100%" :src="rtsUrl" frameborder="0"></iframe> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -122,12 +121,22 @@ const itemClick = item => { | |||||
let rtsUrl_ = "/static/rtsPlayer.html?height=487px&rtsUrl="; | let rtsUrl_ = "/static/rtsPlayer.html?height=487px&rtsUrl="; | ||||
sensorId.value = item.sensorId; | sensorId.value = item.sensorId; | ||||
screenApi.detail({ sensorId: item.sensorId }).then(res => { | screenApi.detail({ sensorId: item.sensorId }).then(res => { | ||||
if (res.code == 200) { | |||||
if (res.data.rtsPullStreamUrls[0]) { | |||||
rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url; | |||||
} | |||||
streamId.value = res.data.streamId; | |||||
videoToken.value = res.data.videoToken; | |||||
// if (res.code == 200) { | |||||
// if (res.data.rtsPullStreamUrls[0]) { | |||||
// rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url; | |||||
// } | |||||
// streamId.value = res.data.streamId; | |||||
// videoToken.value = res.data.videoToken; | |||||
// } | |||||
// 演示 | |||||
if (item.sensorName == "厨房(良景)") { | |||||
rtsUrl.value = rtsUrl_ + "http://123.57.209.16:8004/video/4.mp4"; | |||||
} | |||||
if (item.sensorName == "大厅(魔豆)") { | |||||
rtsUrl.value = rtsUrl_ + "http://123.57.209.16:8004/video/2.mp4"; | |||||
} | |||||
if (item.sensorName == "教学区域(海康)") { | |||||
rtsUrl.value = rtsUrl_ + "http://123.57.209.16:8004/video/5.mp4"; | |||||
} | } | ||||
}); | }); | ||||
}; | }; | ||||
@@ -132,13 +132,15 @@ const showRts = sensorId_ => { | |||||
let rtsUrl_ = "/static/rtsPlayer.html?height=446px&rtsUrl="; | let rtsUrl_ = "/static/rtsPlayer.html?height=446px&rtsUrl="; | ||||
sensorId.value = sensorId_; | sensorId.value = sensorId_; | ||||
screenApi.detail({ sensorId: sensorId_ }).then(res => { | screenApi.detail({ sensorId: sensorId_ }).then(res => { | ||||
if (res.code == 200) { | |||||
if (res.data.rtsPullStreamUrls[0]) { | |||||
rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url; | |||||
} | |||||
streamId.value = res.data.streamId; | |||||
videoToken.value = res.data.videoToken; | |||||
} | |||||
// if (res.code == 200) { | |||||
// if (res.data.rtsPullStreamUrls[0]) { | |||||
// rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url; | |||||
// } | |||||
// streamId.value = res.data.streamId; | |||||
// videoToken.value = res.data.videoToken; | |||||
// } | |||||
// 演示 | |||||
rtsUrl.value = rtsUrl_ + "http://123.57.209.16:8004/video/5.mp4"; | |||||
}); | }); | ||||
} | } | ||||
}; | }; | ||||