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

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 () {