|
|
@@ -7,6 +7,7 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<hr style="border-top: 2px solid #eee;margin: 10px 0;" />
|
|
|
+
|
|
|
<el-row>
|
|
|
<el-table :data="deviceList.content">
|
|
|
<el-table-column prop="id" label="序号" width="120px"></el-table-column>
|
|
|
@@ -130,16 +131,25 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<!-- 摄像头播放 -->
|
|
|
- <el-dialog :title="videoData.title" @close="handleStop" :visible.sync="isShowVideo" :fullscreen="true">
|
|
|
- <rtsp-player ref="rtspPlayer" :rtspData="videoData"></rtsp-player>
|
|
|
- </el-dialog>
|
|
|
+ <div v-show="isShowVideo" ref="playerBox" class="player">
|
|
|
+ <div class="title">
|
|
|
+ <div>{{videoData.title}}</div>
|
|
|
+ <el-button class="btn-close" @click="handleStop" type="danger" icon="el-icon-close" circle></el-button>
|
|
|
+ </div>
|
|
|
+ <div id="videoWrapper"></div>
|
|
|
+ <div id="loading">
|
|
|
+ <i class="el-icon-loading"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapActions } from "vuex";
|
|
|
-import rtspPlayer from "../common/rtsp-player/index";
|
|
|
+import { mapActions,mapState } from "vuex";
|
|
|
+// import rtspPlayer from "../common/rtsp-player/index";
|
|
|
+// import jsmpegPlayer from "../common/jsmpeg-player"
|
|
|
|
|
|
+import JSMpeg from '@cycjimmy/jsmpeg-player'
|
|
|
// 表单验证规则
|
|
|
const rules = {
|
|
|
name: [{ required: true, message: "请输入摄像头名称", trigger: "blur" }],
|
|
|
@@ -152,7 +162,6 @@ const pageSize = 10;
|
|
|
|
|
|
export default {
|
|
|
name: "CameraManagement",
|
|
|
- components: { rtspPlayer },
|
|
|
data() {
|
|
|
return {
|
|
|
id: "",
|
|
|
@@ -171,8 +180,10 @@ export default {
|
|
|
videoData: {
|
|
|
title: null,
|
|
|
rtsp: null,
|
|
|
- ws: null
|
|
|
+ ws: null,
|
|
|
+ videoSize:'1366x768'
|
|
|
},
|
|
|
+ player:null,
|
|
|
configItems: 2, // 配置项的通道配置项数
|
|
|
isAdd: true,
|
|
|
rules,
|
|
|
@@ -180,9 +191,32 @@ export default {
|
|
|
page: 1
|
|
|
};
|
|
|
},
|
|
|
+ computed: mapState({
|
|
|
+ wanIp:function (state) {
|
|
|
+ for(let idx in state.publicConfig){
|
|
|
+ if(state.publicConfig[idx].key==='currIp')
|
|
|
+ return state.publicConfig[idx].val
|
|
|
+ }
|
|
|
+ return null
|
|
|
+ },
|
|
|
+ lanIp:function (state) {
|
|
|
+ for(let idx in state.publicConfig){
|
|
|
+ if(state.publicConfig[idx].key==='lanIp')
|
|
|
+ return state.publicConfig[idx].val
|
|
|
+ }
|
|
|
+ return null
|
|
|
+ },
|
|
|
+ loginIp:state=>state.loginIp
|
|
|
+ }),
|
|
|
created() {
|
|
|
// 获取摄像头 树
|
|
|
this.getTreeByCode(cameraCode);
|
|
|
+ console.log(this.wanIp,this.lanIp,this.loginIp)
|
|
|
+ // 初始化摄像头播放地址
|
|
|
+ if(this.wanIp === this.loginIp)
|
|
|
+ this.videoData.ws = "ws://"+this.lanIp+":8088/"
|
|
|
+ else
|
|
|
+ this.videoData.ws = "ws://"+this.wanIp+":8088/"
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions(["fetch"]),
|
|
|
@@ -347,28 +381,42 @@ export default {
|
|
|
},
|
|
|
// 播放
|
|
|
handlePlay(row) {
|
|
|
+
|
|
|
console.log(row);
|
|
|
if (row.meta.channel && row.meta.channel.length > 0) {
|
|
|
let channals = JSON.parse(row.meta.channel);
|
|
|
let rtsp = channals[0].rtsp;
|
|
|
- let ws = channals[0].ws;
|
|
|
- console.log("rtsp==>> " + rtsp);
|
|
|
- console.log("ws==>> " + ws);
|
|
|
- if (row.data && row.data["curr-ip"]) {
|
|
|
- //要更换IP
|
|
|
- ws = ws.replace("ip-addr", row.data["curr-ip"]);
|
|
|
+ let size = channals[0].size;//临时
|
|
|
+ // console.log(rtsp)
|
|
|
+ this.videoData.title=row.name//标题
|
|
|
+ let url = this.videoData.ws+"?rtsp="+encodeURIComponent(rtsp.trim())+'&videoSize='+size.trim()
|
|
|
+ console.log(url)
|
|
|
+ if(this.$refs.playerBox){
|
|
|
+ if(this.player){
|
|
|
+ this.player.stop()
|
|
|
+ this.player.destroy()
|
|
|
+ }
|
|
|
+ // 创建一个 canvas
|
|
|
+ let videoBox =document.getElementById('videoWrapper')
|
|
|
+ let p = document.createElement("canvas")
|
|
|
+ p.style.width='100%'
|
|
|
+ videoBox.appendChild(p)
|
|
|
+ this.player = new JSMpeg.Player(url,{canvas:p,onSourceEstablished:()=>{
|
|
|
+ //去掉loading
|
|
|
+ document.getElementById('loading').style.display='none'
|
|
|
+ }})
|
|
|
+ this.player.play()
|
|
|
+ this.isShowVideo = true;
|
|
|
}
|
|
|
- this.videoData = {
|
|
|
- rtsp,
|
|
|
- ws,
|
|
|
- title: row.name
|
|
|
- };
|
|
|
- this.isShowVideo = true;
|
|
|
} else this.$message.info("配置信息不正确");
|
|
|
},
|
|
|
handleStop(done) {
|
|
|
- console.log(this.$refs.rtspPlayer);
|
|
|
- // if (this.$refs.rtspPlayer) this.$refs.rtspPlayer.close();
|
|
|
+ if(this.player){
|
|
|
+ this.player.stop()
|
|
|
+ this.player.destroy()
|
|
|
+ this.player = null
|
|
|
+ }
|
|
|
+ this.isShowVideo = false
|
|
|
},
|
|
|
// 编辑
|
|
|
edit(row) {
|
|
|
@@ -413,15 +461,46 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.CameraManagement {
|
|
|
- .dialog {
|
|
|
- .item_row {
|
|
|
- display: flex;
|
|
|
+ .CameraManagement {
|
|
|
+ .dialog {
|
|
|
+ .item_row {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.pagination {
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
+ .pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .player{
|
|
|
+ z-index: 10000;
|
|
|
+ position: fixed;
|
|
|
+ background-color: #ffffff;
|
|
|
+ top: 80px;
|
|
|
+ left:0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+ display: flex;
|
|
|
+ /*border: 1px solid #028c58;*/
|
|
|
+ border-radius: 5px;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 1024px;
|
|
|
+ min-height: 480px;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .btn-close{
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #loading{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ left:0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
yjj