aunix/wvp-GB28181-pro
1
0
Fork 0
mirror of https://gitee.com/pan648540858/wvp-GB28181-pro.git synced 2026-05-24 22:17:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[1078] 合并新UI

Browse Source
This commit is contained in:
lin 2025-05-14 18:01:12 +08:00
parent 68f7d3ef74
commit 081a146f2a
9 changed files with 535 additions and 467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/java/com/genersoft/iot/vmp/jt1078/controller/JT1078TerminalController.java
View File

@ -100,7 +100,7 @@ public class JT1078TerminalController {
@Operation(summary = "1078-更新通道", security = @SecurityRequirement(name = JwtUtils.HEADER)) @Operation(summary = "1078-更新通道", security = @SecurityRequirement(name = JwtUtils.HEADER))
@Parameter(name = "channel", description = "通道", required = true) @Parameter(name = "channel", description = "通道", required = true)
@PostMapping("/channel/update") @PostMapping("/channel/update")
public void updateChannel(JTChannel channel){ public void updateChannel(@RequestBody JTChannel channel){
assert channel.getId() > 0; assert channel.getId() > 0;
assert channel.getChannelId() != null; assert channel.getChannelId() != null;
service.updateChannel(channel); service.updateChannel(channel);

52
web/src/api/jtDevice.js
View File

@ -87,4 +87,56 @@ export function stopPlay(params) {
} }
}) })
} }
export function updateChannel(data) {
return request({
method: 'post',
url: `/api/jt1078/terminal/channel/update`,
data: data
})
}
export function addChannel(data) {
return request({
method: 'post',
url: `/api/jt1078/terminal/channel/add`,
data: data
})
}
export function ptz(params) {
const { phoneNumber, channelId, command, speed } = params
return request({
method: 'get',
url: '/api/jt1078/ptz',
params: {
phoneNumber: phoneNumber,
channelId: channelId,
command: command,
speed: speed
}
})
}
export function wiper(params) {
const { phoneNumber, channelId, command } = params
return request({
method: 'get',
url: '/api/jt1078/wiper',
params: {
phoneNumber: phoneNumber,
channelId: channelId,
command: command
}
})
}
export function fillLight(params) {
const { phoneNumber, channelId, command } = params
return request({
method: 'get',
url: '/api/jt1078/fill-light',
params: {
phoneNumber: phoneNumber,
channelId: channelId,
command: command
}
})
}

0
web/src/icons/svg/jt1078.svg → web/src/icons/svg/jtDevice.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

64
web/src/store/modules/jtDevice.js
View File

@ -1,6 +1,14 @@
import { deleteDeviceById, play, queryChannels, queryDeviceById, queryDevices, stopPlay } from '@/api/jtDevice' import {
import { add } from '@/api/user' add,
import { update } from '@/api/group' addChannel,
deleteDeviceById, fillLight,
play, ptz,
queryChannels,
queryDeviceById,
queryDevices,
stopPlay, update,
updateChannel, wiper
} from '@/api/jtDevice'
const actions = { const actions = {
queryDevices({ commit }, params) { queryDevices({ commit }, params) {
@ -82,6 +90,56 @@ const actions = {
reject(error) reject(error)
}) })
}) })
},
updateChannel({ commit }, data) {
return new Promise((resolve, reject) => {
updateChannel(data).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
addChannel({ commit }, data) {
return new Promise((resolve, reject) => {
addChannel(data).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
ptz({ commit }, params) {
return new Promise((resolve, reject) => {
ptz(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
wiper({ commit }, params) {
return new Promise((resolve, reject) => {
wiper(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
fillLight({ commit }, params) {
return new Promise((resolve, reject) => {
fillLight(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
} }
} }

103
web/src/views/jtDevice/channel/edit.vue
View File

@ -1,94 +1,89 @@
<template> <template>
<div id="channelList" style="width: 100%"> <div id="channelEdit" style="width: 100%; height: 100%">
<div class="page-header"> <div class="page-header">
<div class="page-title"> <div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button> <el-page-header content="编辑推流信息" @back="close" />
<el-divider direction="vertical"></el-divider>
编辑推流信息
</div>
<div class="page-header-btn">
<div style="display: inline;">
<el-button icon="el-icon-close" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
</div>
</div> </div>
</div> </div>
<el-tabs tab-position="left"> <el-tabs tab-position="left" style="padding: 1rem; height: calc(100% - 24px)">
<el-tab-pane label="推流信息编辑" style="background-color: #FFFFFF; padding: 1rem"> <el-tab-pane label="部标通道编辑" style="background-color: #FFFFFF;">
<el-form ref="form" :rules="rules" :model="jtChannel" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr "> <el-form ref="form" :rules="rules" :model="jtChannel" label-width="60px" style="width: 40rem; margin: 0 auto">
<el-form-item label="编号" prop="channelId"> <el-form-item label="编号" prop="channelId">
<el-input v-model="jtChannel.channelId" clearable></el-input> <el-input v-model="jtChannel.channelId" clearable />
</el-form-item> </el-form-item>
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input v-model="jtChannel.name" clearable></el-input> <el-input v-model="jtChannel.name" clearable />
</el-form-item> </el-form-item>
</el-form> <el-form-item style="text-align: right">
<el-form style="text-align: right">
<el-form-item >
<el-button type="primary" @click="onSubmit">保存</el-button> <el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="close">取消</el-button> <el-button @click="close">取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="国标通道配置" v-if="jtChannel.id"> <el-tab-pane :disabled="!jtChannel.id" label="国标通道配置">
<CommonChannelEdit ref="commonChannelEdit" :dataForm="jtChannel" :cancel="close"></CommonChannelEdit> <CommonChannelEdit ref="commonChannelEdit" :data-form="jtChannel" :cancel="close" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script> <script>
import CommonChannelEdit from './common/CommonChannelEdit' import CommonChannelEdit from '../../common/CommonChannelEdit'
export default { export default {
name: 'channelList', name: 'ChannelEdit',
props: [ 'jtChannel', 'closeEdit'],
components: { components: {
CommonChannelEdit CommonChannelEdit
}, },
props: ['jtChannel', 'closeEdit'],
data() { data() {
return { return {
version: 3, version: 3,
rules: { rules: {
deviceId: [{ required: true, message: "请输入设备编号", trigger: "blur" }] deviceId: [{ required: true, message: '请输入设备编号', trigger: 'blur' }]
}, },
winHeight: window.innerHeight - 200,
isLoading: false, isLoading: false,
loadSnap: {}, loadSnap: {}
}; }
}, },
mounted() {}, mounted() {},
methods: { methods: {
onSubmit: function () { onSubmit: function() {
console.log(this.jtChannel) console.log(this.jtChannel)
let isEdit = typeof (this.jtChannel.id) !== "undefined" const isEdit = typeof (this.jtChannel.id) !== 'undefined'
this.$axios({ if (isEdit) {
method: 'post', this.$store.dispatch('jtDevice/updateChannel')
url:`/api/jt1078/terminal/channel/${isEdit?'update':'add'}/`, .then(data => {
params: this.jtChannel this.$message({
}).then((res) => { showClose: true,
console.log(res.data) message: '保存成功',
if (res.data.code === 0) { type: 'success'
this.$message({ })
showClose: true, this.jtChannel = data
message: "保存成功", })
type: "success", .catch(function(error) {
}); console.log(error)
this.jtChannel = res.data.data })
}else { } else {
this.$message({ this.$store.dispatch('jtDevice/addChannel')
showClose: true, .then(data => {
message: res.data.msg, this.$message({
type: "error", showClose: true,
}); message: '保存成功',
} type: 'success'
}).catch(function (error) { })
console.log(error); this.jtChannel = data
}); })
.catch(function(error) {
console.log(error)
})
}
}, },
close: function () { close: function() {
this.closeEdit() this.closeEdit()
}, }
} }
}; }
</script> </script>

58
web/src/views/jtDevice/channel/index.vue
View File

@ -1,29 +1,27 @@
<template> <template>
<div id="channelList" style="height: calc(100vh - 124px);"> <div id="channelList" style="height: calc(100vh - 124px);">
<div v-if="!jtChannel"> <div v-if="!jtChannel">
<div class="page-header"> <el-form :inline="true" size="mini">
<div class="page-title"> <el-form-item style="margin-right: 2rem">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" /> <el-page-header content="通道列表" @back="showDevice" />
<el-divider direction="vertical" /> </el-form-item>
通道列表 <el-form-item label="搜索">
</div> <el-input
<div class="page-header-btn"> v-model="searchSrt"
<div style="display: inline;"> style="margin-right: 1rem; width: auto;"
搜索: placeholder="关键字"
<el-input prefix-icon="el-icon-search"
v-model="searchSrt" clearable
style="margin-right: 1rem; width: auto;" @input="search"
size="mini" />
placeholder="关键字" </el-form-item>
prefix-icon="el-icon-search" <el-form-item>
clearable <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加通道</el-button>
@input="search" </el-form-item>
/> <el-form-item style="float: right;">
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加通道</el-button> <el-button icon="el-icon-refresh-right" circle @click="refresh()" />
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()" /> </el-form-item>
</div> </el-form>
</div>
</div>
<el-container v-loading="isLoging" style="height: 82vh;"> <el-container v-loading="isLoging" style="height: 82vh;">
<el-main style="padding: 5px;"> <el-main style="padding: 5px;">
<el-table <el-table
@ -116,7 +114,6 @@
</div> </div>
<devicePlayer ref="devicePlayer" /> <devicePlayer ref="devicePlayer" />
<channelEdit v-if="jtChannel" ref="channelEdit" :jt-channel="jtChannel" :close-edit="closeEdit" /> <channelEdit v-if="jtChannel" ref="channelEdit" :jt-channel="jtChannel" :close-edit="closeEdit" />
<!--设备列表-->
</div> </div>
</template> </template>
@ -124,7 +121,6 @@
<script> <script>
import devicePlayer from '../jtDevicePlayer.vue' import devicePlayer from '../jtDevicePlayer.vue'
import channelEdit from './edit.vue' import channelEdit from './edit.vue'
import { play } from '@/api/jtDevice'
export default { export default {
name: 'ChannelList', name: 'ChannelList',
@ -170,7 +166,6 @@ export default {
this.getDeviceChannelList() this.getDeviceChannelList()
}, },
initParam: function() { initParam: function() {
this.deviceId = this.$route.params.deviceId
this.currentPage = 1 this.currentPage = 1
this.count = 15 this.count = 15
this.$store.dispatch('jtDevice/queryDeviceById', this.deviceId) this.$store.dispatch('jtDevice/queryDeviceById', this.deviceId)
@ -301,16 +296,9 @@ export default {
}, },
updateChannel: function(row) { updateChannel: function(row) {
this.$store.dispatch('jtDevice/updateChannel', row) this.$store.dispatch('jtDevice/updateChannel', row)
.then(data => { .catch((e) => {
console.log(e)
}) })
this.$axios({
method: 'post',
url: `/api/jt1078/terminal/channel/update`,
params: row
}).then(function(res) {
console.log(JSON.stringify(res))
})
}, },
refresh: function() { refresh: function() {
this.initData() this.initData()

7
web/src/views/jtDevice/channel/record.vue
View File

@ -109,20 +109,17 @@
</template> </template>
<script> <script>
import uiHeader from '../layout/UiHeader.vue' import player from '../../common/jessibuca.vue'
import player from './common/jessibuca.vue'
import moment from 'moment' import moment from 'moment'
import JTDeviceService from './service/JTDeviceService'
export default { export default {
name: 'App', name: 'App',
components: { components: {
uiHeader, player player
}, },
data() { data() {
return { return {
phoneNumber: this.$route.params.phoneNumber, phoneNumber: this.$route.params.phoneNumber,
channelId: this.$route.params.channelId, channelId: this.$route.params.channelId,
deviceService: new JTDeviceService(),
recordsLoading: false, recordsLoading: false,
streamId: '', streamId: '',
hasAudio: false, hasAudio: false,

697
web/src/views/jtDevice/jtDevicePlayer.vue
View File

@ -1,39 +1,121 @@
<template> <template>
<div id="devicePlayer" v-loading="isLoging"> <div id="devicePlayer" v-loading="isLoging">
<el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()" v-if="showVideoDialog"> <el-dialog
v-if="showVideoDialog"
v-el-drag-dialog
title="视频播放"
top="0"
:close-on-click-modal="false"
:visible.sync="showVideoDialog"
@close="close()"
>
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
<el-tabs type="card" :stretch="true" v-model="activePlayer" @tab-click="changePlayer" <el-tabs
v-if="Object.keys(this.player).length > 1"> v-if="Object.keys(this.player).length > 1"
v-model="activePlayer"
type="card"
:stretch="true"
@tab-click="changePlayer"
>
<el-tab-pane label="Jessibuca" name="jessibuca"> <el-tab-pane label="Jessibuca" name="jessibuca">
<jessibucaPlayer v-if="activePlayer === 'jessibuca'" ref="jessibuca" :visible.sync="showVideoDialog" <jessibucaPlayer
:videoUrl="videoUrl" :error="videoError" :message="videoError" v-if="activePlayer === 'jessibuca'"
:hasAudio="hasAudio" fluent autoplay live></jessibucaPlayer> ref="jessibuca"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
:has-audio="hasAudio"
fluent
autoplay
live
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="WebRTC" name="webRTC"> <el-tab-pane label="WebRTC" name="webRTC">
<rtc-player v-if="activePlayer === 'webRTC'" ref="webRTC" :visible.sync="showVideoDialog" <rtc-player
:videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" v-if="activePlayer === 'webRTC'"
:hasAudio="hasAudio" fluent autoplay live></rtc-player> ref="webRTC"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
height="100px"
:has-audio="hasAudio"
fluent
autoplay
live
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="h265web">h265web敬请期待</el-tab-pane> <el-tab-pane label="h265web" name="h265web">
</el-tabs> <h265web
<jessibucaPlayer v-if="Object.keys(this.player).length == 1 && this.player.jessibuca" ref="jessibuca" v-if="activePlayer === 'h265web'"
:visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" ref="h265web"
:hasAudio="hasAudio" fluent autoplay live></jessibucaPlayer> :video-url="videoUrl"
<rtc-player v-if="Object.keys(this.player).length == 1 && this.player.webRTC" ref="jessibuca" :error="videoError"
:visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" :message="videoError"
height="100px" :hasAudio="hasAudio" fluent autoplay live></rtc-player> :has-audio="hasAudio"
fluent
autoplay
live
:show-button="true"
/>
</el-tab-pane>
</el-tabs>
<jessibucaPlayer
v-if="Object.keys(this.player).length == 1 && this.player.jessibuca"
ref="jessibuca"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
:has-audio="hasAudio"
fluent
autoplay
live
/>
<rtc-player
v-if="Object.keys(this.player).length == 1 && this.player.webRTC"
ref="jessibuca"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
height="100px"
:has-audio="hasAudio"
fluent
autoplay
live
/>
<h265web
v-if="Object.keys(this.player).length == 1 && this.player.h265web"
ref="jessibuca"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
height="100px"
:has-audio="hasAudio"
fluent
autoplay
live
/>
</div> </div>
<div id="shared" style="text-align: right; margin-top: 1rem;"> <div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName" @tab-click="tabHandleClick"> <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
<el-tab-pane label="实时视频" name="media"> <el-tab-pane label="实时视频" name="media">
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span> <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
<el-input v-model="getPlayerShared.sharedUrl" :disabled="true"> <el-input v-model="getPlayerShared.sharedUrl" :disabled="true">
<template slot="append"> <template slot="append">
<i class="cpoy-btn el-icon-document-copy" title="点击拷贝" v-clipboard="getPlayerShared.sharedUrl" <i
@success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i> class="cpoy-btn el-icon-document-copy"
title="点击拷贝"
style="cursor: pointer"
@click="copyUrl(getPlayerShared.sharedUrl)"
/>
</template> </template>
</el-input> </el-input>
</div> </div>
@ -41,22 +123,30 @@
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span> <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
<el-input v-model="getPlayerShared.sharedIframe" :disabled="true"> <el-input v-model="getPlayerShared.sharedIframe" :disabled="true">
<template slot="append"> <template slot="append">
<i class="cpoy-btn el-icon-document-copy" title="点击拷贝" v-clipboard="getPlayerShared.sharedIframe" <i
@success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i> class="cpoy-btn el-icon-document-copy"
title="点击拷贝"
style="cursor: pointer"
@click="copyUrl(getPlayerShared.sharedIframe)"
/>
</template> </template>
</el-input> </el-input>
</div> </div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span> <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true"> <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true">
<el-button slot="append" icon="el-icon-document-copy" title="点击拷贝" <el-button
v-clipboard="getPlayerShared.sharedRtmp" slot="append"
@success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> icon="el-icon-document-copy"
<el-dropdown slot="prepend" v-if="streamInfo" trigger="click" @command="copyUrl"> title="点击拷贝"
style="cursor: pointer"
@click="copyUrl(getPlayerShared.sharedIframe)"
/>
<el-dropdown v-if="streamInfo" slot="prepend" trigger="click" @command="copyUrl">
<el-button> <el-button>
更多地址<i class="el-icon-arrow-down el-icon--right"></i> 更多地址<i class="el-icon-arrow-down el-icon--right" />
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu>
<el-dropdown-item v-if="streamInfo.flv" :command="streamInfo.flv"> <el-dropdown-item v-if="streamInfo.flv" :command="streamInfo.flv">
<el-tag>FLV:</el-tag> <el-tag>FLV:</el-tag>
<span>{{ streamInfo.flv }}</span> <span>{{ streamInfo.flv }}</span>
@ -153,62 +243,62 @@
</el-tab-pane> </el-tab-pane>
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
<!--遥控界面--> <!--遥控界面-->
<el-tab-pane label="云台控制" name="control" v-if="showPtz"> <el-tab-pane v-if="showPtz" label="云台控制" name="control">
<div style="display: grid; grid-template-columns: 240px auto; height: 180px; overflow: auto"> <div style="display: grid; grid-template-columns: 240px auto; height: 180px; overflow: auto">
<div style="display: grid; grid-template-columns: 6.25rem auto;"> <div style="display: grid; grid-template-columns: 6.25rem auto;">
<div class="control-wrapper"> <div class="control-wrapper">
<div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')"> <div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
<i class="el-icon-caret-top"></i> <i class="el-icon-caret-top" />
<div class="control-inner-btn control-inner"></div> <div class="control-inner-btn control-inner" />
</div> </div>
<div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')"> <div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
<i class="el-icon-caret-left"></i> <i class="el-icon-caret-left" />
<div class="control-inner-btn control-inner"></div> <div class="control-inner-btn control-inner" />
</div> </div>
<div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')"> <div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom" />
<div class="control-inner-btn control-inner"></div> <div class="control-inner-btn control-inner" />
</div> </div>
<div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')"> <div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
<i class="el-icon-caret-right"></i> <i class="el-icon-caret-right" />
<div class="control-inner-btn control-inner"></div> <div class="control-inner-btn control-inner" />
</div> </div>
<div class="control-round"> <div class="control-round">
<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div> <div class="control-round-inner"><i class="fa fa-pause-circle" /></div>
</div> </div>
<div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 6.25rem;"> <div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 6.25rem;">
<el-slider v-model="controSpeed" :max="100"></el-slider> <el-slider v-model="controSpeed" :max="100" />
</div> </div>
</div> </div>
<div> <div>
<div class="ptz-btn-box"> <div class="ptz-btn-box">
<div style="" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')" title="变倍+"> <div style="" title="变倍+" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
<i class="el-icon-zoom-in control-zoom-btn" style="font-size: 1.5rem;"></i> <i class="el-icon-zoom-in control-zoom-btn" style="font-size: 1.5rem;" />
</div> </div>
<div style="" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')" title="变倍-"> <div style="" title="变倍-" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
<i class="el-icon-zoom-out control-zoom-btn" style="font-size: 1.5rem;"></i> <i class="el-icon-zoom-out control-zoom-btn" style="font-size: 1.5rem;" />
</div> </div>
</div> </div>
<div class="ptz-btn-box"> <div class="ptz-btn-box">
<div @mousedown="ptzCamera('focusnear')" @mouseup="ptzCamera('stop')" title="聚焦+"> <div title="聚焦+" @mousedown="ptzCamera('focusnear')" @mouseup="ptzCamera('stop')">
<i class="iconfont icon-bianjiao-fangda control-zoom-btn" style="font-size: 1.5rem;"></i> <i class="iconfont icon-bianjiao-fangda control-zoom-btn" style="font-size: 1.5rem;" />
</div> </div>
<div @mousedown="ptzCamera('focusfar')" @mouseup="ptzCamera('stop')" title="聚焦-"> <div title="聚焦-" @mousedown="ptzCamera('focusfar')" @mouseup="ptzCamera('stop')">
<i class="iconfont icon-bianjiao-suoxiao control-zoom-btn" style="font-size: 1.5rem;"></i> <i class="iconfont icon-bianjiao-suoxiao control-zoom-btn" style="font-size: 1.5rem;" />
</div> </div>
</div> </div>
<div class="ptz-btn-box"> <div class="ptz-btn-box">
<div @mousedown="ptzCamera('irisin')" @mouseup="ptzCamera('stop')" title="光圈+"> <div title="光圈+" @mousedown="ptzCamera('irisin')" @mouseup="ptzCamera('stop')">
<i class="iconfont icon-guangquan control-zoom-btn" style="font-size: 1.5rem;"></i> <i class="iconfont icon-guangquan control-zoom-btn" style="font-size: 1.5rem;" />
</div> </div>
<div @mousedown="ptzCamera('irisout')" @mouseup="ptzCamera('stop')" title="光圈-"> <div title="光圈-" @mousedown="ptzCamera('irisout')" @mouseup="ptzCamera('stop')">
<i class="iconfont icon-guangquan- control-zoom-btn" style="font-size: 1.5rem;"></i> <i class="iconfont icon-guangquan- control-zoom-btn" style="font-size: 1.5rem;" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="text-align: left" > <div style="text-align: left">
<div style="width: 100%; display: grid; grid-template-rows: 1fr 1fr; grid-row-gap: 10px"> <div style="width: 100%; display: grid; grid-template-rows: 1fr 1fr; grid-row-gap: 10px">
<el-button-group> <el-button-group>
<el-button size="mini" @click="wiper('on')">开启雨刷 <el-button size="mini" @click="wiper('on')">开启雨刷
@ -217,9 +307,9 @@
</el-button> </el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button size="mini" @click="fillLight('on')">开补光灯 <el-button size="mini" @click="fillLight('on')">开补光灯
</el-button> </el-button>
<el-button size="mini" @click="fillLight('off')">关补光灯 <el-button size="mini" @click="fillLight('off')">关补光灯
</el-button> </el-button>
</el-button-group> </el-button-group>
</div> </div>
@ -227,13 +317,19 @@
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="编码信息" name="codec" v-loading="tracksLoading"> <el-tab-pane label="编码信息" name="codec">
<mediaInfo :app="app" :stream="streamId" :mediaServerId="mediaServerId"></mediaInfo> <mediaInfo ref="mediaInfo" :app="app" :stream="streamId" :media-server-id="mediaServerId" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="语音对讲" name="broadcast"> <el-tab-pane label="语音对讲" name="broadcast">
<div class="trank" style="text-align: center;"> <div class="trank" style="text-align: center;">
<el-button @click="broadcastStatusClick()" :type="getBroadcastStatus()" :disabled="broadcastStatus === -2" <el-button
circle icon="el-icon-microphone" style="font-size: 32px; padding: 24px;margin-top: 24px;"/> :type="getBroadcastStatus()"
:disabled="broadcastStatus === -2"
circle
icon="el-icon-microphone"
style="font-size: 32px; padding: 24px;margin-top: 24px;"
@click="broadcastStatusClick()"
/>
<p> <p>
<span v-if="broadcastStatus === -2">正在释放资源</span> <span v-if="broadcastStatus === -2">正在释放资源</span>
<span v-if="broadcastStatus === -1">点击开始对讲</span> <span v-if="broadcastStatus === -1">点击开始对讲</span>
@ -251,45 +347,29 @@
</template> </template>
<script> <script>
import rtcPlayer from '../dialog/rtcPlayer.vue' import rtcPlayer from '../common/rtcPlayer.vue'
import LivePlayer from '@liveqing/liveplayer'
import crypto from 'crypto' import crypto from 'crypto'
import jessibucaPlayer from '../common/jessibuca.vue' import jessibucaPlayer from '../common/jessibuca.vue'
import mediaInfo from '../common/mediaInfo.vue' import mediaInfo from '../common/mediaInfo.vue'
import H265web from '../common/h265web.vue'
export default { export default {
name: 'devicePlayer', name: 'DevicePlayer',
props: {},
components: { components: {
mediaInfo, mediaInfo, H265web,
LivePlayer, jessibucaPlayer, rtcPlayer, jessibucaPlayer, rtcPlayer
},
computed: {
getPlayerShared: function () {
return {
sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
sharedRtmp: this.videoUrl
};
}
},
created() {
console.log("created")
console.log(this.player)
this.broadcastStatus = -1;
if (Object.keys(this.player).length === 1) {
this.activePlayer = Object.keys(this.player)[0]
}
}, },
props: {},
data() { data() {
return { return {
video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4', video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
videoUrl: '', videoUrl: '',
activePlayer: "jessibuca", activePlayer: 'jessibuca',
// 如何你只是用一种播放器，直接注释掉不用的部分即可 // 如何你只是用一种播放器，直接注释掉不用的部分即可
player: { player: {
jessibuca: ["ws_flv", "wss_flv"], jessibuca: ['ws_flv', 'wss_flv'],
webRTC: ["rtc", "rtcs"], webRTC: ['rtc', 'rtcs'],
h265web: ['ws_flv', 'wss_flv']
}, },
showVideoDialog: false, showVideoDialog: false,
streamId: '', streamId: '',
@ -313,263 +393,194 @@ export default {
scanSpeed: 100, scanSpeed: 100,
scanGroup: 0, scanGroup: 0,
tracks: [], tracks: [],
tracksLoading: false,
showPtz: true, showPtz: true,
showRrecord: true, showRrecord: true,
tracksNotLoaded: false, tracksNotLoaded: false,
sliderTime: 0, sliderTime: 0,
seekTime: 0, seekTime: 0,
recordStartTime: 0, recordStartTime: 0,
showTimeText: "00:00:00", showTimeText: '00:00:00',
streamInfo: null, streamInfo: null,
broadcastMode: true, broadcastMode: true,
broadcastRtc: null, broadcastRtc: null,
broadcastStatus: -1, // -2 正在释放资源 -1 默认状态 0 等待接通 1 接通成功 broadcastStatus: -1 // -2 正在释放资源 -1 默认状态 0 等待接通 1 接通成功
}; }
},
computed: {
getPlayerShared: function() {
return {
sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
sharedRtmp: this.videoUrl
}
}
},
created() {
this.broadcastStatus = -1
if (Object.keys(this.player).length === 1) {
this.activePlayer = Object.keys(this.player)[0]
}
}, },
methods: { methods: {
tabHandleClick: function (tab, event) { tabHandleClick: function(tab, event) {
console.log(tab) console.log(tab)
var that = this; this.tracks = []
that.tracks = []; if (tab.name === 'codec') {
that.tracksLoading = true; this.$refs.mediaInfo.startTask()
that.tracksNotLoaded = false; } else {
if (tab.name === "codec") { this.$refs.mediaInfo.stopTask()
this.$axios({
method: 'get',
url: '/zlm/' + this.mediaServerId + '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtsp&app=' + this.app + '&stream=' + this.streamId
}).then(function (res) {
that.tracksLoading = false;
if (res.data.code == 0 && res.data.tracks) {
that.tracks = res.data.tracks;
} else {
that.tracksNotLoaded = true;
that.$message({
showClose: true,
message: '获取编码信息失败,',
type: 'warning'
});
}
}).catch(function (e) {
});
} }
}, },
changePlayer: function (tab) { changePlayer: function(tab) {
console.log(this.player[tab.name][0]) this.activePlayer = tab.name
this.activePlayer = tab.name;
this.videoUrl = this.getUrlByStreamInfo() this.videoUrl = this.getUrlByStreamInfo()
console.log(this.videoUrl)
}, },
openDialog: function (tab, deviceId, channelId, param) { openDialog: function(tab, deviceId, channelId, param) {
if (this.showVideoDialog) { if (this.showVideoDialog) {
return; return
} }
this.tabActiveName = tab; this.tabActiveName = tab
this.channelId = channelId; this.channelId = channelId
this.deviceId = deviceId; this.deviceId = deviceId
this.streamId = ""; this.streamId = ''
this.mediaServerId = ""; this.mediaServerId = ''
this.app = ""; this.app = ''
this.videoUrl = "" this.videoUrl = ''
if (!!this.$refs[this.activePlayer]) { if (this.$refs[this.activePlayer]) {
this.$refs[this.activePlayer].pause(); this.$refs[this.activePlayer].pause()
} }
switch (tab) { switch (tab) {
case "media": case 'media':
this.play(param.streamInfo, param.hasAudio) this.play(param.streamInfo, param.hasAudio)
break; break
case "streamPlay": case 'streamPlay':
this.tabActiveName = "media"; this.tabActiveName = 'media'
this.showRrecord = false; this.showRrecord = false
this.showPtz = false; this.showPtz = false
this.play(param.streamInfo, param.hasAudio) this.play(param.streamInfo, param.hasAudio)
break; break
case "control": case 'control':
break; break
} }
}, },
play: function (streamInfo, hasAudio) { play: function(streamInfo, hasAudio) {
this.streamInfo = streamInfo; this.streamInfo = streamInfo
this.hasAudio = hasAudio; this.hasAudio = hasAudio
this.isLoging = false; this.isLoging = false
// this.videoUrl = streamInfo.rtc; this.videoUrl = this.getUrlByStreamInfo()
this.videoUrl = this.getUrlByStreamInfo(); this.streamId = streamInfo.stream
this.streamId = streamInfo.stream; this.app = streamInfo.app
this.app = streamInfo.app; this.mediaServerId = streamInfo.mediaServerId
this.mediaServerId = streamInfo.mediaServerId;
this.playFromStreamInfo(false, streamInfo) this.playFromStreamInfo(false, streamInfo)
}, },
getUrlByStreamInfo() { getUrlByStreamInfo() {
console.log(this.streamInfo)
let streamInfo = this.streamInfo let streamInfo = this.streamInfo
if (this.streamInfo.transcodeStream) { if (this.streamInfo.transcodeStream) {
streamInfo = this.streamInfo.transcodeStream; streamInfo = this.streamInfo.transcodeStream
} }
if (location.protocol === "https:") { if (location.protocol === 'https:') {
this.videoUrl = streamInfo[this.player[this.activePlayer][1]] this.videoUrl = streamInfo[this.player[this.activePlayer][1]]
} else { } else {
this.videoUrl = streamInfo[this.player[this.activePlayer][0]] this.videoUrl = streamInfo[this.player[this.activePlayer][0]]
} }
return this.videoUrl; return this.videoUrl
}, },
playFromStreamInfo: function (realHasAudio, streamInfo) { playFromStreamInfo: function(realHasAudio, streamInfo) {
this.showVideoDialog = true; this.showVideoDialog = true
this.hasaudio = realHasAudio && this.hasaudio; this.hasaudio = realHasAudio && this.hasaudio
if (this.$refs[this.activePlayer]) { if (this.$refs[this.activePlayer]) {
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo)) this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
}else { } else {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo)) this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
}); })
} }
},
close: function () {
console.log('关闭视频');
if (!!this.$refs[this.activePlayer]){
this.$refs[this.activePlayer].pause();
}
this.videoUrl = '';
this.coverPlaying = false;
this.showVideoDialog = false;
this.stopBroadcast()
},
copySharedInfo: function (data) {
console.log('复制内容：' + data);
this.coverPlaying = false;
this.tracks = []
let _this = this;
this.$copyText(data).then(
function (e) {
_this.$message({
showClose: true,
message: '复制成功',
type: 'success'
});
},
function (e) {
_this.$message({
showClose: true,
message: '复制失败，请手动复制',
type: 'error'
});
}
);
}, },
ptzCamera: function (command) { close: function() {
console.log('云台控制：' + command); console.log('关闭视频')
this.$axios({ if (this.$refs[this.activePlayer]) {
method: 'get', this.$refs[this.activePlayer].pause()
url: '/api/jt1078/ptz', }
params: { this.videoUrl = ''
phoneNumber: this.deviceId, this.showVideoDialog = false
channelId: this.channelId, this.stopBroadcast()
command: command,
speed: this.controSpeed,
}
}).then(function (res) {
});
}, },
wiper: function (command) { ptzCamera: function(command) {
console.log('雨刷控制：' + command); console.log('云台控制：' + command)
this.$axios({ this.$store.dispatch('jtDevice/ptz', {
method: 'get', phoneNumber: this.deviceId,
url: '/api/jt1078/wiper', channelId: this.channelId,
params: { command: command,
phoneNumber: this.deviceId, speed: this.controSpeed
channelId: this.channelId, })
command: command, .catch(e => {
} console.log(e)
}).then(function (res) { })
});
}, },
fillLight: function (command) { wiper: function(command) {
console.log('补光灯开关控制：' + command); console.log('雨刷控制：' + command)
this.$axios({ this.$store.dispatch('jtDevice/wiper', {
method: 'get', phoneNumber: this.deviceId,
url: '/api/jt1078/fill-light', channelId: this.channelId,
params: { command: command
phoneNumber: this.deviceId, })
channelId: this.channelId, .catch(e => {
command: command, console.log(e)
} })
}).then(function (res) {
});
}, },
//////////////////////播放器事件处理////////////////////////// fillLight: function(command) {
videoError: function (e) { console.log('补光灯开关控制：' + command)
console.log("播放器错误：" + JSON.stringify(e)); this.$store.dispatch('jtDevice/fillLight', {
phoneNumber: this.deviceId,
channelId: this.channelId,
command: command
})
.catch(e => {
console.log(e)
})
}, },
presetPosition: function (cmdCode, presetPos) { // ////////////////////播放器事件处理//////////////////////////
console.log('预置位控制：' + this.presetPos + ' : 0x' + cmdCode.toString(16)); videoError: function(e) {
let that = this; console.log('播放器错误：' + JSON.stringify(e))
this.$axios({
method: 'post',
url: '/api/ptz/front_end_command/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '&parameter1=0&parameter2=' + presetPos + '&combindCode2=0'
}).then(function (res) {
});
}, },
setSpeedOrTime: function (cmdCode, groupNum, parameter) { copyUrl: function(dropdownItem) {
let that = this;
let parameter2 = parameter % 256;
let combindCode2 = Math.floor(parameter / 256) * 16;
console.log('前端控制：0x' + cmdCode.toString(16) + ' 0x' + groupNum.toString(16) + ' 0x' + parameter2.toString(16) + ' 0x' + combindCode2.toString(16));
this.$axios({
method: 'post',
url: '/api/ptz/front_end_command/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '&parameter1=' + groupNum + '&parameter2=' + parameter2 + '&combindCode2=' + combindCode2
}).then(function (res) {
});
},
setCommand: function (cmdCode, groupNum, parameter) {
let that = this;
console.log('前端控制：0x' + cmdCode.toString(16) + ' 0x' + groupNum.toString(16) + ' 0x' + parameter.toString(16) + ' 0x0');
this.$axios({
method: 'post',
url: '/api/ptz/front_end_command/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '&parameter1=' + groupNum + '&parameter2=' + parameter + '&combindCode2=0'
}).then(function (res) {
});
},
copyUrl: function (dropdownItem) {
console.log(dropdownItem) console.log(dropdownItem)
this.$copyText(dropdownItem).then((e) => { this.$copyText(dropdownItem).then((e) => {
this.$message.success({ this.$message.success({
showClose: true, showClose: true,
message: "成功拷贝到粘贴板" message: '成功拷贝到粘贴板'
}) })
}, (e) => { }, (e) => {
}) })
}, },
getBroadcastStatus() { getBroadcastStatus() {
if (this.broadcastStatus == -2) { if (this.broadcastStatus === -2) {
return "primary" return 'primary'
} }
if (this.broadcastStatus == -1) { if (this.broadcastStatus === -1) {
return "primary" return 'primary'
} }
if (this.broadcastStatus == 0) { if (this.broadcastStatus === 0) {
return "warning" return 'warning'
} }
if (this.broadcastStatus == 1) { if (this.broadcastStatus === 1) {
return "danger" return 'danger'
} }
}, },
broadcastStatusClick() { broadcastStatusClick() {
if (this.broadcastStatus == -1) { if (this.broadcastStatus === -1) {
// 默认状态， 开始 // 默认状态， 开始
this.broadcastStatus = 0 this.broadcastStatus = 0
// 发起语音对讲 // 发起语音对讲
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/api/play/broadcast/' + this.deviceId + '/' + this.channelId + "?timeout=30&broadcastMode=" + this.broadcastMode url: '/api/play/broadcast/' + this.deviceId + '/' + this.channelId + '?timeout=30&broadcastMode=' + this.broadcastMode
}).then((res) => { }).then((res) => {
if (res.data.code === 0) { if (res.data.code === 0) {
let streamInfo = res.data.data.streamInfo; const streamInfo = res.data.data.streamInfo
if (document.location.protocol.includes("https")) { if (document.location.protocol.includes('https')) {
this.startBroadcast(streamInfo.rtcs) this.startBroadcast(streamInfo.rtcs)
} else { } else {
this.startBroadcast(streamInfo.rtc) this.startBroadcast(streamInfo.rtc)
@ -578,135 +589,101 @@ export default {
this.$message({ this.$message({
showClose: true, showClose: true,
message: res.data.msg, message: res.data.msg,
type: "error", type: 'error'
}); })
} }
}); })
} else if (this.broadcastStatus === 1) { } else if (this.broadcastStatus === 1) {
this.broadcastStatus = -1; this.broadcastStatus = -1
this.broadcastRtc.close() this.broadcastRtc.close()
} }
}, },
startBroadcast(url) { startBroadcast(url) {
// 获取推流鉴权Key // 获取推流鉴权Key
this.$axios({ this.$store.dispatch('user/getUserInfo')
method: 'post', .then((data) => {
url: '/api/user/userInfo', if (data == null) {
}).then((res) => { this.broadcastStatus = -1
if (res.data.code !== 0) { return
this.$message({ }
showClose: true, const pushKey = data.pushKey
message: "获取推流鉴权Key失败",
type: "error",
});
this.broadcastStatus = -1;
} else {
let pushKey = res.data.data.pushKey;
// 获取推流鉴权KEY // 获取推流鉴权KEY
url += "&sign=" + crypto.createHash('md5').update(pushKey, "utf8").digest('hex') url += '&sign=' + crypto.createHash('md5').update(pushKey, 'utf8').digest('hex')
console.log("开始语音喊话： " + url) console.log('开始语音喊话： ' + url)
this.broadcastRtc = new ZLMRTCClient.Endpoint({ this.broadcastRtc = new ZLMRTCClient.Endpoint({
debug: true, // 是否打印日志 debug: true, // 是否打印日志
zlmsdpUrl: url, //流地址 zlmsdpUrl: url, // 流地址
simulecast: false, simulecast: false,
useCamera: false, useCamera: false,
audioEnable: true, audioEnable: true,
videoEnable: false, videoEnable: false,
recvOnly: false, recvOnly: false
}) })
// webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放 this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_NOT_SUPPORT, (e) => { // 获取到了本地流
// console.error('播放成功',e.streams)
// this.broadcastStatus = 1;
// });
//
// webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
// this.broadcastStatus = 1;
// // document.getElementById('selfVideo').srcObject=s;
// // this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
// });
this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_NOT_SUPPORT, (e) => {// 获取到了本地流
console.error('不支持webrtc', e) console.error('不支持webrtc', e)
this.$message({ this.$message({
showClose: true, showClose: true,
message: '不支持webrtc, 无法进行语音喊话', message: '不支持webrtc, 无法进行语音喊话',
type: 'error' type: 'error'
}); })
this.broadcastStatus = -1; this.broadcastStatus = -1
}); })
this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => {// ICE 协商出错 this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => { // ICE 协商出错
console.error('ICE 协商出错') console.error('ICE 协商出错')
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'ICE 协商出错', message: 'ICE 协商出错',
type: 'error' type: 'error'
}); })
this.broadcastStatus = -1; this.broadcastStatus = -1
}); })
this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => {// offer anwser 交换失败 this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => { // offer anwser 交换失败
console.error('offer anwser 交换失败', e) console.error('offer anwser 交换失败', e)
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'offer anwser 交换失败' + e, message: 'offer anwser 交换失败' + e,
type: 'error' type: 'error'
}); })
this.broadcastStatus = -1; this.broadcastStatus = -1
}); })
this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (e) => {// offer anwser 交换失败 this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (e) => { // offer anwser 交换失败
console.log('状态改变', e) console.log('状态改变', e)
if (e === "connecting") { if (e === 'connecting') {
this.broadcastStatus = 0; this.broadcastStatus = 0
} else if (e === "connected") { } else if (e === 'connected') {
this.broadcastStatus = 1; this.broadcastStatus = 1
} else if (e === "disconnected") { } else if (e === 'disconnected') {
this.broadcastStatus = -1; this.broadcastStatus = -1
} }
}); })
this.broadcastRtc.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, (e) => {// offer anwser 交换失败 this.broadcastRtc.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, (e) => { // offer anwser 交换失败
console.log('捕获流失败', e) console.log('捕获流失败', e)
this.$message({ this.$message({
showClose: true, showClose: true,
message: '捕获流失败' + e, message: '捕获流失败' + e,
type: 'error' type: 'error'
}); })
this.broadcastStatus = -1; this.broadcastStatus = -1
}); })
} }).catch(e => {
}).catch((e) => {
this.$message({
showClose: true,
message: e,
type: 'error'
});
this.broadcastStatus = -1;
});
},
stopBroadcast() {
this.broadcastRtc.close();
this.broadcastStatus = -1;
this.$axios({
method: 'get',
url: '/api/play/broadcast/stop/' + this.deviceId + '/' + this.channelId
}).then((res) => {
if (res.data.code == 0) {
// this.broadcastStatus = -1;
// this.broadcastRtc.close()
} else {
this.$message({ this.$message({
showClose: true, showClose: true,
message: res.data.msg, message: e,
type: "error", type: 'error'
}); })
} this.broadcastStatus = -1
}); })
},
stopBroadcast() {
this.broadcastRtc.close()
this.broadcastStatus = -1
this.$store.dispatch('play/broadcastStop', [this.deviceId, this.channelId])
} }
} }
}; }
</script> </script>
<style> <style>

19
web/src/views/jtDevice/list.vue
View File

@ -21,13 +21,13 @@
height="calc(100% - 64px)" height="calc(100% - 64px)"
header-row-class-name="table-header" header-row-class-name="table-header"
> >
<el-table-column prop="phoneNumber" label="终端手机号" min-width="160" /> <el-table-column prop="phoneNumber" label="终端手机号" min-width="120" />
<el-table-column prop="terminalId" label="终端ID" min-width="160" /> <el-table-column prop="terminalId" label="终端ID" min-width="120" />
<el-table-column prop="provinceText" label="省域" min-width="160" /> <el-table-column prop="provinceText" label="省域" min-width="120" />
<el-table-column prop="cityText" label="市县域" min-width="160" /> <el-table-column prop="cityText" label="市县域" min-width="120" />
<el-table-column prop="makerId" label="制造商" min-width="160" /> <el-table-column prop="makerId" label="制造商" min-width="120" />
<el-table-column prop="model" label="型号" min-width="160" /> <el-table-column prop="model" label="型号" min-width="120" />
<el-table-column label="车牌颜色" min-width="160"> <el-table-column label="车牌颜色" min-width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div slot="reference" class="name-wrapper"> <div slot="reference" class="name-wrapper">
<span v-if="scope.row.plateColor === 1">蓝色</span> <span v-if="scope.row.plateColor === 1">蓝色</span>
@ -43,9 +43,9 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="plateNo" label="车牌" min-width="160" /> <el-table-column prop="plateNo" label="车牌" min-width="120" />
<el-table-column prop="registerTime" label="注册时间" min-width="160" /> <el-table-column prop="registerTime" label="注册时间" min-width="160" />
<el-table-column label="状态" min-width="160"> <el-table-column label="状态" min-width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div slot="reference" class="name-wrapper"> <div slot="reference" class="name-wrapper">
<el-tag v-if="scope.row.status" size="medium">在线</el-tag> <el-tag v-if="scope.row.status" size="medium">在线</el-tag>
@ -208,6 +208,7 @@ export default {
}) })
}, },
showChannelList: function(row) { showChannelList: function(row) {
console.log(row)
this.$emit('show-channel', row.id) this.$emit('show-channel', row.id)
}, },
add: function() { add: function() {