mirror of
https://gitee.com/java110/MicroCommunityWeb.git
synced 2026-02-23 21:36:37 +08:00
优化监控加入 预览功能
This commit is contained in:
java110
parent
6e68a6cad5
commit
af1e183748
@ -26,6 +26,12 @@
|
||||
<input v-model="addMonitorMachineInfo.machineVersion" type="text" :placeholder="vc.i18n('必填，请填写视频通道编码ID','addMonitorMachine')" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label"><span><vc:i18n name="视频流端口" namespace="addMonitorMachine"></vc:i18n></span></label>
|
||||
<div class="col-sm-10">
|
||||
<input v-model="addMonitorMachineInfo.machineIp" type="text" :placeholder="vc.i18n('必填，请填写视频流端口，填写物联网未占用端口','addMonitorMachine')" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -26,6 +26,12 @@
|
||||
<input v-model="editMonitorMachineInfo.machineVersion" type="text" :placeholder="vc.i18n('必填，请填写视频通道编码ID','editMonitorMachine')" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label"><span><vc:i18n name="视频流端口" namespace="addMonitorMachine"></vc:i18n></span></label>
|
||||
<div class="col-sm-10">
|
||||
<input v-model="editMonitorMachineInfo.machineIp" type="text" :placeholder="vc.i18n('必填，请填写视频流端口，填写物联网未占用端口','addMonitorMachine')" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
<div>
|
||||
<div id="viewCameraVideoModel" class="modal fade" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h3 class="m-t-none m-b ">
|
||||
<span>{{viewCameraVideoInfo.machine.machineName}}</span>
|
||||
</h3>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<video id="viewCameraVideo" controls autoplay="autoplay" muted width="100%" height="400px" style="background-color: #000;"></video>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<button type="button" class="btn btn-warning float-right" @click="_closeViewCameraVideo()"><vc:i18n name="关闭" namespace="addMonitorMachine"></vc:i18n></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
129
public/components/property/viewCameraVideo/viewCameraVideo.js
Normal file
129
public/components/property/viewCameraVideo/viewCameraVideo.js
Normal file
@ -0,0 +1,129 @@
|
||||
/**
|
||||
入驻小区
|
||||
**/
|
||||
(function(vc) {
|
||||
var DEFAULT_PAGE = 1;
|
||||
var DEFAULT_ROWS = 1;
|
||||
vc.extends({
|
||||
data: {
|
||||
viewCameraVideoInfo: {
|
||||
machineId: '',
|
||||
machine: {},
|
||||
timer: {},
|
||||
sdk: {}
|
||||
}
|
||||
},
|
||||
_initMethod: function() {},
|
||||
_initEvent: function() {
|
||||
vc.on('viewCameraVideo', 'openCameraVideoModal', function(_machine) {
|
||||
clearInterval($that.viewCameraVideoInfo.timer);
|
||||
$that.viewCameraVideoInfo.machineId = _machine.machineId;
|
||||
$('#viewCameraVideoModel').modal('show');
|
||||
$that._listViewCameraVideoMachines();
|
||||
$that._initMachineVideo();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
_listViewCameraVideoMachines: function() {
|
||||
let param = {
|
||||
params: {
|
||||
page: 1,
|
||||
row: 1,
|
||||
machineId: $that.viewCameraVideoInfo.machineId,
|
||||
communityId: vc.getCurrentCommunity().communityId
|
||||
}
|
||||
}
|
||||
//发送get请求
|
||||
vc.http.get('machineManage',
|
||||
'list',
|
||||
param,
|
||||
function(json, res) {
|
||||
let _machineManageInfo = JSON.parse(json);
|
||||
$that.viewCameraVideoInfo.machine = _machineManageInfo.machines[0];
|
||||
$that.applyViewCamera($that.viewCameraVideoInfo.machine);
|
||||
},
|
||||
function(errInfo, error) {
|
||||
console.log('请求失败处理');
|
||||
}
|
||||
);
|
||||
},
|
||||
_initMachineVideo: function() {
|
||||
timer = setInterval(function() {
|
||||
$that.heartbeatCamera();
|
||||
}, 1000 * 30)
|
||||
},
|
||||
_playVideo: function(_videoId, url) {
|
||||
$('#viewCameraVideo').show();
|
||||
//let sdk = null; // Global handler to do cleanup when replaying.
|
||||
$that.viewCameraVideoInfo.sdk = new SrsRtcPlayerAsync();
|
||||
$('#viewCameraVideo').prop('srcObject', $that.viewCameraVideoInfo.sdk.stream);
|
||||
$that.viewCameraVideoInfo.sdk.play(url).then(function(session) {}).catch(function(reason) {
|
||||
$that.viewCameraVideoInfo.sdk.close();
|
||||
$('#viewCameraVideo').hide();
|
||||
console.error(reason);
|
||||
});
|
||||
},
|
||||
applyViewCamera: function(_machine) {
|
||||
let data = {
|
||||
machineId: _machine.machineId,
|
||||
communityId: vc.getCurrentCommunity().communityId,
|
||||
}
|
||||
vc.http.apiPost(
|
||||
'/machine.playCamera',
|
||||
JSON.stringify(data), {
|
||||
emulateJSON: true
|
||||
},
|
||||
function(json, res) {
|
||||
//vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
|
||||
let _json = JSON.parse(json);
|
||||
if (_json.code == 0) {
|
||||
$that._playVideo(_machine.machineId, _json.data.address);
|
||||
_machine.callId = _json.data.callId
|
||||
return;
|
||||
}
|
||||
vc.toast(_json.msg);
|
||||
},
|
||||
function(errInfo, error) {
|
||||
console.log('请求失败处理');
|
||||
vc.message(json);
|
||||
|
||||
});
|
||||
},
|
||||
heartbeatCamera: function() {
|
||||
let _machine = $that.viewCameraVideoInfo.machine;
|
||||
if (!_machine) {
|
||||
return;
|
||||
}
|
||||
|
||||
let _callIds = _machine.callId;
|
||||
|
||||
if (!_callIds) {
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
callIds: _callIds,
|
||||
communityId: vc.getCurrentCommunity().communityId,
|
||||
machineId: _machine.machineId
|
||||
}
|
||||
vc.http.apiPost(
|
||||
'/machine.heartbeatCamera',
|
||||
JSON.stringify(data), {
|
||||
emulateJSON: true
|
||||
},
|
||||
function(json, res) {
|
||||
//vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
|
||||
let _json = JSON.parse(json);
|
||||
if (_json.code == -3) { // 摄像头 未推流 重新播放推流
|
||||
$that.viewCameras();
|
||||
}
|
||||
},
|
||||
function(errInfo, error) {});
|
||||
},
|
||||
_closeViewCameraVideo: function() {
|
||||
clearInterval($that.viewCameraVideoInfo.timer);
|
||||
$that.viewCameraVideoInfo.sdk.close();
|
||||
$('#viewCameraVideoModel').modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
})(window.vc);
|
||||
@ -52,6 +52,8 @@
|
||||
<script src="/js/xlsx.full.min.js"></script>
|
||||
<script src="/js/xlsxStyle.core.min.js"></script>
|
||||
<script src="/js/xlsxStyle.utils.js"></script>
|
||||
<script src="/js/webrtc/adapter-7.4.0.min.js"></script>
|
||||
<script src="/js/webrtc/srs.sdk.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -59,6 +59,9 @@
|
||||
<th class="text-center">
|
||||
<span><vc:i18n name="视频通道编码ID" namespace="monitorMachineManage"></vc:i18n></span>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
<span><vc:i18n name="视频流端口" namespace="monitorMachineManage"></vc:i18n></span>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
<span><vc:i18n name="状态" namespace="monitorMachineManage"></vc:i18n></span>
|
||||
</th>
|
||||
@ -80,6 +83,7 @@
|
||||
<td class="text-center">{{machine.machineName}}</td>
|
||||
<td class="text-center">{{machine.machineCode}}</td>
|
||||
<td class="text-center">{{machine.machineVersion}}</td>
|
||||
<td class="text-center">{{machine.machineIp}}</td>
|
||||
<td class="text-center">{{machine.stateName}}</td>
|
||||
<td class="text-center">{{machine.heartbeatTime}}</td>
|
||||
<td v-for="item in machine.listValues" class="text-center">
|
||||
@ -91,6 +95,10 @@
|
||||
</button>
|
||||
<button class="btn-white btn btn-xs" v-on:click="_openDeleteMachineModel(machine)"><span><vc:i18n name="删除" namespace="monitorMachineManage"></vc:i18n></span>
|
||||
</button>
|
||||
<button class="btn-white btn btn-xs" v-on:click="_openViewVideoModel(machine)"><span><vc:i18n name="预览" namespace="monitorMachineManage"></vc:i18n></span>
|
||||
</button>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -112,4 +120,5 @@
|
||||
<vc:create path="property/editMonitorMachine"></vc:create>
|
||||
<vc:create path="property/deleteMachine"></vc:create>
|
||||
<vc:create path="property/machineState"></vc:create>
|
||||
<vc:create path="property/viewCameraVideo"></vc:create>
|
||||
</div>
|
||||
@ -133,6 +133,9 @@
|
||||
});
|
||||
_call();
|
||||
}, 'MONITOR');
|
||||
},
|
||||
_openViewVideoModel: function(_machine) {
|
||||
vc.emit('viewCameraVideo', 'openCameraVideoModal', _machine);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -58,12 +58,10 @@
|
||||
|
||||
<body>
|
||||
<vc:create path="frame/bodyTop"></vc:create>
|
||||
<vc:create path="frame/nav2"></vc:create>
|
||||
<div class="vc-page flex justify-start">
|
||||
|
||||
<vc:create path="frame/menu2"></vc:create>
|
||||
|
||||
<div class="vc-main">
|
||||
<vc:create path="frame/nav2"></vc:create>
|
||||
<div class="vc-main-content">
|
||||
|
||||
<div id="component" class="vc-wrapper vc-content animated fadeInRight" vc-path="/common/chooseEnterCommunity">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user