jinna
2 years ago
parent
edc244079d
commit
871a52f606
12 changed files with 2947 additions and 2125 deletions
@ -0,0 +1,374 @@ |
||||
<template> |
||||
<div> |
||||
<div id="player"></div> |
||||
<el-form> |
||||
<el-form-item label="当前选中摄像头"> |
||||
{{ |
||||
this.playUrlList.length > 0 && this.player |
||||
? this.playUrlList[this.player.currentWindowIndex].code |
||||
: "--" |
||||
}} |
||||
</el-form-item> |
||||
<el-form-item label="分屏"> |
||||
<el-radio-group v-model="splitNum" @change="arrangeWindow"> |
||||
<el-radio-button label="1">1x1</el-radio-button> |
||||
<el-radio-button label="2">2x2</el-radio-button> |
||||
<el-radio-button label="3">3x3</el-radio-button> |
||||
<el-radio-button label="4">4x4</el-radio-button> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="预览"> |
||||
<el-button id="btn-realplay" @click="realplay">开始预览</el-button> |
||||
<el-button id="btn-realplay-stop" @click="stopPlay">停止预览</el-button> |
||||
<el-button id="btn-stopall" @click="stopAllPlay" |
||||
>停止全部窗口</el-button |
||||
> |
||||
</el-form-item> |
||||
<el-form-item label="回放时间"> |
||||
<e-date-picker |
||||
show-time |
||||
placeholder="开始时间" |
||||
format="YYYY-MM-DD HH:mm:ss" |
||||
v-model="playback.startTime" |
||||
:value-format="playback.valueFormat" |
||||
> |
||||
</e-date-picker> |
||||
<e-date-picker |
||||
show-time |
||||
placeholder="结束时间" |
||||
format="YYYY-MM-DD HH:mm:ss" |
||||
v-model="playback.endTime" |
||||
:value-format="playback.valueFormat" |
||||
> |
||||
</e-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="回放"> |
||||
<el-button id="btn-playback" @click="playbackQuery">开始回放</el-button> |
||||
<el-button id="btn-playback-pause" @click="playbackPause" |
||||
>暂停</el-button |
||||
> |
||||
<el-button id="btn-playback-sesume" @click="playbackResume" |
||||
>恢复</el-button |
||||
> |
||||
<el-button id="btn-playback-stop" @click="stopPlay">停止回放</el-button> |
||||
</el-form-item> |
||||
<el-form-item label="抓图"> |
||||
<el-button id="btn-capture-jpeg" @click="capture('JPEG')" |
||||
>抓取JPEG</el-button |
||||
> |
||||
<el-button id="btn-capture-bmp" @click="capture('BMP')" |
||||
>抓取BMP</el-button |
||||
> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备 |
||||
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse |
||||
// import "@/static/js/h5player.min.js" |
||||
import { |
||||
queryLivePreview, |
||||
queryLiveBack, |
||||
} from "@/api/wirelessintrusion/wirelessintrusion"; |
||||
export default { |
||||
props: { |
||||
list: { |
||||
// cameraCode列表 |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
player: null, |
||||
playUrlList: [], //预览播放地址 |
||||
splitNum: 1, |
||||
mseSupport: MSE_IS_SUPPORT, |
||||
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder', |
||||
tabActive: "decoder", |
||||
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: "2021-07-26T00:00:00", |
||||
endTime: "2021-07-26T23:59:59", |
||||
valueFormat: "", |
||||
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>', |
||||
}, |
||||
recordStartState: 0, |
||||
recordStartText: "录像", |
||||
}; |
||||
}, |
||||
created() { |
||||
// 海康h5插件初始化 |
||||
setTimeout(() => { |
||||
this.init(); |
||||
this.createPlayer(); |
||||
this.arrangeWindow(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
// 海康视频初始化加载 |
||||
init() { |
||||
// 设置播放容器的宽高并监听窗口大小变化 |
||||
window.addEventListener("resize", () => { |
||||
this.player.JS_Resize(); |
||||
}); |
||||
}, |
||||
createPlayer() { |
||||
this.player = new window.JSPlugin({ |
||||
szId: "player", |
||||
szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js |
||||
iMaxSplit: 4, |
||||
iCurrentSplit: 2, |
||||
openDebug: true, |
||||
oStyle: { |
||||
borderSelect: "#FFCC00", |
||||
}, |
||||
}); |
||||
let _this = this; |
||||
// 事件回调绑定 |
||||
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.realplay(); |
||||
this.queryLive(); |
||||
}, |
||||
arrangeWindow() { |
||||
this.splitNum = |
||||
this.list.length > 1 |
||||
? 2 |
||||
: this.list.length > 4 |
||||
? 3 |
||||
: this.list.length > 9 |
||||
? 4 |
||||
: 4; |
||||
const splitNum = this.splitNum; |
||||
this.player.JS_ArrangeWindow(splitNum).then( |
||||
() => { |
||||
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`); |
||||
}, |
||||
(e) => { |
||||
console.error(e); |
||||
} |
||||
); |
||||
}, |
||||
// 初始化结束 |
||||
// 视频预览 |
||||
realplay(index, playUrl) { |
||||
if (this.playUrlList.length === 0) { |
||||
this.$message.warning("当前没有可播放的摄像头"); |
||||
return; |
||||
} |
||||
// this.mode = 0 //解码方式：0普通模式 1高级模式 |
||||
// const { player, mode, urls } = this, |
||||
|
||||
// index = player.currentWindowIndex |
||||
// // playURL = this.realplay |
||||
// console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1) |
||||
// player.JS_Play(playURL, { playURL, mode }, index1).then( |
||||
// () => { |
||||
// console.log('realplay success') |
||||
// }, |
||||
// e => { console.error(e) } |
||||
// ) |
||||
if (this.player === null) return; |
||||
// let { mode, player } = this; |
||||
// let index = this.player.currentWindowIndex; |
||||
let mode = 0; |
||||
// let playURL = this.playUrlList[player.currentWindowIndex].url; |
||||
|
||||
console.log(playURL, { playURL, mode }, index); |
||||
this.player.JS_Play(playURL, { playURL, mode }, index).then( |
||||
() => { |
||||
// 播放成功回调 |
||||
console.log("播放成功"); |
||||
}, |
||||
(err) => { |
||||
console.log("播放失败", err); |
||||
} |
||||
); |
||||
}, |
||||
// 关闭所有视频 |
||||
stopAllPlay() { |
||||
this.player.JS_StopRealPlayAll().then( |
||||
() => { |
||||
this.playback.rate = 0; |
||||
console.log("stopAllPlay success"); |
||||
this.closeVideoTree(); |
||||
}, |
||||
(e) => { |
||||
console.error(e); |
||||
} |
||||
); |
||||
}, |
||||
// 关闭单个视频 |
||||
stopPlay() { |
||||
this.player.JS_Stop().then( |
||||
() => { |
||||
this.playback.rate = 0; |
||||
console.log("stop realplay success"); |
||||
// this.closeVideoTree() |
||||
const index = this.player.currentWindowIndex; |
||||
this.selectAisle(this.videoList[index], index); |
||||
}, |
||||
(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); |
||||
} |
||||
); |
||||
}, |
||||
/** |
||||
* 视频流查询 |
||||
*/ |
||||
//实时监控播放地址查询 |
||||
queryLive() { |
||||
console.log("视频流查询", this.list); |
||||
let playUrlList = []; |
||||
this.list.map((code, index) => { |
||||
// console.log('code ===>',code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code) |
||||
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({ code: code, url: res.data.url }); |
||||
this.playUrlList = playUrlList; |
||||
this.realplay(index, res.data.url); |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
|
||||
/* 回放 */ |
||||
playbackStart() { |
||||
let { player, mode, playback } = this, |
||||
index = player.currentWindowIndex, |
||||
{ startTime, endTime } = playback; |
||||
let playUrl = this.playUrlList[index].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); |
||||
} |
||||
); |
||||
}, |
||||
/* 回放 */ |
||||
playbackQuery() { |
||||
if (this.playUrlList.length === 0) { |
||||
this.$message.warning("当前没有可播放的摄像头"); |
||||
return; |
||||
} |
||||
if ( |
||||
this.playUrlList[this.player.currentWindowIndex].playback != undefined |
||||
) { |
||||
this.playbackStart(); |
||||
return; |
||||
} |
||||
queryLiveBack({ |
||||
cameraIndexCode: this.playUrlList[this.currentWindowIndex].code, |
||||
beginTime: this.playback.startTime, |
||||
endTime: this.playback.endTime, |
||||
}).then((res) => { |
||||
if (res.data.code === 0 || res.data.code == 200) { |
||||
this.playUrlList[this.player.currentWindowIndex].playback = |
||||
res.data.url; |
||||
this.playbackStart(); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style></style> |
||||
@ -1,8 +1,8 @@ |
||||
|
||||
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"],"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 __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":"监控视频"}}]; |
||||
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()})}}); |
||||
service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:Math.round(f/20)})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:void 0,window:void 0,document:void 0,frames:void 0,self:void 0,location:void 0,navigator:void 0,localStorage:void 0,history:void 0,Caches:void 0,screen:void 0,alert:void 0,confirm:void 0,prompt:void 0,fetch:void 0,XMLHttpRequest:void 0,WebSocket:void 0,webkit:void 0,print:void 0}}}}); |
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue