xyh123999 преди 1 година
родител
ревизия
026608040b

+ 3 - 0
public/index.html

@@ -13,5 +13,8 @@
         </noscript>
         <div id="app"></div>
         <!-- built files will be auto injected -->
+        <script type="text/javaScript" src="./static/jsVideoPlugin-1.0.0.min.js"></script>
+        <script type="text/javaScript" src="./static/webVideoCtrl.js"></script>
+        <script type="text/javaScript" src="./static/jquery-1.7.1.min.js"></script>
     </body>
 </html>

Файловите разлики са ограничени, защото са твърде много
+ 1 - 0
public/static/jquery-1.7.1.min.js


Файловите разлики са ограничени, защото са твърде много
+ 15 - 0
public/static/jsVideoPlugin-1.0.0.min.js


Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
public/static/webVideoCtrl.js


+ 208 - 0
src/components/HKVS/hkv.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="video-player">
+        <div id="divPlugin" class="divPlugin" ></div>
+        <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
+        </div> -->
+        <!-- <div class="down" v-else>
+            <a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
+        </div> -->
+    </div>
+</template>
+<script>
+export default {
+name: 'videoPlayer',
+props: {
+        //从父组件传来的数据,IP、用户名、密码、端口号
+        companyVideoData:{
+            type:Object
+    },
+    //分屏
+    videoType:Number
+},
+    data(){
+        return {
+            plugin:true ,
+            iWidth: "100%",
+            iHeight: "100%",
+            webVideo: {},
+            iStreamType: 1,
+            iProtocol: 1,
+            bZeroChannel: false,
+            xmlDocData:{},
+            g_iWndIndex:0, //可以不用设置这个变量,有窗口参数的接口中,不用传值,开发包会默认使用当前选择窗口
+            videoNum:''
+        };
+  },
+  created(){
+  },
+  mounted(){
+    this.videoInitPlugin();
+  },
+  destroyed(){
+       
+  },
+  methods: {
+    videoInitPlugin(){
+        var iRet = WebVideoCtrl.I_CheckPluginInstall();
+        if (iRet === -1) {
+          alert("您还未安装过插件,请安装WebComponentsKit.exe插件!");
+          return;
+        }
+        this.initPlugin()
+    },
+    //插件初始化
+    initPlugin () {
+        var that = this;
+        WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
+          bWndFull: true,//是否支持单窗口双击全屏,默I_CheckPluginInstall
+          iWndowType: 2,
+          bDebugMode:true,
+          cbSelWnd: function (xmlDoc) {
+		    },
+        });
+        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
+        // 检查插件是否最新
+        // if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
+        //     alert("检测到新的插件版本,请双击WebComponents.exe插件,进行升级!");
+        //     // return;
+        // }
+        this.clickLogin(this.companyVideoData)
+      },
+    clickLogin(data) {
+        var that = this;
+        WebVideoCtrl.I_Login(data.IP, 1, data.Port, data.Username, data.Password, {
+            success: function (xmlDoc) {
+                console.log("开始预览");//不能删除
+                that.getChannelInfo();
+            },
+            error: function () {
+                console.log("login error");
+            }
+        });
+    }, 
+    //获取通道
+    getChannelInfo(){
+        var that = this;
+        // 模拟通道
+        WebVideoCtrl.I_GetAnalogChannelInfo(this.szIP, {
+            async: false,
+            success: function (xmlDoc) {
+                var oChannels = $(xmlDoc).find("VideoInputChannel");
+                nAnalogChannel = oChannels.length;
+                // console.log("获取模拟通道成功!")
+            },
+            error: function () {
+                // console.log("获取模拟通道失败!"+WebVideoCtrl.I_GetLastError())
+            }
+        });
+        // 数字通道
+        WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP, {
+            async: false,
+            success: function (xmlDoc) {
+                var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+                that.initPlay()
+                that.$emit('func',oChannels)//获取数字通道传给父组件
+            },
+            error: function () {
+                WebVideoCtrl.I_GetLastError()
+                // console.log("获取数字通道失败!"+WebVideoCtrl.I_GetLastError())
+            }
+        });
+        // 零通道
+        WebVideoCtrl.I_GetZeroChannelInfo(this.szIP, {
+            async: false,
+            success: function (xmlDoc) {
+                var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+            },
+            error: function () {
+                // console.log("获取零通道失败!"+WebVideoCtrl.I_GetLastError())
+            }
+        });
+    },
+    //初始化视频,为了让用户进来就可以看到视频播放
+    initPlay(){
+        let szIP = this.companyVideoData.IP;//ip地址
+        var	iStreamType = 1;
+        //循环16次是因为插件分屏最大为4x4(可以根据情况而定)
+        for(let i = 0;i<16;i++){
+            var iChannelID = parseInt(i+1, 10);
+            WebVideoCtrl.I_StartRealPlay(szIP, {
+                iStreamType: iStreamType,
+                iChannelID: iChannelID,
+                iWndIndex:i
+            });
+        }
+    },
+    // 点击查看具体哪个监控
+    startRealPlay(oChannels) {
+        let that = this;
+        let szIP = this.companyVideoData.IP;//ip地址
+        let iChannelID = oChannels;//播放通道号
+        var	iStreamType = 1;
+        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
+        if (oWndInfo != null) {// 已经在播放了,先停止
+            WebVideoCtrl.I_Stop();
+        }
+        WebVideoCtrl.I_StartRealPlay(szIP, {
+            iStreamType: iStreamType,
+            iChannelID: iChannelID,
+        });
+    },
+  },
+  //因为项目中需求,总公司要查看所有子公司的监控,所以做了个监听来切换查看各个子公司的监控
+  watch:{
+    companyVideoData:{  
+        handler(val,oldval) {
+                if(oldval){
+                    for(let i = 0;i<16;i++){
+                        WebVideoCtrl.I_Stop(i);//停止正在播放的页面
+                    }
+                    this.$emit('func',"")
+                    WebVideoCtrl.I_Logout(oldval.IP)
+                    this.clickLogin(this.companyVideoData)
+                }
+            },  
+                immediate:true,//关键
+                deep:true
+        },
+    videoType:{  
+        handler(val,oldval) {
+                if(oldval){
+                    WebVideoCtrl.I_ChangeWndNum(this.videoType);//分屏
+                    this.initPlay()
+                }
+            },  
+                immediate:true,//关键
+                deep:true
+        }
+    }
+};
+</script>
+<style  scoped>
+.video-player{
+    width: 100%;
+    height: 100%;
+}
+.divPlugin{
+        width: 100%;
+        height: 100%;
+        color:red;
+        /* display: flex; */
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+    }
+ .down{
+        width: 100%;
+        height: 100%;
+        color:red;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+       
+    }
+   .down a{
+        color:red;
+    }    
+</style>

+ 4 - 0
src/views/taskScreen.css

@@ -1031,4 +1031,8 @@
 }
 .play_to_full:hover{
     cursor: pointer;
+}
+.plugin {
+    width: 100%;
+    height: 100%;
 }

+ 21 - 3
src/views/taskScreen.vue

@@ -199,7 +199,11 @@
                                         </el-image>
                                     </div>
                                     <div class="video_title">{{videoPlayerName[0]}}</div>
-                                    <video  id="videoPlayerTask" class="video-js" muted></video>
+                                    <!-- <video  id="videoPlayerTask" class="video-js" muted></video> -->
+
+                                   <div> <HKVideo :companyVideoData="mainVideoData"></HKVideo></div>
+                                  
+                                   
 									<!-- <div class="center_no_data"> -->
 										<!-- <el-image
                                             style="width: 100px; height: 100px; margin-right:6px;"
@@ -296,13 +300,14 @@ var uploadedDataURL = require('../../public/json/taiyuan.json')
 import './taskScreen.css'
 import Videojs from "video.js"; // 引入Videojs 
 import FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
+import HKVideo from '../components/HKVS/hkv.vue'
 
 export default {
     components:{
         myFlylineChartEnhanced,
         sacleBox,
         myscrollBoard,
-       
+       HKVideo,
         FormTaskProcessViewer
     },
     data() {
@@ -348,7 +353,8 @@ export default {
 			completionRate:false,
 			playerList:[],
             videoPlayerName:['监控名称','监控名称','监控名称','监控名称','监控名称'],
-            videoList:['videoPlayerTask','videoPlayer_first','videoPlayer_second','videoPlayer_third','videoPlayer_fourth']
+            videoList:['videoPlayerTask','videoPlayer_first','videoPlayer_second','videoPlayer_third','videoPlayer_fourth'],
+            mainVideoData:{}
         }
     },
     methods:{
@@ -742,6 +748,18 @@ export default {
     }
     },
     mounted(){
+        let url = "rtsp://admin:sgw123456@192.168.1.64:554/h265/ch01/main/av_stream";
+        url = url.split('/');
+        url = url[2];
+        url = url.split(':');
+        this.mainVideoData.Username = url[0];
+        this.mainVideoData.Port = url[2];
+        url = url[1];
+        url = url.split('@');
+        this.mainVideoData.IP = url[1];
+        this.mainVideoData.Password = url[0];
+        console.log('this.mainVideoData :>> ', this.mainVideoData);
+
 		// 获取全部单位
 		this.getAllUnits()
 		// 获取全部系统

Някои файлове не бяха показани, защото твърде много файлове са промени