矿山监控使用视频流服务flv视频流

src/assets/js/common.js

@@ -700,6 +700,15 @@ var HttpReq = function(){
 					return res
 				})
 			},
+      mineMonitoringCameraUpdate: function(data){
+        return request({
+          url: '/api/cameraDetail/updateCameraDetail',
+          method: 'PUT',
+          data:data,
+        }).then((res) => {
+          return res
+        })
+      },
 			mineMonitoringCameraDel: function(data){
 				return request({
 					url: '/api/cameraDetail/delCameraDetail',

src/components/ezuikit/EZUIKitJs.vue

@@ -16,7 +16,7 @@
         <DPcomputer17 class="DPcomputer17Class"></DPcomputer17>
 
         <div v-show="noPtz" id="hkView" class="noPtzVideo1">
-          <video id="rtcStreamerVideo" controls style="width: 100%;height: 100%;">
+          <video id="rtcStreamerVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 100%;" autoplay>
             您的浏览器不支持：HTML5 video.
           </video>
           <el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭
@@ -30,6 +30,7 @@
 <script>
 import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
 import DPcomputer17 from '../../views/MLargeScreen/components/smallComponents/DPcomputer17.vue'
+import {flvjs} from '@/assets/js/flv.js';
 
 export default {
   components: {
@@ -42,6 +43,7 @@ export default {
         children: "children",
         label: "label",
       },
+      flvPlayer: null,
       noPtz: false,
       webRtcServer: null,
       cameraUrl: `hk/index.html?ip=192.168.0.54&port=80&un=admin&pw=gemho10-7`,
@@ -81,18 +83,37 @@ export default {
         }
       })
     },
+    stopPlay(){
+      if(this.flvPlayer && this.flvPlayer._msectl && this.flvPlayer.e){
+        this.flvPlayer.pause();
+        this.flvPlayer.unload();
+        this.flvPlayer.detachMediaElement();
+        this.flvPlayer.destroy();
+        this.flvPlayer = null
+      }
+    },
     handleNodeClick(data) {
       this.$parent.closeHkView();
       if (data.children) {
         return;
       }
       this.noPtz = true;
-      // this.cameraUrl = `hk/index.html?ip=${data.cameraIp}&port=${data.port}&un=${data.userName}&pw=${data.passWord}`;
-      this.webRtcServer = new WebRtcStreamer("rtcStreamerVideo","http://39.164.225.220:5007");
-      // this.webRtcServer.connect(`rtsp://admin:hik12345+@10.10.203.11:554/h264/ch1/main/av_stream`);
-      this.webRtcServer.connect(`rtsp://${data.userName}:${data.passWord}@${data.cameraIp}:554/h264/ch1/main/av_stream`);
-      // this.webRtcServer = new WebRtcStreamer("rtcStreamerVideo","http://192.168.3.38:8041");
-      // this.webRtcServer.connect(`rtsp://admin:gemho10-7@192.168.0.54:554/h264/ch1/main/av_stream`);
+      // this.webRtcServer = new WebRtcStreamer("rtcStreamerVideo","http://39.164.225.220:5007");
+      // this.webRtcServer.connect(`rtsp://${data.userName}:${data.passWord}@${data.cameraIp}:554/h264/ch1/main/av_stream`);
+
+      if (flvjs.isSupported()) {
+        this.flvPlayer && this.stopPlay();
+        this.flvPlayer = flvjs.createPlayer({
+          type: "flv",
+          isLive: true,
+          hasAudio: false,
+          url: data.url,
+        });
+        this.flvPlayer.attachMediaElement(document.getElementById("rtcStreamerVideo"));
+        this.flvPlayer.load();
+      } else {
+        console.log("不支持的格式");
+      }
     },
     noPtzCloseFn() {
       if(this.webRtcServer){

src/views/MLargeScreen/index.vue

@@ -71,7 +71,7 @@
 <!--		</div>-->
 		<!-- 嵌入三维地图页面 -->
 <!--		<iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>-->
-    <iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>
+<!--    <iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
 <!--    <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
 		<!-- 单个车辆视频监控 -->
 

src/views/monitoringManagement/mineVideoSetUp/index.vue

@@ -54,10 +54,11 @@
           <el-table :data="cameraDetail" border style="width: 100%" height="710">
             <el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
             <el-table-column prop="cameraName" label="摄像头名称" align="left"></el-table-column>
-            <el-table-column prop="streamName" label="视频流名称" align="left"></el-table-column>
-            <el-table-column prop="cameraIp" label="IP地址" align="left"></el-table-column>
+            <el-table-column prop="url" label="直播视频源" align="left"></el-table-column>
+<!--            <el-table-column prop="cameraIp" label="IP地址" align="left"></el-table-column>-->
             <el-table-column label="操作" width="150" align="center">
               <template slot-scope="scope">
+                <el-button size="mini" round type="success" @click="cameraDetaileEdit('edit', scope.row)">修改</el-button>
                 <el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button>
               </template>
             </el-table-column>
@@ -69,15 +70,15 @@
           <el-form-item label="摄像头名称" style="margin-bottom:15px;" prop="cameraName">
             <el-input v-model="cameraDetailData.cameraName"></el-input>
           </el-form-item>
-          <el-form-item label="视频流名称" style="margin-bottom:15px;" prop="streamName">
-            <el-input v-model="cameraDetailData.streamName"></el-input>
+          <el-form-item label="直播视频源" style="margin-bottom:15px;" prop="streamName">
+            <el-input v-model="cameraDetailData.url"></el-input>
           </el-form-item>
-          <el-form-item label="IP地址" style="margin-bottom:15px;" prop="cameraIp">
-            <el-input v-model="cameraDetailData.cameraIp"></el-input>
-          </el-form-item>
-          <!-- <el-form-item label="端口" style="margin-bottom:15px;">
-            <el-input v-model="cameraDetailData.cameraPort"></el-input>
-          </el-form-item> -->
+<!--          <el-form-item label="IP地址" style="margin-bottom:15px;" prop="cameraIp">-->
+<!--            <el-input v-model="cameraDetailData.cameraIp"></el-input>-->
+<!--          </el-form-item>-->
+<!--          <el-form-item label="端口" style="margin-bottom:15px;">-->
+<!--            <el-input v-model="cameraDetailData.cameraPort"></el-input>-->
+<!--          </el-form-item>-->
         </el-form>
         <span slot="footer" class="dialog-footer">
           <el-button @click="cameraDetaileCancel()" style="padding:10px;">取 消</el-button>
@@ -262,7 +263,7 @@ export default {
       if(this.cameraDetailType == "add"){
         this.cameraDetailTitle = "增加摄像头";
         this.disabledInp = false;
-      }else if(this.cameraDetailType == "change"){
+      }else if(this.cameraDetailType == "edit"){
         this.cameraDetailTitle = "修改摄像头";
         this.cameraDetailData = {...row};
         this.disabledInp = true;
@@ -273,7 +274,6 @@ export default {
           if (valid) {
                 if(this.cameraDetailType == "add"){
                   this.cameraDetailData.cameraId = this.camID;
-                  console.log(this.cameraDetailData);
                   HttpReq.truckDispatching.mineMonitoringCameraAdd(this.cameraDetailData).then((res) => {
                     this.$message.success('添加成功');
                     HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:this.camID}).then((res) => {
@@ -283,19 +283,17 @@ export default {
                   }).catch(function(error) { });
                   this.cameraDetailVisible = false;
                   this.cameraDetailData = {};
-                }else if(this.cameraDetailType == "change"){
-                  let that = this;
-                  let newData = [];
-                  this.cameraDetail.forEach(function(item){
-                    if(item.id == that.cameraDetailData.id){
-                      newData.push(that.cameraDetailData);
-                    }else{
-                      newData.push(item);
-                    }
+                }else if(this.cameraDetailType == "edit"){
+                  this.cameraDetailData.cameraId = this.camID;
+                  HttpReq.truckDispatching.mineMonitoringCameraUpdate(this.cameraDetailData).then((res) => {
+                    this.$message.success('修改成功');
+                    HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:this.camID}).then((res) => {
+                      console.log("mainCameraDetail",res);
+                      this.cameraDetail = res.content
                     })
-                  this.cameraDetail = newData;
+                  }).catch(function(error) { });
                   this.cameraDetailVisible = false;
-                  this.cameraDetailData = {id:"",cameraId:"",cameraName:"",streamName:"",cameraIp:"",cameraPort:"",cameraWay:""};
+                  this.cameraDetailData = {};
                 }
           } else {
             console.log('error submit!!');