suojin
/
qilu_hospital_app
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改预案列表数据渲染及视频流播放

Browse Source
main
jinna 2 years ago
parent 99eb0bfa44
commit 7ff6fe2371
19 changed files with 4550 additions and 4743 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      pages/H5player/index.vue
  2. 15
      pages/message/detail.vue
  3. 56
      pages/message/list.vue
  4. 18
      pages/patrolRecord/report.vue
  5. 17
      pages/positionRecord/report.vue
  6. 11
      pages/setting/other.vue
  7. 16
      pages/voiceRecord/report.vue
  8. 1270
      static/html/webpalyer.html
  9. 755
      static/html/webpalyer_copy.html
  10. 521
      static/html/webpalyer_copy1.html
  11. 2
      unpackage/dist/dev/app-plus/app-config-service.js
  12. 2224
      unpackage/dist/dev/app-plus/app-service.js
  13. 1828
      unpackage/dist/dev/app-plus/app-view.js
  14. 2
      unpackage/dist/dev/app-plus/manifest.json
  15. 1270
      unpackage/dist/dev/app-plus/static/html/webpalyer.html
  16. 755
      unpackage/dist/dev/app-plus/static/html/webpalyer_copy.html
  17. 521
      unpackage/dist/dev/app-plus/static/html/webpalyer_copy1.html
  18. 2
      unpackage/dist/dev/app-plus/view.css
  19. 2
      unpackage/dist/dev/app-plus/view.umd.min.js

8
pages/H5player/index.vue
Unescape View File

@ -51,10 +51,10 @@
previewURLs() {
// 视频流需要根据监控设备编号获取 接口请求这里省略
// cameraUrl 走后台接口获取到监控的视频流
// this.webURL =
// '/static/html/webpalyer.html?carmeraCode=' + encodeURIComponent(JSON.stringify(this.cameraList))
this.webURL =
'/static/html/webpalyer.html?carmeraCode=' + this.cameraIndexCode + "&cameraUrl=" + this.cameraUrl
this.webURL =
'/static/html/webpalyer.html?carmeraCode=' + encodeURIComponent(JSON.stringify(this.cameraList))
// this.webURL =
// '/static/html/webpalyer.html?carmeraCode=' + this.cameraIndexCode + "&cameraUrl=" + this.cameraUrl
// this.webURL = "/static/html/webplayer.html?cameraIndexCode=" + this.cameraIndexCode + "&cameraUrl=" + this.cameraUrl
}
}

15
pages/message/detail.vue
Unescape View File

@ -49,7 +49,7 @@
onLoad(options) {
console.log('详情options ===>',options,)
this.detailInfo = options.data ? JSON.parse(options.data) : {};
this.queryVideo(this.detailInfo.deviceId);
this.queryVideo(this.detailInfo);
},
methods: {
//报警位置地图定位
@ -59,8 +59,17 @@
})
},
//查询报警点摄像头
queryVideo(deviceId) {
this.videoList = [{name:'摄像头1'}]
queryVideo(row) {
let code = row.cameraCode;
this.videoList = []
if(code != ''){
code.split('-').map((item1,index)=>{
this.videoList.push({name:'摄像头' + (index + 1),code:item1})
})
}else{
this.videoList = []
}
// this.videoList = [{name:'摄像头1'}]
// let token = uni.getStorageSync('bizToken');
// if(token == undefined || !token) {
// uni.request({

56
pages/message/list.vue
Unescape View File

@ -40,34 +40,34 @@
if (this.hasMore) {
this.current = this.current + 1;
this.staus = 'loading';
console.log('url =====>',getApp().globalData.apiUrl)
this.dataList = [
{deviceId:'001',deviceName:'001',productName:'检测器',buildId:'1',floorNo:'-3',longidute:'120.42052988196423',latidute:'36.112521198229985'}
]
this.hasMore = false;
this.status = 'nomore';
// uni.request({
// url: getApp().globalData.apiUrl + '/alarmInformation/list?status=1&current=' + this.current + '&size=' + this.size,
// method: 'GET',
// success: (res) => {
// console.log('res ====>',res)
// if(res.data.code == 200){
// this.dataList = this.dataList.concat(res.data.data.records);
// if(res.data.data.records.length == 0 || res.data.data.total < this.size){
// this.hasMore = false;
// this.status = 'nomore';
// }
// else{
// this.status = 'more';
// }
// }else{
// uni.showToast({
// title: res.data.msg,
// icon: 'none'
// })
// }
// }
// })
// console.log('url =====>',getApp().globalData.apiUrl)
// this.dataList = [
// {deviceId:'001',deviceName:'001',productName:'检测器',buildId:'1',floorNo:'-3',longidute:'120.42052988196423',latidute:'36.112521198229985'}
// ]
// this.hasMore = false;
// this.status = 'nomore';
uni.request({
url: getApp().globalData.apiUrl + '/alarmInformation/list?status=1&current=' + this.current + '&size=' + this.size + '&type=1103&alarmType=1',
method: 'GET',
success: (res) => {
console.log('res ====>',res)
if(res.data.code == 200){
this.dataList = this.dataList.concat(res.data.data.records);
if(res.data.data.records.length == 0 || res.data.data.total < this.size){
this.hasMore = false;
this.status = 'nomore';
}
else{
this.status = 'more';
}
}else{
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
}
})
}
},
goDetail(data) {

18
pages/patrolRecord/report.vue
Unescape View File

@ -193,9 +193,21 @@
// url: "http://172.19.2.177:8081/GetAllPlanInfo",
url: getApp().globalData.mobileUrl + "/GetAllPlanInfo",
success: (data) => {
let _data = JSON.parse(data);
if (_data.code == 200) {
_data.data.forEach(item => {
// let _data = JSON.parse(data);
// if (_data.code == 200) {
// _data.data.forEach(item => {
// arr.push({
// value:item.planId,
// text:item.planName
// })
// // item.value = item.planId;
// // item.text = item.planName;
// })
// this.planTypeList = arr;
// }
// let _data = JSON.parse(data);
if (data.code == 200) {
data.data.forEach(item => {
arr.push({
value:item.planId,
text:item.planName

17
pages/positionRecord/report.vue
Unescape View File

@ -118,16 +118,25 @@
},
//预案类型
queryPlanTypeList() {
let arr = []
uni.request({
url: getApp().globalData.mobileUrl + "/GetAllPlanInfo",
success: (res) => {
let _data = JSON.parse(res.data);
if (_data.code == 200) {
_data.data.forEach(item => {
// let _data = JSON.parse(res.data);
// if (_data.code == 200) {
// _data.data.forEach(item => {
// item.value = item.planId;
// item.text = item.planName;
// })
// this.planTypeList = _data.data;
// }
// let _data = JSON.parse(res.data);
if (data.code == 200) {
data.data.forEach(item => {
item.value = item.planId;
item.text = item.planName;
})
this.planTypeList = _data.data;
this.planTypeList = data.data;
}
}
})

11
pages/setting/other.vue
Unescape View File

@ -100,8 +100,15 @@
success: (data) => {
let _data = JSON.parse(data);
console.log('_data ====>',_data)
if(_data.code == 200) {
_data.data.forEach(item => {
// if(_data.code == 200) {
// _data.data.forEach(item => {
// item.value = item.planId;
// item.text = item.planName;
// })
// this.planTypeList = _data.data;
// }
if(data.code == 200) {
data.data.forEach(item => {
item.value = item.planId;
item.text = item.planName;
})

16
pages/voiceRecord/report.vue
Unescape View File

@ -221,13 +221,21 @@
// url: "http://172.19.2.177:8081/GetAllPlanInfo",
url:getApp().globalData.mobileUrl + '/GetAllPlanInfo',
success: (data) => {
let _data = JSON.parse(data);
if (_data.code == 200) {
_data.data.forEach(item => {
// let _data = JSON.parse(data);
// if (_data.code == 200) {
// _data.data.forEach(item => {
// item.value = item.planId;
// item.text = item.planName;
// })
// this.planTypeList = _data.data;
// }
// let _data = JSON.parse(data);
if (data.code == 200) {
data.data.forEach(item => {
item.value = item.planId;
item.text = item.planName;
})
this.planTypeList = _data.data;
this.planTypeList = data.data;
}
}
})

1270
static/html/webpalyer.html
View File

File diff suppressed because it is too large Load Diff

755
static/html/webpalyer_copy.html
Unescape View File

@ -1,755 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5playerVue</title>
<link rel="stylesheet" href="./static/css/antd.min.css">
<style>
body {
padding: 8px 8px 32px;
}
#app {
display: none;
}
.actions {
padding-left: 8px;
}
.ant-form-item {
margin-bottom: 8px
}
.ant-btn {
margin-right: 2px;
}
.icon-wrapper {
position: relative;
padding-left: 20px;
}
.icon-wrapper .anticon {
position: absolute;
top: -2px;
width: 16px;
height: 16px;
line-height: 1;
font-size: 16px;
left: 0;
}
::-webkit-media-controls {
display: none !important;
}
@media screen and (max-width: 991px) {
#player {
width: calc(100vw - 16px);
height: calc((100vw - 16px) * 5 / 8);
}
}
@media screen and (min-width: 992px) {
#player {
width: calc(50vw - 8px);
height: calc((50vw - 8px) * 5 / 8);
}
}
</style>
</head>
<body>
<div id="app">
<a-locale-provider :locale="zh_CN">
<a-row>
<a-col :span="24" :md="12">
<a-affix :offset-top="8">
<div id="player"></div>
</a-affix>
<a-form-item>
分屏
<a-radio-group v-model="splitNum" @change="arrangeWindow">
<a-radio-button :value="1">1x1</a-radio-button>
<a-radio-button :value="2">2x2</a-radio-button>
<a-radio-button :value="3">3x3</a-radio-button>
<a-radio-button :value="4">4x4</a-radio-button>
</a-radio-group>
<a-button @click="wholeFullScreen" v-show="!isMoveDevice">整体全屏</a-button>
</a-form-item>
</a-col>
<a-col :span="24" :md="12">
<div class="actions">
<!-- <a-tabs v-model="tabActive">
<a-tab-pane key="mse" tab="普通模式" :disabled="!mseSupport"></a-tab-pane>
<a-tab-pane key="decoder" tab="高级模式"></a-tab-pane>
</a-tabs> -->
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-show="tabActive !== 'log'">
<!-- <a-form-item label="预览URL">
<a-input v-model="urls.realplay"></a-input>
</a-form-item>
<a-form-item label="对讲URL">
<a-input v-model="urls.talk"></a-input>
</a-form-item> -->
<a-form-item label="预览">
<a-button id="btn-realplay" @click="queryLive">开始预览</a-button>
<a-button id="btn-realplay-stop" @click="stopPlay">停止预览</a-button>
<!-- <a-button id="btn-talk-start" @click="talkStart">开始对讲</a-button>
<a-button id="btn-talk-stop" @click="talkStop">停止对讲</a-button> -->
<a-button id="btn-stopall" @click="stopAllPlay">停止全部窗口</a-button>
</a-form-item>
<a-form-item label="回放时间">
<!-- <a-input v-model="urls.playback"></a-input> -->
<!-- <br> -->
<a-date-picker show-time placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss" v-model="playback.startTime"
:value-format="playback.valueFormat">
</a-date-picker>
<a-date-picker show-time placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" v-model="playback.endTime"
:value-format="playback.valueFormat">
</a-date-picker>
</a-form-item>
<a-form-item label="回放">
<a-button id="btn-playback" @click="playbackQuery">开始回放</a-button>
<a-button id="btn-playback-pause" @click="playbackPause">暂停</a-button>
<a-button id="btn-playback-sesume" @click="playbackResume">恢复</a-button>
<a-button id="btn-playback-stop" @click="stopPlay">停止回放</a-button>
<br>
<!-- <a-row>
<a-col :span="16">
<a-button id="btn-playback-slow" @click="playbackSlow">慢放</a-button>
<a-button id="btn-playback-fast" @click="playbackFast">快放</a-button>
<a-button id="btn-playback-one" @click="frameForward"
v-show="tabActive === 'decoder'">单帧</a-button>
<br>
<a-date-picker show-time placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss"
v-model="playback.seekStart" :value-format="playback.valueFormat">
</a-date-picker>
&nbsp;<a-button @click="seekTo">定位</a-button>
</a-col>
<a-col :span="8">
<a-statistic title="当前播放速度" :value="playback.rate"></a-statistic>
</a-col>
</a-row> -->
</a-form-item>
<!-- <a-form-item label="声音">
<a-row>
<a-col :span="10">
<a-button id="btn-sound-open" @click="openSound">开启</a-button>
<a-button id="btn-sound-close" @click="closeSound">关闭</a-button>
</a-col>
<a-col :span="12">
<div class="icon-wrapper">
<a-icon v-if="muted" :component="volumeOffSvg"></a-icon>
<a-icon v-else :component="volumeOnSvg"></a-icon>
<a-slider v-model="volume" :default-value="50" :disabled="muted" @change="setVolume"></a-slider>
</div>
</a-col>
</a-row>
</a-form-item> -->
<a-form-item label="抓图&录像">
<a-button id="btn-capture-jpeg" @click="capture('JPEG')">抓取JPEG</a-button>
<a-button id="btn-capture-bmp" @click="capture('BMP')">抓取BMP</a-button>
<br>
<!-- <a-button id="btn-record-mp4" @click="recordStart('MP4')">录制MP4</a-button>
<a-button id="btn-record-ps" @click="recordStart('PS')">录制PS</a-button>
<a-button id="btn-record-save" @click="recordStop">停止录制并保存文件</a-button> -->
</a-form-item>
<!-- <a-form-item label="视频信息&OSD时间">
<a-button id="btn-video-info" @click="getvideoInfo">获取视频信息</a-button>
<a-button id="btn-ose-time" @click="getOSDTime">获取OSD时间</a-button>
</a-form-item>
<a-form-item label="电子放大&智能信息" v-show="tabActive === 'decoder'">
<a-button id="btn-enlarge-open" @click="enlarge">开启电子放大</a-button>
<a-button id="btn-enlarge-close" @click="enlargeClose">关闭电子放大</a-button>
<a-button id="btn-intellect-open" @click="intellectTrigger(true)">开启智能信息</a-button>
<a-button id="btn-intellect-close" @click="intellectTrigger(false)">关闭智能信息</a-button>
</a-form-item> -->
</a-form>
</div>
</a-col>
</a-row>
</a-locale-provider>
</div>
<template id="play-log">
<div></div>
</template>
<!-- 移动端调试 -->
<script src="./static/js/vconsole.min.js"></script>
<script>
const vc = new VConsole()
</script>
<script src="./static/js/moment.js"></script>
<script src="./static/js/vue.js"></script>
<script src="./static/js/antd.min.js"></script>
<script src="./static/js/jquery-1.12.4.min.js"></script>
<script src="./static/js/antd-with-locales.min.js"></script>
<script src="./h5player.min.js"></script>
<script>
const {
LocaleProvider,
locales
} = window.antd
moment.locale('./static/js/zh-cn.js')
// const baseUrl = 'http://192.168.1.34:81'
// const baseUrl = 'http://192.169.9.252:1883'
const baseUrl = 'http://171.16.8.51:1888'
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
const params = location.href;
const code = params.substring(params.indexOf('?carmeraCode=') + 13)
const list = JSON.parse(decodeURIComponent(code))
// console.log('list =====',list)
// const Log = Vue.component('log', {
// template: '#play-log',
// data() {
// return {
// }
// },
// methods: {
// }
// })
const app = new Vue({
el: '#app',
// components: { Log },
data() {
return {
zh_CN: locales.zh_CN,
isMoveDevice: IS_MOVE_DEVICE,
player: null,
splitNum: IS_MOVE_DEVICE ? 1 : 2,
mseSupport: MSE_IS_SUPPORT,
tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
labelCol: {
span: 5
},
wrapperCol: {
span: 18
},
urls: {
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
},
playback: {
startTime: '',
endTime: '',
valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
seekStart: '2021-07-26T12:00:00',
rate: ''
},
muted: true,
volume: 50,
volumeOnSvg: {
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
},
volumeOffSvg: {
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
}
}
},
computed: {
mode: function() {
return this.tabActive === 'mse' ? 0 : 1
}
},
methods: {
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer() {
// console.log('123123 ====>',list)
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "./",
iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
openDebug: true,
oStyle: {
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
}
})
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: function(iWndIndex) { //插件选中窗口回调
console.log('windowSelect callback: ', iWndIndex);
},
pluginErrorHandler: function(iWndIndex, iErrorCode, oError) { //插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
},
windowEventOver: function(iWndIndex) { //鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function(iWndIndex) { //鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function(iWndIndex) { //鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function(bFull) { //全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function(iWndIndex, iWidth, iHeight) { //首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: function() { //性能不足回调
console.log('performanceLack callback: ');
}
});
this.queryLive()
},
arrangeWindow() {
let splitNum = this.splitNum
console.log(typeof(splitNum))
this.player.JS_ArrangeWindow(splitNum).then(
() => {
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
},
e => {
console.error(e)
}
)
},
wholeFullScreen() {
this.player.JS_FullScreenDisplay(true).then(
() => {
console.log(`wholeFullScreen success`)
},
e => {
console.error(e)
}
)
},
/**
* 视频流查询
*/
//实时监控播放地址查询
queryLive() {
// console.log("视频流查询", list);
console.log('app ====>', baseUrl)
// this.realplay(1, 'ws://171.16.8.53:1883/openUrl/uKPIUtb');
let playUrlList = [];
list.map((code, index) => {
$.ajax({
url: baseUrl + "/api/alarmInformation/preview", //要请求的后端地址
type: "GET", //数据发送的方式(POST或者GET)
data: {
// cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code
cameraIndexCode: 'a639bb55c237414f8c487c409d5789c7'
}, //需要传递的参数
// dataType: "json", //后端返回的数据格式
success: (res => { //ajax请求成功后触发的方法
console.log('result ====>', res); //result为响应内容
if (res.code == 0 || res.code == 200) {
playUrlList.push({
name: '摄像头一',
code: 'a639bb55c237414f8c487c409d5789c7',
url: res.data
});
this.playUrlList = playUrlList;
this.realplay(index, res.data);
}
}),
error: (err => {
// console.log('error =====>',err)
playUrlList.push({
name: code.name,
code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code,
url: 'ws://171.16.8.53:1883/openUrl/uKPIUtb'
});
this.playUrlList = playUrlList;
this.realplay(index, 'ws://171.16.8.53:1883/openUrl/uKPIUtb');
})
});
// queryLivePreview({ cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code }).then((res) => {
// console.log('res ====>',res)
// if (res.data.code === 0 || res.data.code == 200) {
// playUrlList.push({name:code.name, code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code, url: res.data.data });
// this.playUrlList = playUrlList;
// this.realplay(index, res.data.data);
// }
// // else{
// // playUrlList.push({name:code.name, code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code, url: 'ws://171.16.8.60:559/openUrl/QKCBP32' });
// // this.playUrlList = playUrlList;
// // this.realplay(index, 'ws://171.16.8.60:559/openUrl/QKCBP32');
// // }
// });
});
},
/* 预览&对讲 */
realplay(index, url) {
let {
player,
mode,
// urls
} = this,
// index = player.currentWindowIndex,
playURL = url
console.log('playURL ===>', playURL, mode, index)
console.log('player======>',player)
player.JS_Play(playURL, {
playURL,
mode
}, index).then(
() => {
console.log('播放成功')
},
e => {
console.error('播放失败 ============>',e)
}
)
},
stopPlay() {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0;
console.log('stop realplay success')
},
e => {
console.error(e)
}
)
},
talkStart() {
let url = this.urls.talk
this.player.JS_SetConnectTimeOut(0, 1000)
this.player.JS_StartTalk(url).then(
() => {
console.log('talkStart success')
},
e => {
console.error(e)
}
)
},
talkStop() {
this.player.JS_StopTalk().then(
() => {
console.log('talkStop success')
},
e => {
console.error(e)
}
)
},
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0;
console.log('stopAllPlay success')
},
e => {
console.error(e)
}
)
},
/* 回放 */
playbackQuery() {
if (this.playUrlList.length === 0) {
this.$message.warning("当前没有可播放的摄像头");
return;
}
let startTime = new Date(this.playback.startTime.replace('T'," ")).getTime()
let endTime = new Date(this.playback.endTime.replace('T'," ")).getTime()
console.log('time =====>',startTime,endTime)
if(!startTime || !endTime){
this.$message.warning("开始时间或结束时间不可为空");
return;
}
if(startTime > endTime){
this.$message.warning("开始时间不可晚于结束时间");
return;
}
console.log('payback ===>', this.playUrlList[this.player.currentWindowIndex].playback)
if (
this.playUrlList[this.player.currentWindowIndex].playback != undefined
) {
this.playbackStart();
return;
}
console.log('currentWindowIndex ===>', this.player.currentWindowIndex)
$.ajax({
url:baseUrl + '/alarmInformation/playback',
type:"GET",
data:{
cameraIndexCode: this.playUrlList[this.player.currentWindowIndex].code,
beginTime:this.playback.startTime.replace('T'," "),
endTime: this.playback.endTime.replace('T'," ")
},
success:res =>{
console.log('res ======>',res)
if (res.data.code === 0 || res.data.code == 200) {
this.playUrlList[this.player.currentWindowIndex].playback =
res.data.data;
this.playbackStart();
}
},
error:err=>{
console.log('err=======>',err)
this.playUrlList[this.player.currentWindowIndex].playback =
'ws://171.16.8.60:559/openUrl/fJbYK9G';
this.playbackStart();
}
})
},
/* 回放 */
playbackStart() {
let {
player,
mode,
// urls,
playback
} = this
index = player.currentWindowIndex
let playURL = this.playUrlList[index].playback
let {
startTime,
endTime
} = playback
startTime += 'Z'
endTime += 'Z'
console.log('playUrl ====>',playURL,mode,index,startTime,endTime)
player.JS_Play(playURL, {
playURL,
mode
}, index, startTime, endTime).then(
() => {
console.log('playbackStart success')
this.playback.rate = 1
},
e => {
console.error(e)
}
)
},
playbackPause() {
this.player.JS_Pause().then(
() => {
console.log('playbackPause success')
},
e => {
console.error(e)
}
)
},
playbackResume() {
this.player.JS_Resume().then(
() => {
console.log('playbackResume success')
},
e => {
console.error(e)
}
)
},
seekTo() {
let {
seekStart,
endTime
} = this.playback
seekStart += 'Z'
endTime += 'Z'
this.player.JS_Seek(this.player.currentWindowIndex, seekStart, endTime).then(
() => {
console.log('seekTo success')
},
e => {
console.error(e)
}
)
},
playbackSlow() {
this.player.JS_Slow().then(
rate => {
this.playback.rate = rate
},
e => {
console.error(e)
}
)
},
playbackFast() {
this.player.JS_Fast().then(
rate => {
this.playback.rate = rate
},
e => {
console.error(e)
}
)
},
frameForward() {
this.player.JS_FrameForward(this.player.currentWindowIndex).then(
() => {
this.playback.rate = 1;
console.log('frameForward success')
},
e => {
console.error(e)
}
)
},
/* 声音、抓图、录像 */
openSound() {
this.player.JS_OpenSound().then(
() => {
console.log('openSound success')
this.muted = false
},
e => {
console.error(e)
}
)
},
closeSound() {
this.player.JS_CloseSound().then(
() => {
console.log('closeSound success')
this.muted = true
},
e => {
console.error(e)
}
)
},
setVolume(value) {
let player = this.player,
index = player.currentWindowIndex
this.player.JS_SetVolume(index, value).then(
() => {
console.log('setVolume success', value)
},
e => {
console.error(e)
}
)
},
capture(imageType) {
let player = this.player,
index = player.currentWindowIndex
player.JS_CapturePicture(index, 'img', imageType).then(
() => {
console.log('capture success', imageType)
},
e => {
console.error(e)
}
)
},
recordStart(type) {
const codeMap = {
MP4: 5,
PS: 2
}
let player = this.player,
index = player.currentWindowIndex,
fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`
typeCode = codeMap[type]
player.JS_StartSaveEx(index, fileName, typeCode).then(
() => {
console.log('record start ...')
},
e => {
console.error(e)
}
)
},
recordStop() {
let player = this.player
index = player.currentWindowIndex
player.JS_StopSave(index).then(
() => {
console.log('record stoped, saving ...')
},
e => {
console.error(e)
}
)
},
/* 电子放大、智能信息 */
enlarge() {
let player = this.player,
index = player.currentWindowIndex
player.JS_EnableZoom(index).then(
() => {
console.log('enlarge start..., select range...')
},
e => {
console.error(e)
}
)
},
enlargeClose() {
let player = this.player,
index = player.currentWindowIndex
player.JS_DisableZoom(index).then(
() => {
console.log('enlargeClose success')
},
e => {
console.error(e)
}
)
},
intellectTrigger(openFlag) {
let player = this.player,
index = player.currentWindowIndex
let result = player.JS_RenderALLPrivateData(index, openFlag)
console.log(`${openFlag ? 'open' : 'close'} intellect ${result === 1 ? 'success': 'failed'}`)
},
getvideoInfo() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetVideoInfo(index).then(function(videoInfo) {
console.log("videoInfo:", videoInfo);
});
},
getOSDTime() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetOSDTime(index).then(function(time) {
console.log("osdTime:", new Date(time));
});
}
},
mounted() {
this.$el.style.setProperty('display', 'block')
// this.playback = [this.getYestDayOrNextDay() + ' 00:00:00',new Date().toLocaleString()]
this.init()
this.createPlayer()
}
})
</script>
</body>
</html>

521
static/html/webpalyer_copy1.html
Unescape View File

@ -0,0 +1,521 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5playerVue</title>
<link rel="stylesheet" href="./static/css/antd.min.css">
<style>
body {
padding: 8px 8px 32px;
}
#app {
display: none;
}
.actions {
padding-left: 8px;
}
.ant-form-item {
margin-bottom: 8px
}
.ant-btn {
margin-right: 2px;
}
.icon-wrapper {
position: relative;
padding-left: 20px;
}
.icon-wrapper .anticon {
position: absolute;
top: -2px;
width: 16px;
height: 16px;
line-height: 1;
font-size: 16px;
left: 0;
}
::-webkit-media-controls {
display: none !important;
}
@media screen and (max-width: 991px) {
#player {
width: calc(100vw - 16px);
height: calc((100vw - 16px) * 5 / 8);
}
}
@media screen and (min-width: 992px) {
#player {
width: calc(50vw - 8px);
height: calc((50vw - 8px) * 5 / 8);
}
}
</style>
</head>
<body>
<div id="app">
<a-locale-provider :locale="zh_CN">
<a-row>
<a-col :span="24" :md="12">
<a-affix :offset-top="8">
<div id="player"></div>
</a-affix>
<a-form-item>
分屏
<a-radio-group v-model="splitNum" @change="arrangeWindow">
<a-radio-button :value="1">1x1</a-radio-button>
<a-radio-button :value="2">2x2</a-radio-button>
<a-radio-button :value="3" v-show="!isMoveDevice">3x3</a-radio-button>
<a-radio-button :value="4" v-show="!isMoveDevice">4x4</a-radio-button>
</a-radio-group>
<a-button @click="wholeFullScreen" v-show="!isMoveDevice">整体全屏</a-button>
</a-form-item>
</a-col>
<a-col :span="24" :md="12">
<div class="actions">
<a-tabs v-model="tabActive">
<a-tab-pane key="mse" tab="普通模式" :disabled="!mseSupport"></a-tab-pane>
<a-tab-pane key="decoder" tab="高级模式"></a-tab-pane>
<!-- <a-tab-pane key="log" tab="日志"></a-tab-pane> -->
</a-tabs>
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-show="tabActive !== 'log'">
<a-form-item label="预览URL">
<a-input v-model="urls.realplay"></a-input>
</a-form-item>
<a-form-item label="对讲URL">
<a-input v-model="urls.talk"></a-input>
</a-form-item>
<a-form-item label="预览&对讲">
<a-button id="btn-realplay" @click="realplay">开始预览</a-button>
<a-button id="btn-realplay-stop" @click="stopPlay">停止预览</a-button>
<a-button id="btn-talk-start" @click="talkStart">开始对讲</a-button>
<a-button id="btn-talk-stop" @click="talkStop">停止对讲</a-button>
<a-button id="btn-stopall" @click="stopAllPlay">停止全部窗口</a-button>
</a-form-item>
<a-form-item label="回放URL">
<a-input v-model="urls.playback"></a-input>
<br>
<a-date-picker show-time placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss"
v-model="playback.startTime" :value-format="playback.valueFormat">
</a-date-picker>
<a-date-picker show-time placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
v-model="playback.endTime" :value-format="playback.valueFormat">
</a-date-picker>
</a-form-item>
<a-form-item label="回放">
<a-button id="btn-playback" @click="playbackStart">开始回放</a-button>
<a-button id="btn-playback-pause" @click="playbackPause">暂停</a-button>
<a-button id="btn-playback-sesume" @click="playbackResume">恢复</a-button>
<a-button id="btn-playback-stop" @click="stopPlay">停止回放</a-button>
<br>
<a-row>
<a-col :span="16">
<a-button id="btn-playback-slow" @click="playbackSlow">慢放</a-button>
<a-button id="btn-playback-fast" @click="playbackFast">快放</a-button>
<a-button id="btn-playback-one" @click="frameForward" v-show="tabActive === 'decoder'">单帧</a-button>
<br>
<a-date-picker show-time placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss"
v-model="playback.seekStart"
:value-format="playback.valueFormat">
</a-date-picker>
&nbsp;<a-button @click="seekTo">定位</a-button>
</a-col>
<a-col :span="8">
<a-statistic title="当前播放速度" :value="playback.rate"></a-statistic>
</a-col>
</a-row>
</a-form-item>
<a-form-item label="声音">
<a-row>
<a-col :span="10">
<a-button id="btn-sound-open" @click="openSound">开启</a-button>
<a-button id="btn-sound-close" @click="closeSound">关闭</a-button>
</a-col>
<a-col :span="12">
<div class="icon-wrapper">
<a-icon v-if="muted" :component="volumeOffSvg"></a-icon>
<a-icon v-else :component="volumeOnSvg"></a-icon>
<a-slider v-model="volume" :default-value="50" :disabled="muted" @change="setVolume"></a-slider>
</div>
</a-col>
</a-row>
</a-form-item>
<a-form-item label="抓图&录像">
<a-button id="btn-capture-jpeg" @click="capture('JPEG')">抓取JPEG</a-button>
<a-button id="btn-capture-bmp" @click="capture('BMP')">抓取BMP</a-button>
<br>
<a-button id="btn-record-mp4" @click="recordStart('MP4')">录制MP4</a-button>
<a-button id="btn-record-ps" @click="recordStart('PS')">录制PS</a-button>
<a-button id="btn-record-save" @click="recordStop">停止录制并保存文件</a-button>
</a-form-item>
<a-form-item label="视频信息&OSD时间">
<a-button id="btn-video-info" @click="getvideoInfo">获取视频信息</a-button>
<a-button id="btn-ose-time" @click="getOSDTime">获取OSD时间</a-button>
</a-form-item>
<a-form-item label="电子放大&智能信息" v-show="tabActive === 'decoder'">
<a-button id="btn-enlarge-open" @click="enlarge">开启电子放大</a-button>
<a-button id="btn-enlarge-close" @click="enlargeClose">关闭电子放大</a-button>
<a-button id="btn-intellect-open" @click="intellectTrigger(true)">开启智能信息</a-button>
<a-button id="btn-intellect-close" @click="intellectTrigger(false)">关闭智能信息</a-button>
</a-form-item>
</a-form>
</div>
</a-col>
</a-row>
</a-locale-provider>
</div>
<template id="play-log">
<div></div>
</template>
<!-- 移动端调试 -->
<script src="./static/js/vconsole.min.js"></script>
<script>
const vc = new VConsole()
</script>
<script src="./static/js/moment.js"></script>
<script src="./static/js/vue.js"></script>
<script src="./static/js/antd.min.js"></script>
<script src="./static/js/antd-with-locales.min.js"></script>
<script src="./h5player.min.js"></script>
<script>
const { LocaleProvider, locales } = window.antd
moment.locale('./static/js/zh-cn.js')
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
// const Log = Vue.component('log', {
// template: '#play-log',
// data() {
// return {
// }
// },
// methods: {
// }
// })
const app = new Vue({
el: '#app',
// components: { Log },
data() {
return {
zh_CN: locales.zh_CN,
isMoveDevice: IS_MOVE_DEVICE,
player: null,
splitNum: IS_MOVE_DEVICE ? 1 : 2,
mseSupport: MSE_IS_SUPPORT,
tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
labelCol: { span: 5 },
wrapperCol: { span: 18 },
urls: {
realplay: 'ws://171.16.8.53:1883/openUrl/uKPIUtb',
talk: '',
playback: ''
},
playback: {
startTime: '2021-07-26T00:00:00',
endTime: '2021-07-26T23:59:59',
valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
seekStart: '2021-07-26T12:00:00',
rate: ''
},
muted: true,
volume: 50,
volumeOnSvg: {
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
},
volumeOffSvg: {
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
}
}
},
computed: {
mode: function() {
return this.tabActive === 'mse' ? 0 : 0
}
},
methods: {
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer() {
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "./",
iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
openDebug: true,
oStyle: {
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
}
})
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) { //插件选中窗口回调
console.log('windowSelect callback: ', iWndIndex);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) { //鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) { //鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) { //全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: function () { //性能不足回调
console.log('performanceLack callback: ');
}
});
},
arrangeWindow() {
let splitNum = this.splitNum
this.player.JS_ArrangeWindow(splitNum).then(
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
e => { console.error(e) }
)
},
wholeFullScreen() {
this.player.JS_FullScreenDisplay(true).then(
() => { console.log(`wholeFullScreen success`) },
e => { console.error(e) }
)
},
/* 预览&对讲 */
realplay() {
let { player, mode, urls } = this,
index = player.currentWindowIndex,
playURL = urls.realplay
player.JS_Play(playURL, { playURL, mode }, index).then(
() => { console.log('realplay success') },
e => { console.error(e) }
)
},
stopPlay() {
this.player.JS_Stop().then(
() => { this.playback.rate = 0; console.log('stop realplay success') },
e => { console.error(e) }
)
},
talkStart() {
let url = this.urls.talk
this.player.JS_SetConnectTimeOut(0, 1000)
this.player.JS_StartTalk(url).then(
() => { console.log('talkStart success') },
e => { console.error(e) }
)
},
talkStop() {
this.player.JS_StopTalk().then(
() => { console.log('talkStop success') },
e => { console.error(e) }
)
},
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => { this.playback.rate = 0; console.log('stopAllPlay success') },
e => { console.error(e) }
)
},
/* 回放 */
playbackStart() {
let { player, mode, urls, playback } = this,
index = player.currentWindowIndex,
playURL = urls.playback,
{ startTime, endTime } = playback
startTime += 'Z'
endTime += 'Z'
player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then(
() => {
console.log('playbackStart success')
this.playback.rate = 1
},
e => { console.error(e) }
)
},
playbackPause() {
this.player.JS_Pause().then(
() => { console.log('playbackPause success') },
e => { console.error(e) }
)
},
playbackResume() {
this.player.JS_Resume().then(
() => { console.log('playbackResume success') },
e => { console.error(e) }
)
},
seekTo() {
let { seekStart, endTime } = this.playback
seekStart += 'Z'
endTime += 'Z'
this.player.JS_Seek(this.player.currentWindowIndex, seekStart, endTime).then(
() => { console.log('seekTo success') },
e => { console.error(e) }
)
},
playbackSlow() {
this.player.JS_Slow().then(
rate => {
this.playback.rate = rate
},
e => { console.error(e) }
)
},
playbackFast() {
this.player.JS_Fast().then(
rate => {
this.playback.rate = rate
},
e => { console.error(e) }
)
},
frameForward() {
this.player.JS_FrameForward(this.player.currentWindowIndex).then(
() => { this.playback.rate = 1; console.log('frameForward success') },
e => { console.error(e) }
)
},
/* 声音、抓图、录像 */
openSound() {
this.player.JS_OpenSound().then(
() => {
console.log('openSound success')
this.muted = false
},
e => { console.error(e) }
)
},
closeSound() {
this.player.JS_CloseSound().then(
() => {
console.log('closeSound success')
this.muted = true
},
e => { console.error(e) }
)
},
setVolume(value) {
let player = this.player,
index = player.currentWindowIndex
this.player.JS_SetVolume(index, value).then(
() => {
console.log('setVolume success', value)
},
e => { console.error(e) }
)
},
capture(imageType) {
let player = this.player,
index = player.currentWindowIndex
player.JS_CapturePicture(index, 'img', imageType).then(
() => { console.log('capture success', imageType) },
e => { console.error(e) }
)
},
recordStart(type) {
const codeMap = { MP4: 5, PS: 2 }
let player = this.player,
index = player.currentWindowIndex,
fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`
typeCode = codeMap[type]
player.JS_StartSaveEx(index, fileName, typeCode).then(
() => { console.log('record start ...') },
e => { console.error(e) }
)
},
recordStop() {
let player = this.player
index = player.currentWindowIndex
player.JS_StopSave(index).then(
() => { console.log('record stoped, saving ...') },
e => { console.error(e) }
)
},
/* 电子放大、智能信息 */
enlarge() {
let player = this.player,
index = player.currentWindowIndex
player.JS_EnableZoom(index).then(
() => { console.log('enlarge start..., select range...') },
e => { console.error(e) }
)
},
enlargeClose() {
let player = this.player,
index = player.currentWindowIndex
player.JS_DisableZoom(index).then(
() => { console.log('enlargeClose success') },
e => { console.error(e) }
)
},
intellectTrigger(openFlag) {
let player = this.player,
index = player.currentWindowIndex
let result = player.JS_RenderALLPrivateData(index,openFlag)
console.log(`${openFlag ? 'open' : 'close'} intellect ${result === 1 ? 'success': 'failed'}`)
},
getvideoInfo() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetVideoInfo(index).then(function (videoInfo) {
console.log("videoInfo:", videoInfo);
});
},
getOSDTime() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetOSDTime(index).then(function(time) {
console.log("osdTime:", new Date(time));
});
}
},
mounted() {
this.$el.style.setProperty('display', 'block')
this.init()
this.createPlayer()
}
})
</script>
</body>
</html>

2
unpackage/dist/dev/app-plus/app-config-service.js vendored
Unescape View File

@ -1,7 +1,7 @@
var isReady=false;var onReadyCallbacks=[];
var isServiceReady=false;var onServiceReadyCallbacks=[];
var __uniConfig = {"pages":["pages/index/index","pages/voiceRecord/report","pages/voiceRecord/list","pages/positionRecord/report","pages/positionRecord/list","pages/patrolRecord/report","pages/patrolRecord/list","pages/setting/index","pages/setting/user","pages/setting/other","pages/message/list","pages/message/detail","pages/map/map","pages/videoPlayer/index","pages/H5player/index"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"uni-app","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":"#F8F8F8","background":"#efeff4"},"darkmode":false,"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"齐鲁医院报警检测","compilerVersion":"3.8.7","entryPagePath":"pages/index/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
var __uniConfig = {"pages":["pages/index/index","pages/voiceRecord/report","pages/voiceRecord/list","pages/positionRecord/report","pages/positionRecord/list","pages/patrolRecord/report","pages/patrolRecord/list","pages/setting/index","pages/setting/user","pages/setting/other","pages/message/list","pages/message/detail","pages/map/map","pages/videoPlayer/index","pages/H5player/index"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"uni-app","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":"#F8F8F8","background":"#efeff4"},"darkmode":false,"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"齐鲁医院报警检测","compilerVersion":"3.7.9","entryPagePath":"pages/index/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
var __uniRoutes = [{"path":"/pages/index/index","meta":{"isQuit":true},"window":{"navigationBarTitleText":"齐鲁医院"}},{"path":"/pages/voiceRecord/report","meta":{},"window":{"navigationBarTitleText":"语音上报"}},{"path":"/pages/voiceRecord/list","meta":{},"window":{"navigationBarTitleText":"语音上报记录"}},{"path":"/pages/positionRecord/report","meta":{},"window":{"navigationBarTitleText":"位置上报"}},{"path":"/pages/positionRecord/list","meta":{},"window":{"navigationBarTitleText":"位置上报记录"}},{"path":"/pages/patrolRecord/report","meta":{},"window":{"navigationBarTitleText":"巡更上报"}},{"path":"/pages/patrolRecord/list","meta":{},"window":{"navigationBarTitleText":"巡更上报记录"}},{"path":"/pages/setting/index","meta":{},"window":{"navigationBarTitleText":"设置"}},{"path":"/pages/setting/user","meta":{},"window":{"navigationBarTitleText":"远端设置"}},{"path":"/pages/setting/other","meta":{},"window":{"navigationBarTitleText":"常用报警设置"}},{"path":"/pages/message/list","meta":{},"window":{"navigationBarTitleText":"报警消息"}},{"path":"/pages/message/detail","meta":{},"window":{"navigationBarTitleText":"报警消息详情"}},{"path":"/pages/map/map","meta":{},"window":{"navigationBarTitleText":"定位"}},{"path":"/pages/videoPlayer/index","meta":{},"window":{"navigationBarTitleText":"监控视频"}},{"path":"/pages/H5player/index","meta":{},"window":{"navigationBarTitleText":"","enablePullDownRefresh":false}}];
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});

2224
unpackage/dist/dev/app-plus/app-service.js vendored
View File

File diff suppressed because one or more lines are too long

1828
unpackage/dist/dev/app-plus/app-view.js vendored
View File

File diff suppressed because one or more lines are too long

2
unpackage/dist/dev/app-plus/manifest.json vendored
View File

File diff suppressed because one or more lines are too long

1270
unpackage/dist/dev/app-plus/static/html/webpalyer.html vendored
View File

File diff suppressed because it is too large Load Diff

755
unpackage/dist/dev/app-plus/static/html/webpalyer_copy.html vendored
Unescape View File

@ -1,755 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5playerVue</title>
<link rel="stylesheet" href="./static/css/antd.min.css">
<style>
body {
padding: 8px 8px 32px;
}
#app {
display: none;
}
.actions {
padding-left: 8px;
}
.ant-form-item {
margin-bottom: 8px
}
.ant-btn {
margin-right: 2px;
}
.icon-wrapper {
position: relative;
padding-left: 20px;
}
.icon-wrapper .anticon {
position: absolute;
top: -2px;
width: 16px;
height: 16px;
line-height: 1;
font-size: 16px;
left: 0;
}
::-webkit-media-controls {
display: none !important;
}
@media screen and (max-width: 991px) {
#player {
width: calc(100vw - 16px);
height: calc((100vw - 16px) * 5 / 8);
}
}
@media screen and (min-width: 992px) {
#player {
width: calc(50vw - 8px);
height: calc((50vw - 8px) * 5 / 8);
}
}
</style>
</head>
<body>
<div id="app">
<a-locale-provider :locale="zh_CN">
<a-row>
<a-col :span="24" :md="12">
<a-affix :offset-top="8">
<div id="player"></div>
</a-affix>
<a-form-item>
分屏
<a-radio-group v-model="splitNum" @change="arrangeWindow">
<a-radio-button :value="1">1x1</a-radio-button>
<a-radio-button :value="2">2x2</a-radio-button>
<a-radio-button :value="3">3x3</a-radio-button>
<a-radio-button :value="4">4x4</a-radio-button>
</a-radio-group>
<a-button @click="wholeFullScreen" v-show="!isMoveDevice">整体全屏</a-button>
</a-form-item>
</a-col>
<a-col :span="24" :md="12">
<div class="actions">
<!-- <a-tabs v-model="tabActive">
<a-tab-pane key="mse" tab="普通模式" :disabled="!mseSupport"></a-tab-pane>
<a-tab-pane key="decoder" tab="高级模式"></a-tab-pane>
</a-tabs> -->
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-show="tabActive !== 'log'">
<!-- <a-form-item label="预览URL">
<a-input v-model="urls.realplay"></a-input>
</a-form-item>
<a-form-item label="对讲URL">
<a-input v-model="urls.talk"></a-input>
</a-form-item> -->
<a-form-item label="预览">
<a-button id="btn-realplay" @click="queryLive">开始预览</a-button>
<a-button id="btn-realplay-stop" @click="stopPlay">停止预览</a-button>
<!-- <a-button id="btn-talk-start" @click="talkStart">开始对讲</a-button>
<a-button id="btn-talk-stop" @click="talkStop">停止对讲</a-button> -->
<a-button id="btn-stopall" @click="stopAllPlay">停止全部窗口</a-button>
</a-form-item>
<a-form-item label="回放时间">
<!-- <a-input v-model="urls.playback"></a-input> -->
<!-- <br> -->
<a-date-picker show-time placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss" v-model="playback.startTime"
:value-format="playback.valueFormat">
</a-date-picker>
<a-date-picker show-time placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" v-model="playback.endTime"
:value-format="playback.valueFormat">
</a-date-picker>
</a-form-item>
<a-form-item label="回放">
<a-button id="btn-playback" @click="playbackQuery">开始回放</a-button>
<a-button id="btn-playback-pause" @click="playbackPause">暂停</a-button>
<a-button id="btn-playback-sesume" @click="playbackResume">恢复</a-button>
<a-button id="btn-playback-stop" @click="stopPlay">停止回放</a-button>
<br>
<!-- <a-row>
<a-col :span="16">
<a-button id="btn-playback-slow" @click="playbackSlow">慢放</a-button>
<a-button id="btn-playback-fast" @click="playbackFast">快放</a-button>
<a-button id="btn-playback-one" @click="frameForward"
v-show="tabActive === 'decoder'">单帧</a-button>
<br>
<a-date-picker show-time placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss"
v-model="playback.seekStart" :value-format="playback.valueFormat">
</a-date-picker>
&nbsp;<a-button @click="seekTo">定位</a-button>
</a-col>
<a-col :span="8">
<a-statistic title="当前播放速度" :value="playback.rate"></a-statistic>
</a-col>
</a-row> -->
</a-form-item>
<!-- <a-form-item label="声音">
<a-row>
<a-col :span="10">
<a-button id="btn-sound-open" @click="openSound">开启</a-button>
<a-button id="btn-sound-close" @click="closeSound">关闭</a-button>
</a-col>
<a-col :span="12">
<div class="icon-wrapper">
<a-icon v-if="muted" :component="volumeOffSvg"></a-icon>
<a-icon v-else :component="volumeOnSvg"></a-icon>
<a-slider v-model="volume" :default-value="50" :disabled="muted" @change="setVolume"></a-slider>
</div>
</a-col>
</a-row>
</a-form-item> -->
<a-form-item label="抓图&录像">
<a-button id="btn-capture-jpeg" @click="capture('JPEG')">抓取JPEG</a-button>
<a-button id="btn-capture-bmp" @click="capture('BMP')">抓取BMP</a-button>
<br>
<!-- <a-button id="btn-record-mp4" @click="recordStart('MP4')">录制MP4</a-button>
<a-button id="btn-record-ps" @click="recordStart('PS')">录制PS</a-button>
<a-button id="btn-record-save" @click="recordStop">停止录制并保存文件</a-button> -->
</a-form-item>
<!-- <a-form-item label="视频信息&OSD时间">
<a-button id="btn-video-info" @click="getvideoInfo">获取视频信息</a-button>
<a-button id="btn-ose-time" @click="getOSDTime">获取OSD时间</a-button>
</a-form-item>
<a-form-item label="电子放大&智能信息" v-show="tabActive === 'decoder'">
<a-button id="btn-enlarge-open" @click="enlarge">开启电子放大</a-button>
<a-button id="btn-enlarge-close" @click="enlargeClose">关闭电子放大</a-button>
<a-button id="btn-intellect-open" @click="intellectTrigger(true)">开启智能信息</a-button>
<a-button id="btn-intellect-close" @click="intellectTrigger(false)">关闭智能信息</a-button>
</a-form-item> -->
</a-form>
</div>
</a-col>
</a-row>
</a-locale-provider>
</div>
<template id="play-log">
<div></div>
</template>
<!-- 移动端调试 -->
<script src="./static/js/vconsole.min.js"></script>
<script>
const vc = new VConsole()
</script>
<script src="./static/js/moment.js"></script>
<script src="./static/js/vue.js"></script>
<script src="./static/js/antd.min.js"></script>
<script src="./static/js/jquery-1.12.4.min.js"></script>
<script src="./static/js/antd-with-locales.min.js"></script>
<script src="./h5player.min.js"></script>
<script>
const {
LocaleProvider,
locales
} = window.antd
moment.locale('./static/js/zh-cn.js')
// const baseUrl = 'http://192.168.1.34:81'
// const baseUrl = 'http://192.169.9.252:1883'
const baseUrl = 'http://171.16.8.51:1888'
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
const params = location.href;
const code = params.substring(params.indexOf('?carmeraCode=') + 13)
const list = JSON.parse(decodeURIComponent(code))
// console.log('list =====',list)
// const Log = Vue.component('log', {
// template: '#play-log',
// data() {
// return {
// }
// },
// methods: {
// }
// })
const app = new Vue({
el: '#app',
// components: { Log },
data() {
return {
zh_CN: locales.zh_CN,
isMoveDevice: IS_MOVE_DEVICE,
player: null,
splitNum: IS_MOVE_DEVICE ? 1 : 2,
mseSupport: MSE_IS_SUPPORT,
tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
labelCol: {
span: 5
},
wrapperCol: {
span: 18
},
urls: {
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
},
playback: {
startTime: '',
endTime: '',
valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
seekStart: '2021-07-26T12:00:00',
rate: ''
},
muted: true,
volume: 50,
volumeOnSvg: {
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
},
volumeOffSvg: {
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
}
}
},
computed: {
mode: function() {
return this.tabActive === 'mse' ? 0 : 1
}
},
methods: {
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer() {
// console.log('123123 ====>',list)
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "./",
iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
openDebug: true,
oStyle: {
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
}
})
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: function(iWndIndex) { //插件选中窗口回调
console.log('windowSelect callback: ', iWndIndex);
},
pluginErrorHandler: function(iWndIndex, iErrorCode, oError) { //插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
},
windowEventOver: function(iWndIndex) { //鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function(iWndIndex) { //鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function(iWndIndex) { //鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function(bFull) { //全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function(iWndIndex, iWidth, iHeight) { //首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: function() { //性能不足回调
console.log('performanceLack callback: ');
}
});
this.queryLive()
},
arrangeWindow() {
let splitNum = this.splitNum
console.log(typeof(splitNum))
this.player.JS_ArrangeWindow(splitNum).then(
() => {
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
},
e => {
console.error(e)
}
)
},
wholeFullScreen() {
this.player.JS_FullScreenDisplay(true).then(
() => {
console.log(`wholeFullScreen success`)
},
e => {
console.error(e)
}
)
},
/**
* 视频流查询
*/
//实时监控播放地址查询
queryLive() {
// console.log("视频流查询", list);
console.log('app ====>', baseUrl)
// this.realplay(1, 'ws://171.16.8.53:1883/openUrl/uKPIUtb');
let playUrlList = [];
list.map((code, index) => {
$.ajax({
url: baseUrl + "/api/alarmInformation/preview", //要请求的后端地址
type: "GET", //数据发送的方式(POST或者GET)
data: {
// cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code
cameraIndexCode: 'a639bb55c237414f8c487c409d5789c7'
}, //需要传递的参数
// dataType: "json", //后端返回的数据格式
success: (res => { //ajax请求成功后触发的方法
console.log('result ====>', res); //result为响应内容
if (res.code == 0 || res.code == 200) {
playUrlList.push({
name: '摄像头一',
code: 'a639bb55c237414f8c487c409d5789c7',
url: res.data
});
this.playUrlList = playUrlList;
this.realplay(index, res.data);
}
}),
error: (err => {
// console.log('error =====>',err)
playUrlList.push({
name: code.name,
code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code,
url: 'ws://171.16.8.53:1883/openUrl/uKPIUtb'
});
this.playUrlList = playUrlList;
this.realplay(index, 'ws://171.16.8.53:1883/openUrl/uKPIUtb');
})
});
// queryLivePreview({ cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code }).then((res) => {
// console.log('res ====>',res)
// if (res.data.code === 0 || res.data.code == 200) {
// playUrlList.push({name:code.name, code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code, url: res.data.data });
// this.playUrlList = playUrlList;
// this.realplay(index, res.data.data);
// }
// // else{
// // playUrlList.push({name:code.name, code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code, url: 'ws://171.16.8.60:559/openUrl/QKCBP32' });
// // this.playUrlList = playUrlList;
// // this.realplay(index, 'ws://171.16.8.60:559/openUrl/QKCBP32');
// // }
// });
});
},
/* 预览&对讲 */
realplay(index, url) {
let {
player,
mode,
// urls
} = this,
// index = player.currentWindowIndex,
playURL = url
console.log('playURL ===>', playURL, mode, index)
console.log('player======>',player)
player.JS_Play(playURL, {
playURL,
mode
}, index).then(
() => {
console.log('播放成功')
},
e => {
console.error('播放失败 ============>',e)
}
)
},
stopPlay() {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0;
console.log('stop realplay success')
},
e => {
console.error(e)
}
)
},
talkStart() {
let url = this.urls.talk
this.player.JS_SetConnectTimeOut(0, 1000)
this.player.JS_StartTalk(url).then(
() => {
console.log('talkStart success')
},
e => {
console.error(e)
}
)
},
talkStop() {
this.player.JS_StopTalk().then(
() => {
console.log('talkStop success')
},
e => {
console.error(e)
}
)
},
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0;
console.log('stopAllPlay success')
},
e => {
console.error(e)
}
)
},
/* 回放 */
playbackQuery() {
if (this.playUrlList.length === 0) {
this.$message.warning("当前没有可播放的摄像头");
return;
}
let startTime = new Date(this.playback.startTime.replace('T'," ")).getTime()
let endTime = new Date(this.playback.endTime.replace('T'," ")).getTime()
console.log('time =====>',startTime,endTime)
if(!startTime || !endTime){
this.$message.warning("开始时间或结束时间不可为空");
return;
}
if(startTime > endTime){
this.$message.warning("开始时间不可晚于结束时间");
return;
}
console.log('payback ===>', this.playUrlList[this.player.currentWindowIndex].playback)
if (
this.playUrlList[this.player.currentWindowIndex].playback != undefined
) {
this.playbackStart();
return;
}
console.log('currentWindowIndex ===>', this.player.currentWindowIndex)
$.ajax({
url:baseUrl + '/alarmInformation/playback',
type:"GET",
data:{
cameraIndexCode: this.playUrlList[this.player.currentWindowIndex].code,
beginTime:this.playback.startTime.replace('T'," "),
endTime: this.playback.endTime.replace('T'," ")
},
success:res =>{
console.log('res ======>',res)
if (res.data.code === 0 || res.data.code == 200) {
this.playUrlList[this.player.currentWindowIndex].playback =
res.data.data;
this.playbackStart();
}
},
error:err=>{
console.log('err=======>',err)
this.playUrlList[this.player.currentWindowIndex].playback =
'ws://171.16.8.60:559/openUrl/fJbYK9G';
this.playbackStart();
}
})
},
/* 回放 */
playbackStart() {
let {
player,
mode,
// urls,
playback
} = this
index = player.currentWindowIndex
let playURL = this.playUrlList[index].playback
let {
startTime,
endTime
} = playback
startTime += 'Z'
endTime += 'Z'
console.log('playUrl ====>',playURL,mode,index,startTime,endTime)
player.JS_Play(playURL, {
playURL,
mode
}, index, startTime, endTime).then(
() => {
console.log('playbackStart success')
this.playback.rate = 1
},
e => {
console.error(e)
}
)
},
playbackPause() {
this.player.JS_Pause().then(
() => {
console.log('playbackPause success')
},
e => {
console.error(e)
}
)
},
playbackResume() {
this.player.JS_Resume().then(
() => {
console.log('playbackResume success')
},
e => {
console.error(e)
}
)
},
seekTo() {
let {
seekStart,
endTime
} = this.playback
seekStart += 'Z'
endTime += 'Z'
this.player.JS_Seek(this.player.currentWindowIndex, seekStart, endTime).then(
() => {
console.log('seekTo success')
},
e => {
console.error(e)
}
)
},
playbackSlow() {
this.player.JS_Slow().then(
rate => {
this.playback.rate = rate
},
e => {
console.error(e)
}
)
},
playbackFast() {
this.player.JS_Fast().then(
rate => {
this.playback.rate = rate
},
e => {
console.error(e)
}
)
},
frameForward() {
this.player.JS_FrameForward(this.player.currentWindowIndex).then(
() => {
this.playback.rate = 1;
console.log('frameForward success')
},
e => {
console.error(e)
}
)
},
/* 声音、抓图、录像 */
openSound() {
this.player.JS_OpenSound().then(
() => {
console.log('openSound success')
this.muted = false
},
e => {
console.error(e)
}
)
},
closeSound() {
this.player.JS_CloseSound().then(
() => {
console.log('closeSound success')
this.muted = true
},
e => {
console.error(e)
}
)
},
setVolume(value) {
let player = this.player,
index = player.currentWindowIndex
this.player.JS_SetVolume(index, value).then(
() => {
console.log('setVolume success', value)
},
e => {
console.error(e)
}
)
},
capture(imageType) {
let player = this.player,
index = player.currentWindowIndex
player.JS_CapturePicture(index, 'img', imageType).then(
() => {
console.log('capture success', imageType)
},
e => {
console.error(e)
}
)
},
recordStart(type) {
const codeMap = {
MP4: 5,
PS: 2
}
let player = this.player,
index = player.currentWindowIndex,
fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`
typeCode = codeMap[type]
player.JS_StartSaveEx(index, fileName, typeCode).then(
() => {
console.log('record start ...')
},
e => {
console.error(e)
}
)
},
recordStop() {
let player = this.player
index = player.currentWindowIndex
player.JS_StopSave(index).then(
() => {
console.log('record stoped, saving ...')
},
e => {
console.error(e)
}
)
},
/* 电子放大、智能信息 */
enlarge() {
let player = this.player,
index = player.currentWindowIndex
player.JS_EnableZoom(index).then(
() => {
console.log('enlarge start..., select range...')
},
e => {
console.error(e)
}
)
},
enlargeClose() {
let player = this.player,
index = player.currentWindowIndex
player.JS_DisableZoom(index).then(
() => {
console.log('enlargeClose success')
},
e => {
console.error(e)
}
)
},
intellectTrigger(openFlag) {
let player = this.player,
index = player.currentWindowIndex
let result = player.JS_RenderALLPrivateData(index, openFlag)
console.log(`${openFlag ? 'open' : 'close'} intellect ${result === 1 ? 'success': 'failed'}`)
},
getvideoInfo() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetVideoInfo(index).then(function(videoInfo) {
console.log("videoInfo:", videoInfo);
});
},
getOSDTime() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetOSDTime(index).then(function(time) {
console.log("osdTime:", new Date(time));
});
}
},
mounted() {
this.$el.style.setProperty('display', 'block')
// this.playback = [this.getYestDayOrNextDay() + ' 00:00:00',new Date().toLocaleString()]
this.init()
this.createPlayer()
}
})
</script>
</body>
</html>

521
unpackage/dist/dev/app-plus/static/html/webpalyer_copy1.html vendored
Unescape View File

@ -0,0 +1,521 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5playerVue</title>
<link rel="stylesheet" href="./static/css/antd.min.css">
<style>
body {
padding: 8px 8px 32px;
}
#app {
display: none;
}
.actions {
padding-left: 8px;
}
.ant-form-item {
margin-bottom: 8px
}
.ant-btn {
margin-right: 2px;
}
.icon-wrapper {
position: relative;
padding-left: 20px;
}
.icon-wrapper .anticon {
position: absolute;
top: -2px;
width: 16px;
height: 16px;
line-height: 1;
font-size: 16px;
left: 0;
}
::-webkit-media-controls {
display: none !important;
}
@media screen and (max-width: 991px) {
#player {
width: calc(100vw - 16px);
height: calc((100vw - 16px) * 5 / 8);
}
}
@media screen and (min-width: 992px) {
#player {
width: calc(50vw - 8px);
height: calc((50vw - 8px) * 5 / 8);
}
}
</style>
</head>
<body>
<div id="app">
<a-locale-provider :locale="zh_CN">
<a-row>
<a-col :span="24" :md="12">
<a-affix :offset-top="8">
<div id="player"></div>
</a-affix>
<a-form-item>
分屏
<a-radio-group v-model="splitNum" @change="arrangeWindow">
<a-radio-button :value="1">1x1</a-radio-button>
<a-radio-button :value="2">2x2</a-radio-button>
<a-radio-button :value="3" v-show="!isMoveDevice">3x3</a-radio-button>
<a-radio-button :value="4" v-show="!isMoveDevice">4x4</a-radio-button>
</a-radio-group>
<a-button @click="wholeFullScreen" v-show="!isMoveDevice">整体全屏</a-button>
</a-form-item>
</a-col>
<a-col :span="24" :md="12">
<div class="actions">
<a-tabs v-model="tabActive">
<a-tab-pane key="mse" tab="普通模式" :disabled="!mseSupport"></a-tab-pane>
<a-tab-pane key="decoder" tab="高级模式"></a-tab-pane>
<!-- <a-tab-pane key="log" tab="日志"></a-tab-pane> -->
</a-tabs>
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-show="tabActive !== 'log'">
<a-form-item label="预览URL">
<a-input v-model="urls.realplay"></a-input>
</a-form-item>
<a-form-item label="对讲URL">
<a-input v-model="urls.talk"></a-input>
</a-form-item>
<a-form-item label="预览&对讲">
<a-button id="btn-realplay" @click="realplay">开始预览</a-button>
<a-button id="btn-realplay-stop" @click="stopPlay">停止预览</a-button>
<a-button id="btn-talk-start" @click="talkStart">开始对讲</a-button>
<a-button id="btn-talk-stop" @click="talkStop">停止对讲</a-button>
<a-button id="btn-stopall" @click="stopAllPlay">停止全部窗口</a-button>
</a-form-item>
<a-form-item label="回放URL">
<a-input v-model="urls.playback"></a-input>
<br>
<a-date-picker show-time placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss"
v-model="playback.startTime" :value-format="playback.valueFormat">
</a-date-picker>
<a-date-picker show-time placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
v-model="playback.endTime" :value-format="playback.valueFormat">
</a-date-picker>
</a-form-item>
<a-form-item label="回放">
<a-button id="btn-playback" @click="playbackStart">开始回放</a-button>
<a-button id="btn-playback-pause" @click="playbackPause">暂停</a-button>
<a-button id="btn-playback-sesume" @click="playbackResume">恢复</a-button>
<a-button id="btn-playback-stop" @click="stopPlay">停止回放</a-button>
<br>
<a-row>
<a-col :span="16">
<a-button id="btn-playback-slow" @click="playbackSlow">慢放</a-button>
<a-button id="btn-playback-fast" @click="playbackFast">快放</a-button>
<a-button id="btn-playback-one" @click="frameForward" v-show="tabActive === 'decoder'">单帧</a-button>
<br>
<a-date-picker show-time placeholder="开始时间" format="YYYY-MM-DD HH:mm:ss"
v-model="playback.seekStart"
:value-format="playback.valueFormat">
</a-date-picker>
&nbsp;<a-button @click="seekTo">定位</a-button>
</a-col>
<a-col :span="8">
<a-statistic title="当前播放速度" :value="playback.rate"></a-statistic>
</a-col>
</a-row>
</a-form-item>
<a-form-item label="声音">
<a-row>
<a-col :span="10">
<a-button id="btn-sound-open" @click="openSound">开启</a-button>
<a-button id="btn-sound-close" @click="closeSound">关闭</a-button>
</a-col>
<a-col :span="12">
<div class="icon-wrapper">
<a-icon v-if="muted" :component="volumeOffSvg"></a-icon>
<a-icon v-else :component="volumeOnSvg"></a-icon>
<a-slider v-model="volume" :default-value="50" :disabled="muted" @change="setVolume"></a-slider>
</div>
</a-col>
</a-row>
</a-form-item>
<a-form-item label="抓图&录像">
<a-button id="btn-capture-jpeg" @click="capture('JPEG')">抓取JPEG</a-button>
<a-button id="btn-capture-bmp" @click="capture('BMP')">抓取BMP</a-button>
<br>
<a-button id="btn-record-mp4" @click="recordStart('MP4')">录制MP4</a-button>
<a-button id="btn-record-ps" @click="recordStart('PS')">录制PS</a-button>
<a-button id="btn-record-save" @click="recordStop">停止录制并保存文件</a-button>
</a-form-item>
<a-form-item label="视频信息&OSD时间">
<a-button id="btn-video-info" @click="getvideoInfo">获取视频信息</a-button>
<a-button id="btn-ose-time" @click="getOSDTime">获取OSD时间</a-button>
</a-form-item>
<a-form-item label="电子放大&智能信息" v-show="tabActive === 'decoder'">
<a-button id="btn-enlarge-open" @click="enlarge">开启电子放大</a-button>
<a-button id="btn-enlarge-close" @click="enlargeClose">关闭电子放大</a-button>
<a-button id="btn-intellect-open" @click="intellectTrigger(true)">开启智能信息</a-button>
<a-button id="btn-intellect-close" @click="intellectTrigger(false)">关闭智能信息</a-button>
</a-form-item>
</a-form>
</div>
</a-col>
</a-row>
</a-locale-provider>
</div>
<template id="play-log">
<div></div>
</template>
<!-- 移动端调试 -->
<script src="./static/js/vconsole.min.js"></script>
<script>
const vc = new VConsole()
</script>
<script src="./static/js/moment.js"></script>
<script src="./static/js/vue.js"></script>
<script src="./static/js/antd.min.js"></script>
<script src="./static/js/antd-with-locales.min.js"></script>
<script src="./h5player.min.js"></script>
<script>
const { LocaleProvider, locales } = window.antd
moment.locale('./static/js/zh-cn.js')
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
// const Log = Vue.component('log', {
// template: '#play-log',
// data() {
// return {
// }
// },
// methods: {
// }
// })
const app = new Vue({
el: '#app',
// components: { Log },
data() {
return {
zh_CN: locales.zh_CN,
isMoveDevice: IS_MOVE_DEVICE,
player: null,
splitNum: IS_MOVE_DEVICE ? 1 : 2,
mseSupport: MSE_IS_SUPPORT,
tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
labelCol: { span: 5 },
wrapperCol: { span: 18 },
urls: {
realplay: 'ws://171.16.8.53:1883/openUrl/uKPIUtb',
talk: '',
playback: ''
},
playback: {
startTime: '2021-07-26T00:00:00',
endTime: '2021-07-26T23:59:59',
valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
seekStart: '2021-07-26T12:00:00',
rate: ''
},
muted: true,
volume: 50,
volumeOnSvg: {
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
},
volumeOffSvg: {
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
}
}
},
computed: {
mode: function() {
return this.tabActive === 'mse' ? 0 : 0
}
},
methods: {
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer() {
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "./",
iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
openDebug: true,
oStyle: {
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
}
})
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) { //插件选中窗口回调
console.log('windowSelect callback: ', iWndIndex);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) { //鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) { //鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) { //全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: function () { //性能不足回调
console.log('performanceLack callback: ');
}
});
},
arrangeWindow() {
let splitNum = this.splitNum
this.player.JS_ArrangeWindow(splitNum).then(
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
e => { console.error(e) }
)
},
wholeFullScreen() {
this.player.JS_FullScreenDisplay(true).then(
() => { console.log(`wholeFullScreen success`) },
e => { console.error(e) }
)
},
/* 预览&对讲 */
realplay() {
let { player, mode, urls } = this,
index = player.currentWindowIndex,
playURL = urls.realplay
player.JS_Play(playURL, { playURL, mode }, index).then(
() => { console.log('realplay success') },
e => { console.error(e) }
)
},
stopPlay() {
this.player.JS_Stop().then(
() => { this.playback.rate = 0; console.log('stop realplay success') },
e => { console.error(e) }
)
},
talkStart() {
let url = this.urls.talk
this.player.JS_SetConnectTimeOut(0, 1000)
this.player.JS_StartTalk(url).then(
() => { console.log('talkStart success') },
e => { console.error(e) }
)
},
talkStop() {
this.player.JS_StopTalk().then(
() => { console.log('talkStop success') },
e => { console.error(e) }
)
},
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => { this.playback.rate = 0; console.log('stopAllPlay success') },
e => { console.error(e) }
)
},
/* 回放 */
playbackStart() {
let { player, mode, urls, playback } = this,
index = player.currentWindowIndex,
playURL = urls.playback,
{ startTime, endTime } = playback
startTime += 'Z'
endTime += 'Z'
player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then(
() => {
console.log('playbackStart success')
this.playback.rate = 1
},
e => { console.error(e) }
)
},
playbackPause() {
this.player.JS_Pause().then(
() => { console.log('playbackPause success') },
e => { console.error(e) }
)
},
playbackResume() {
this.player.JS_Resume().then(
() => { console.log('playbackResume success') },
e => { console.error(e) }
)
},
seekTo() {
let { seekStart, endTime } = this.playback
seekStart += 'Z'
endTime += 'Z'
this.player.JS_Seek(this.player.currentWindowIndex, seekStart, endTime).then(
() => { console.log('seekTo success') },
e => { console.error(e) }
)
},
playbackSlow() {
this.player.JS_Slow().then(
rate => {
this.playback.rate = rate
},
e => { console.error(e) }
)
},
playbackFast() {
this.player.JS_Fast().then(
rate => {
this.playback.rate = rate
},
e => { console.error(e) }
)
},
frameForward() {
this.player.JS_FrameForward(this.player.currentWindowIndex).then(
() => { this.playback.rate = 1; console.log('frameForward success') },
e => { console.error(e) }
)
},
/* 声音、抓图、录像 */
openSound() {
this.player.JS_OpenSound().then(
() => {
console.log('openSound success')
this.muted = false
},
e => { console.error(e) }
)
},
closeSound() {
this.player.JS_CloseSound().then(
() => {
console.log('closeSound success')
this.muted = true
},
e => { console.error(e) }
)
},
setVolume(value) {
let player = this.player,
index = player.currentWindowIndex
this.player.JS_SetVolume(index, value).then(
() => {
console.log('setVolume success', value)
},
e => { console.error(e) }
)
},
capture(imageType) {
let player = this.player,
index = player.currentWindowIndex
player.JS_CapturePicture(index, 'img', imageType).then(
() => { console.log('capture success', imageType) },
e => { console.error(e) }
)
},
recordStart(type) {
const codeMap = { MP4: 5, PS: 2 }
let player = this.player,
index = player.currentWindowIndex,
fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`
typeCode = codeMap[type]
player.JS_StartSaveEx(index, fileName, typeCode).then(
() => { console.log('record start ...') },
e => { console.error(e) }
)
},
recordStop() {
let player = this.player
index = player.currentWindowIndex
player.JS_StopSave(index).then(
() => { console.log('record stoped, saving ...') },
e => { console.error(e) }
)
},
/* 电子放大、智能信息 */
enlarge() {
let player = this.player,
index = player.currentWindowIndex
player.JS_EnableZoom(index).then(
() => { console.log('enlarge start..., select range...') },
e => { console.error(e) }
)
},
enlargeClose() {
let player = this.player,
index = player.currentWindowIndex
player.JS_DisableZoom(index).then(
() => { console.log('enlargeClose success') },
e => { console.error(e) }
)
},
intellectTrigger(openFlag) {
let player = this.player,
index = player.currentWindowIndex
let result = player.JS_RenderALLPrivateData(index,openFlag)
console.log(`${openFlag ? 'open' : 'close'} intellect ${result === 1 ? 'success': 'failed'}`)
},
getvideoInfo() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetVideoInfo(index).then(function (videoInfo) {
console.log("videoInfo:", videoInfo);
});
},
getOSDTime() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetOSDTime(index).then(function(time) {
console.log("osdTime:", new Date(time));
});
}
},
mounted() {
this.$el.style.setProperty('display', 'block')
this.init()
this.createPlayer()
}
})
</script>
</body>
</html>

2
unpackage/dist/dev/app-plus/view.css vendored
View File

File diff suppressed because one or more lines are too long

2
unpackage/dist/dev/app-plus/view.umd.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save