Commit 31213c25 authored by zhanglw's avatar zhanglw

矿山监控使用视频流服务flv视频流

parent ffd50123
......@@ -700,6 +700,15 @@ var HttpReq = function(){
return res
})
},
mineMonitoringCameraUpdate: function(data){
return request({
url: '/api/cameraDetail/updateCameraDetail',
method: 'PUT',
data:data,
}).then((res) => {
return res
})
},
mineMonitoringCameraDel: function(data){
return request({
url: '/api/cameraDetail/delCameraDetail',
......
......@@ -16,7 +16,7 @@
<DPcomputer17 class="DPcomputer17Class"></DPcomputer17>
<div v-show="noPtz" id="hkView" class="noPtzVideo1">
<video id="rtcStreamerVideo" controls style="width: 100%;height: 100%;">
<video id="rtcStreamerVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 100%;" autoplay>
您的浏览器不支持:HTML5 video.
</video>
<el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭
......@@ -30,6 +30,7 @@
<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import DPcomputer17 from '../../views/MLargeScreen/components/smallComponents/DPcomputer17.vue'
import {flvjs} from '@/assets/js/flv.js';
export default {
components: {
......@@ -42,6 +43,7 @@ export default {
children: "children",
label: "label",
},
flvPlayer: null,
noPtz: false,
webRtcServer: null,
cameraUrl: `hk/index.html?ip=192.168.0.54&port=80&un=admin&pw=gemho10-7`,
......@@ -81,18 +83,37 @@ export default {
}
})
},
stopPlay(){
if(this.flvPlayer && this.flvPlayer._msectl && this.flvPlayer.e){
this.flvPlayer.pause();
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
this.flvPlayer.destroy();
this.flvPlayer = null
}
},
handleNodeClick(data) {
this.$parent.closeHkView();
if (data.children) {
return;
}
this.noPtz = true;
// this.cameraUrl = `hk/index.html?ip=${data.cameraIp}&port=${data.port}&un=${data.userName}&pw=${data.passWord}`;
this.webRtcServer = new WebRtcStreamer("rtcStreamerVideo","http://39.164.225.220:5007");
// this.webRtcServer.connect(`rtsp://admin:hik12345+@10.10.203.11:554/h264/ch1/main/av_stream`);
this.webRtcServer.connect(`rtsp://${data.userName}:${data.passWord}@${data.cameraIp}:554/h264/ch1/main/av_stream`);
// this.webRtcServer = new WebRtcStreamer("rtcStreamerVideo","http://192.168.3.38:8041");
// this.webRtcServer.connect(`rtsp://admin:gemho10-7@192.168.0.54:554/h264/ch1/main/av_stream`);
// this.webRtcServer = new WebRtcStreamer("rtcStreamerVideo","http://39.164.225.220:5007");
// this.webRtcServer.connect(`rtsp://${data.userName}:${data.passWord}@${data.cameraIp}:554/h264/ch1/main/av_stream`);
if (flvjs.isSupported()) {
this.flvPlayer && this.stopPlay();
this.flvPlayer = flvjs.createPlayer({
type: "flv",
isLive: true,
hasAudio: false,
url: data.url,
});
this.flvPlayer.attachMediaElement(document.getElementById("rtcStreamerVideo"));
this.flvPlayer.load();
} else {
console.log("不支持的格式");
}
},
noPtzCloseFn() {
if(this.webRtcServer){
......
......@@ -71,7 +71,7 @@
<!-- </div>-->
<!-- 嵌入三维地图页面 -->
<!-- <iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>-->
<iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>
<!-- <iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- 单个车辆视频监控 -->
......
......@@ -54,10 +54,11 @@
<el-table :data="cameraDetail" border style="width: 100%" height="710">
<el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
<el-table-column prop="cameraName" label="摄像头名称" align="left"></el-table-column>
<el-table-column prop="streamName" label="视频流名称" align="left"></el-table-column>
<el-table-column prop="cameraIp" label="IP地址" align="left"></el-table-column>
<el-table-column prop="url" label="直播视频源" align="left"></el-table-column>
<!-- <el-table-column prop="cameraIp" label="IP地址" align="left"></el-table-column>-->
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button size="mini" round type="success" @click="cameraDetaileEdit('edit', scope.row)">修改</el-button>
<el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
......@@ -69,15 +70,15 @@
<el-form-item label="摄像头名称" style="margin-bottom:15px;" prop="cameraName">
<el-input v-model="cameraDetailData.cameraName"></el-input>
</el-form-item>
<el-form-item label="视频流名称" style="margin-bottom:15px;" prop="streamName">
<el-input v-model="cameraDetailData.streamName"></el-input>
<el-form-item label="直播视频源" style="margin-bottom:15px;" prop="streamName">
<el-input v-model="cameraDetailData.url"></el-input>
</el-form-item>
<el-form-item label="IP地址" style="margin-bottom:15px;" prop="cameraIp">
<el-input v-model="cameraDetailData.cameraIp"></el-input>
</el-form-item>
<!-- <el-form-item label="端口" style="margin-bottom:15px;">
<el-input v-model="cameraDetailData.cameraPort"></el-input>
</el-form-item> -->
<!-- <el-form-item label="IP地址" style="margin-bottom:15px;" prop="cameraIp">-->
<!-- <el-input v-model="cameraDetailData.cameraIp"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="端口" style="margin-bottom:15px;">-->
<!-- <el-input v-model="cameraDetailData.cameraPort"></el-input>-->
<!-- </el-form-item>-->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cameraDetaileCancel()" style="padding:10px;">取 消</el-button>
......@@ -262,7 +263,7 @@ export default {
if(this.cameraDetailType == "add"){
this.cameraDetailTitle = "增加摄像头";
this.disabledInp = false;
}else if(this.cameraDetailType == "change"){
}else if(this.cameraDetailType == "edit"){
this.cameraDetailTitle = "修改摄像头";
this.cameraDetailData = {...row};
this.disabledInp = true;
......@@ -273,7 +274,6 @@ export default {
if (valid) {
if(this.cameraDetailType == "add"){
this.cameraDetailData.cameraId = this.camID;
console.log(this.cameraDetailData);
HttpReq.truckDispatching.mineMonitoringCameraAdd(this.cameraDetailData).then((res) => {
this.$message.success('添加成功');
HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:this.camID}).then((res) => {
......@@ -283,19 +283,17 @@ export default {
}).catch(function(error) { });
this.cameraDetailVisible = false;
this.cameraDetailData = {};
}else if(this.cameraDetailType == "change"){
let that = this;
let newData = [];
this.cameraDetail.forEach(function(item){
if(item.id == that.cameraDetailData.id){
newData.push(that.cameraDetailData);
}else{
newData.push(item);
}
})
this.cameraDetail = newData;
}else if(this.cameraDetailType == "edit"){
this.cameraDetailData.cameraId = this.camID;
HttpReq.truckDispatching.mineMonitoringCameraUpdate(this.cameraDetailData).then((res) => {
this.$message.success('修改成功');
HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:this.camID}).then((res) => {
console.log("mainCameraDetail",res);
this.cameraDetail = res.content
})
}).catch(function(error) { });
this.cameraDetailVisible = false;
this.cameraDetailData = {id:"",cameraId:"",cameraName:"",streamName:"",cameraIp:"",cameraPort:"",cameraWay:""};
this.cameraDetailData = {};
}
} else {
console.log('error submit!!');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment