XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加拉流代理与国标关联, 支持代理rtsp/rtmp/...，转发到国标

Browse Source
This commit is contained in:
panlinlin
2021-04-01 18:06:21 +08:00
parent 56859d09df
commit 7dc8fd4a1e
42 changed files with 1394 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
web_src/src/components/PLatformStreamList.vue Normal file
View File

@@ -0,0 +1,283 @@
<template>
<div id="pLatformStreamList">
<el-container>
<el-header>
<uiHeader></uiHeader>
</el-header>
<el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">直播级联列表</span>
</div>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">添加代理</el-button>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<el-table :data="streamProxyList" border style="width: 100%" :height="winHeight">
<el-table-column prop="app" label="应用名" align="center" show-overflow-tooltip/>
<el-table-column prop="stream" label="流ID" align="center" show-overflow-tooltip/>
<el-table-column prop="gbId" label="国标平台" align="center" show-overflow-tooltip/>
<el-table-column label="转HLS" width="120" align="center">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable_hls">已启用</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.enable_hls">未启用</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="MP4录制" width="120" align="center">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable_mp4">已启用</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.enable_mp4">未启用</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="启用" width="120" align="center">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.enable">未启用</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="360" align="center" fixed="right">
<template slot-scope="scope">
<el-button-group>
<el-button size="mini" icon="el-icon-video-play" v-if="scope.row.enable" @click="play(scope.row)">播放</el-button>
<el-button size="mini" icon="el-icon-close" type="success" v-if="scope.row.enable" @click="stop(scope.row)">停用</el-button>
<el-button size="mini" icon="el-icon-check" type="primary" v-if="!scope.row.enable" @click="start(scope.row)">启用</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteStreamProxy(scope.row)">删除</el-button>
<!-- <el-button size="mini" icon="el-icon-position" type="primary" >加入国标</el-button> -->
</el-button-group>
</template>
</el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="currentChange"
:current-page="currentPage"
:page-size="count"
:page-sizes="[15, 25, 35, 50]"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
<streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
</el-main>
</el-container>
</div>
</template>
<script>
import streamProxyEdit from './dialog/StreamProxyEdit.vue'
import devicePlayer from './dialog/devicePlayer.vue'
import uiHeader from './UiHeader.vue'
export default {
name: 'pLatformStreamList',
components: {
devicePlayer,
streamProxyEdit,
uiHeader
},
data() {
return {
streamProxyList: [],
currentPusher: {}, //当前操作设备对象
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth:0,
winHeight: window.innerHeight - 200,
currentPage:1,
count:15,
total:0,
getListLoading: false
};
},
computed: {
},
mounted() {
this.initData();
// this.updateLooper = setInterval(this.initData, 10000);
},
destroyed() {
this.$destroy('videojs');
clearTimeout(this.updateLooper);
},
methods: {
initData: function() {
this.getStreamProxyList();
},
currentChange: function(val){
this.currentPage = val;
this.getStreamProxyList();
},
handleSizeChange: function(val){
this.count = val;
this.getStreamProxyList();
},
getStreamProxyList: function() {
let that = this;
this.getListLoading = true;
this.$axios.get(`/api/proxy/list`,{
params: {
page: that.currentPage,
count: that.count
}
} )
.then(function (res) {
console.log(res);
console.log(res.data.list);
that.total = res.data.total;
that.streamProxyList = res.data.list;
that.getListLoading = false;
})
.catch(function (error) {
console.log(error);
that.getListLoading = false;
});
},
addStreamProxy: function(){
this.$refs.streamProxyEdit.openDialog(null, this.initData)
},
saveStreamProxy: function(){
},
play: function(row){
let that = this;
this.getListLoading = true;
this.$axios.get(`/api/media/getStreamInfoByAppAndStream`,{
params: {
app: row.app,
stream: row.stream
}
})
.then(function (res) {
that.getListLoading = false;
that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
streamInfo: res.data,
hasAudio: true
});
})
.catch(function (error) {
console.log(error);
that.getListLoading = false;
});
},
deleteStreamProxy: function(row){
console.log(1111)
let that = this;
this.getListLoading = true;
this.$axios.get(`/api/proxy/del`,{
params: {
app: row.app,
stream: row.stream
}
})
.then(function (res) {
that.getListLoading = false;
that.initData()
})
.catch(function (error) {
console.log(error);
that.getListLoading = false;
});
},
start: function(row){
let that = this;
this.getListLoading = true;
this.$axios.get(`/api/proxy/start`,{
params: {
app: row.app,
stream: row.stream
}
})
.then(function (res) {
that.getListLoading = false;
that.initData()
})
.catch(function (error) {
console.log(error);
that.getListLoading = false;
});
},
stop: function(row){
let that = this;
this.getListLoading = true;
this.$axios.get(`/api/proxy/stop`,{
params: {
app: row.app,
stream: row.stream
}
})
.then(function (res) {
that.getListLoading = false;
that.initData()
})
.catch(function (error) {
console.log(error);
that.getListLoading = false;
});
}
}
};
</script>
<style>
.videoList {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.video-item {
position: relative;
width: 15rem;
height: 10rem;
margin-right: 1rem;
background-color: #000000;
}
.video-item-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
}
.video-item-img:after {
content: "";
display: inline-block;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 3rem;
height: 3rem;
background-image: url("../assets/loading.png");
background-size: cover;
background-color: #000000;
}
.video-item-title {
position: absolute;
bottom: 0;
color: #000000;
background-color: #ffffff;
line-height: 1.5rem;
padding: 0.3rem;
width: 14.4rem;
}
.cpoy-btn {
cursor: pointer;
margin-right: 10px;
}
</style>

2
web_src/src/components/ParentPlatformList.vue
View File

@@ -19,7 +19,7 @@
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
<el-tag size="medium" v-if="!scope.row.enable">未启用</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.enable">未启用</el-tag>
</div>
</template>
</el-table-column>

21
web_src/src/components/PushVideoList.vue
View File

@@ -19,10 +19,14 @@
</el-table-column>
<el-table-column prop="totalReaderCount" label="在线人数" width="240" align="center">
</el-table-column>
<el-table-column prop="createStamp" label="开始时间" align="center">
<el-table-column label="开始时间" align="center" >
<template slot-scope="scope">
<el-button-group>
{{dateFormat(parseInt(scope.row.createStamp))}}
</el-button-group>
</template>
</el-table-column>
<el-table-column label="操作" width="360" align="center" fixed="right">
<template slot-scope="scope">
<el-button-group>
@@ -144,6 +148,19 @@
},
stopPuhsh: function(row){
console.log(row)
},
dateFormat: function(/** timestamp=0 **/) {
var ts = arguments[0] || 0;
var t,y,m,d,h,i,s;
t = ts ? new Date(ts*1000) : new Date();
y = t.getFullYear();
m = t.getMonth()+1;
d = t.getDate();
h = t.getHours();
i = t.getMinutes();
s = t.getSeconds();
// 可根据需要在这里定义时间格式
return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)+' '+(h<10?'0'+h:h)+':'+(i<10?'0'+i:i)+':'+(s<10?'0'+s:s);
}
}

7
web_src/src/components/StreamProxyList.vue
View File

@@ -13,7 +13,8 @@
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<el-table :data="streamProxyList" border style="width: 100%" :height="winHeight">
<el-table-column prop="app" label="应用名" align="center" show-overflow-tooltip/>
<el-table-column prop="name" label="名称" align="center" show-overflow-tooltip/>
<el-table-column prop="app" label="流应用名" align="center" show-overflow-tooltip/>
<el-table-column prop="stream" label="流ID" align="center" show-overflow-tooltip/>
<el-table-column label="流地址" width="400" align="center" show-overflow-tooltip >
<template slot-scope="scope">
@@ -30,7 +31,7 @@
</div>
</template>
</el-table-column>
<el-table-column prop="gbId" label="国标编码" width="180" align="center" show-overflow-tooltip/>
<el-table-column label="转HLS" width="120" align="center">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
@@ -56,7 +57,6 @@
</template>
</el-table-column>
<el-table-column label="操作" width="360" align="center" fixed="right">
<template slot-scope="scope">
<el-button-group>
@@ -64,6 +64,7 @@
<el-button size="mini" icon="el-icon-close" type="success" v-if="scope.row.enable" @click="stop(scope.row)">停用</el-button>
<el-button size="mini" icon="el-icon-check" type="primary" v-if="!scope.row.enable" @click="start(scope.row)">启用</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteStreamProxy(scope.row)">删除</el-button>
<!-- <el-button size="mini" icon="el-icon-position" type="primary" >加入国标</el-button> -->
</el-button-group>
</template>
</el-table-column>

11
web_src/src/components/dialog/StreamProxyEdit.vue
View File

@@ -21,7 +21,10 @@
<el-option label="FFmpeg" value="ffmpeg"></el-option>
</el-select>
</el-form-item>
<el-form-item label="应用名" prop="app">
<el-form-item label="名称" prop="name">
<el-input v-model="proxyParam.name" clearable></el-input>
</el-form-item>
<el-form-item label="流应用名" prop="app">
<el-input v-model="proxyParam.app" clearable></el-input>
</el-form-item>
<el-form-item label="流ID" prop="stream">
@@ -39,6 +42,9 @@
<el-form-item label="FFmpeg命令模板" prop="ffmpeg_cmd_key" v-if="proxyParam.type=='ffmpeg'">
<el-input v-model="proxyParam.ffmpeg_cmd_key" clearable></el-input>
</el-form-item>
<el-form-item label="国标编码" prop="gbId">
<el-input v-model="proxyParam.gbId" placeholder="设置国标编码可推送到国标" clearable></el-input>
</el-form-item>
<el-form-item label="拉流方式" prop="rtp_type" v-if="proxyParam.type=='default'">
<el-select
v-model="proxyParam.rtp_type"
@@ -100,6 +106,7 @@ export default {
isLoging: false,
onSubmit_text: "立即创建",
proxyParam: {
name: null,
type: "default",
app: null,
stream: null,
@@ -107,6 +114,7 @@ export default {
src_url: null,
timeout_ms: null,
ffmpeg_cmd_key: null,
gbId: null,
rtp_type: null,
enable: true,
enable_hls: true,
@@ -114,6 +122,7 @@ export default {
},
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
app: [{ required: true, message: "请输入应用名", trigger: "blur" }],
stream: [{ required: true, message: "请输入流ID", trigger: "blur" }],
url: [{ required: true, message: "请输入要代理的流", trigger: "blur" }],

8
web_src/src/components/dialog/chooseChannel.vue
View File

@@ -13,7 +13,11 @@
</el-tab-pane>
<el-tab-pane label="直播流通道" name="streamchannel">
<!-- TODO -->
<el-container>
<el-main style="background-color: #FFF;">
<chooseChannelFoStream :platformId=platformId ></chooseChannelFoStream>
</el-main>
</el-container>
</el-tab-pane>
</el-tabs>
</el-dialog>
@@ -22,11 +26,13 @@
<script>
import chooseChannelForGb from '../dialog/chooseChannelForGb.vue'
import chooseChannelFoStream from '../dialog/chooseChannelForStream.vue'
export default {
name: 'chooseChannel',
props: {},
components: {
chooseChannelForGb,
chooseChannelFoStream,
},
computed: {
// getPlayerShared: function () {

2
web_src/src/components/dialog/chooseChannelForGb.vue
View File

@@ -27,7 +27,7 @@
<el-table-column type="selection" width="55" align="center" fixed > </el-table-column>
<el-table-column prop="channelId" label="通道编号" width="210">
</el-table-column>
<el-table-column prop="name" label="通道名称">
<el-table-column prop="name" label="通道名称" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="deviceId" label="设备编号" width="210" >
</el-table-column>

215
web_src/src/components/dialog/chooseChannelForStream.vue Normal file
View File

@@ -0,0 +1,215 @@
<template>
<div id="chooseChannelFoStream" >
<el-table ref="gbStreamsTable" :data="gbStreams" border style="width: 100%" @selection-change="checkedChanage" >
<el-table-column type="selection" width="55" align="center" fixed > </el-table-column>
<el-table-column prop="name" label="名称" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="app" label="应用名" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="stream" label="流ID" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="gbId" label="国标编码" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="streamType" label="流来源" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column label="流来源" width="100" align="center">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.streamType == 'proxy'">拉流代理</el-tag>
<el-tag size="medium" v-if="scope.row.streamType == 'push'">推流</el-tag>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination style="float: right;margin-top: 1rem;" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'chooseChannelFoStream',
props: {},
computed: {
// getPlayerShared: function () {
// return {
// sharedUrl: window.location.host + '/' + this.videoUrl,
// sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
// sharedRtmp: this.videoUrl
// };
// }
},
props: ['platformId'],
created() {
this.initData();
},
data() {
return {
gbStreams: [],
gbChoosechannel:{},
searchSrt: "",
channelType: "",
online: "",
choosed: "",
currentPage: 0,
count: 10,
total: 0,
eventEnanle: false
};
},
watch:{
platformId(newData, oldData){
console.log(newData)
this.initData()
},
},
methods: {
initData: function() {
this.getChannelList();
},
currentChange: function (val) {
this.currentPage = val;
this.initData();
},
handleSizeChange: function (val) {
this.count = val;
console.log(val)
this.initData();
},
rowcheckedChanage: function (val, row) {
console.log(val)
console.log(row)
},
checkedChanage: function (val) {
var that = this;
if (!that.eventEnanle) {
return;
}
var tabelData = JSON.parse(JSON.stringify(this.$refs.gbStreamsTable.data));
console.log("checkedChanage")
console.log(val)
var newData = {};
var addData = [];
var delData = [];
if (val.length > 0) {
for (let i = 0; i < val.length; i++) {
const element = val[i];
var key = element.app + "_" + element.stream;
newData[key] = element;
if (!!!that.gbChoosechannel[key]){
addData.push(element)
}else{
delete that.gbChoosechannel[key]
}
}
var oldKeys = Object.keys(that.gbChoosechannel);
if (oldKeys.length > 0) {
for (let i = 0; i < oldKeys.length; i++) {
const key = oldKeys[i];
delData.push(that.gbChoosechannel[key])
}
}
}else{
var oldKeys = Object.keys(that.gbChoosechannel);
if (oldKeys.length > 0) {
for (let i = 0; i < oldKeys.length; i++) {
const key = oldKeys[i];
delData.push(that.gbChoosechannel[key])
}
}
}
that.gbChoosechannel = newData;
if (Object.keys(addData).length >0) {
console.log(addData)
that.$axios({
method:"post",
url:"/api/gbStream/add",
data:{
platformId: that.platformId,
gbStreams: addData,
}
}).then((res)=>{
console.log("保存成功")
}).catch(function (error) {
console.log(error);
});
}
if (Object.keys(delData).length >0) {
console.log(delData)
that.$axios({
method:"post",
url:"/api/gbStream/del",
data:{
gbStreams: delData,
}
}).then((res)=>{
console.log("移除成功")
}).catch(function (error) {
console.log(error);
});
}
},
shareAllCheckedChanage: function (val) {
this.chooseChanage(null, val)
},
getChannelList: function () {
let that = this;
this.$axios.get(`/api/gbStream/list`, {
params: {
page: that.currentPage,
count: that.count,
query: that.searchSrt,
online: that.online,
choosed: that.choosed,
platformId: that.platformId,
channelType: that.channelType
}
})
.then(function (res) {
that.total = res.data.total;
that.gbStreams = res.data.list;
that.gbChoosechannel = {};
// 防止出现表格错位
that.$nextTick(() => {
that.$refs.gbStreamsTable.doLayout();
// 默认选中
var chooseGBS = [];
for (let i = 0; i < res.data.list.length; i++) {
const row = res.data.list[i];
console.log(row.platformId)
if (row.platformId == that.platformId) {
that.$refs.gbStreamsTable.toggleRowSelection(row, true);
chooseGBS.push(row)
that.gbChoosechannel[row.app+ "_" + row.stream] = row;
}
}
that.eventEnanle = true;
// that.checkedChanage(chooseGBS)
})
console.log(that.gbChoosechannel)
})
.catch(function (error) {
console.log(error);
});
},
handleGBSelectionChange: function() {
this.initData();
},
}
};
</script>
<style>
</style>

7
web_src/src/components/dialog/devicePlayer.vue
View File

@@ -163,6 +163,7 @@ export default {
},
showVideoDialog: false,
streamId: '',
app : '',
convertKey: '',
deviceId: '',
channelId: '',
@@ -198,7 +199,7 @@ export default {
if (tab.name == "codec") {
this.$axios({
method: 'get',
url: '/zlm/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app=rtp&stream='+ this.streamId
url: '/zlm/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app='+ this.app +'&stream='+ this.streamId
}).then(function (res) {
that.tracksLoading = false;
if (res.data.code == 0 && res.data.online) {
@@ -218,6 +219,7 @@ export default {
this.channelId = channelId;
this.deviceId = deviceId;
this.streamId = "";
this.app = "";
this.videoUrl = ""
if (!!this.$refs.videoPlayer) {
this.$refs.videoPlayer.pause();
@@ -228,11 +230,11 @@ export default {
break;
case "record":
this.showVideoDialog = true;
this.videoHistory.date = param.date;
this.queryRecords()
break;
case "streamPlay":
this.tabActiveName = "media";
this.showRrecord = false,
this.showPtz = false,
this.play(param.streamInfo, param.hasAudio)
@@ -250,6 +252,7 @@ export default {
this.isLoging = false;
this.videoUrl = streamInfo.ws_flv;
this.streamId = streamInfo.streamId;
this.app = streamInfo.app;
this.playFromStreamInfo(false, streamInfo)
},
coverPlay: function () {