[FE]：视频监控界面流媒体完成

security-protection-platform/src/components/VideoPlayer/index.vue

@@ -34,8 +34,7 @@ const defaultPlayerOptions = {
        name: 'volumePanel', // 音量控制
        inline: true // 不使用水平方式
      },
      {name: 'FullscreenToggle'}, // 全屏
      {name: 'FullscreenToggle'}
      {name: 'FullscreenToggle'} // 全屏
    ]
  }
}

security-protection-platform/src/modules/system/assignment/index.vue

@@ -103,8 +103,6 @@ export default {
    }
  },
  created () {
    this.getDeviceData()
    this.getDeviceTypes()
    this.getTaskName()
    this.getmatchingType()
  },
@@ -116,6 +114,7 @@ export default {
    },
    getmatchingType() {
      sysapi.getCharSpecList('AI_MATCHER_MODE').then(res => {
        console.log(res);
        this.matchingTypeList = res.data
      })
    },
@@ -132,34 +131,6 @@ export default {
      }
      return typecellClass
    },
    // 获取设备列表数据
    async getDeviceData () {
      const res = await sysapi.getDeviceData({ params: { page: this.page, limit: this.limit, taskName: this.taskName, matchingType: this.matchingType, taskStatus: this.taskStatus } }
      )
      if (res.status === 200) {
        const list = res.data.data.data
        let dataList = list.map(item => {
          return {
            taskName: item.deviceName,
            status: item.deviceType
          }
        })
        console.log(dataList)
        this.taskDataList = dataList
        this.total = res.data.total
      } else {
        this.$Message.danger('设备数据列表获取失败！')
      }
    },
    // 向服务器发送请求获取设备类型列表数据
    async getDeviceTypes () {
      const res = await sysapi.getDeviceTypes()
      if (res.status === 200) {
        this.taskNameList = res.data.data
      } else {
        this.$Message.danger('设备类型列表数据获取失败！')
      }
    },
    // 查询数据
    selectHandle () {
      this.page = 1

security-protection-platform/src/modules/videoSurveillance/components/rtmpVideoPlay/index.vue

@@ -62,9 +62,15 @@ export default {
    }
  },
  methods: {
    // 初始化
    handlePlayerInited(player) {
      this.$player = player
      window.player = this
      var myButton = player.controlBar.addChild('button')
      myButton.addClass('vjs-play-control')
      myButton.on('click', () => {
        this.$emit('videoReplay')
      })
    },
    async handleTabChange(name, index) {
      this.$player.pause()
@@ -79,7 +85,6 @@ export default {
    resetVideoList() {
      const videoList = this.list.map((item, index) => {
        const { fileId, fileType } = item
        console.log(fileType)
        return {
          index,
          fileId,
@@ -136,10 +141,7 @@ export default {
      // fake
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const x = Math.random()
          const url = x > 0.5
            ? 'http://10.19.90.34:19000/tool-image/tool-image_7d359725fac4464fb248284caf321993.mp4'
            : 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4'
          const url = 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1'
          resolve({
            url
          })

security-protection-platform/src/modules/videoSurveillance/index.vue

@@ -13,76 +13,32 @@
      </t-select>
    </div>
    <div class="page-bottom">
      <!-- <div v-for="(item,index) in videoList" :key="index">
        <t-card class="card-video">
          <img :src="item.url" class="card-image">
          <div slot="foot" class="bottom">
            <span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
            <div style="margin-left:auto">
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)">
                <t-icon size="16" icon="image-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)">
                <t-icon size="16" icon="piechart-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn">
                <t-icon size="16" icon="arrow-expand-all-outline"></t-icon>
              </t-button>
            </div>
          </div>
        </t-card>
      <!-- <div v-for="(item,index) in videoList" :key="index" :value="item.id" style="width:400px;margin:24px 0px 0 24px;">
        <rtmp-video :list="replayList" @videoReplay="handleReview"></rtmp-video>
      </div> -->
      <div style="width:400px;margin:24px 24px 0 0;">
        <!-- <video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"
               controls autoplay preload="auto" width="640" height="360"
               data-setup="{ &quot;html5&quot; : { &quot;nativeTextTracks&quot; : false } }">
          <source src="rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1" type="rtmp/flv" />
        </video> -->
      <div style="width:400px;margin:24px 0px 0 24px;">
        <rtmp-video :list="replayList" @videoReplay="handleReview"></rtmp-video>
      </div>
    </div>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    <replay-dialog :list="replayList" />
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog"/>
  </div>
</template>
<script>
import sysapi from '@/api/videoSurveillance'
import commonapi from '@/api/common'
import ReplayDialog from './components/rtmpVideoPlay'
import RtmpVideo from './components/rtmpVideoPlay'
import ReplayDialog from './components/ReplayDialog'
import VideoPlayer from '@/components/VideoPlayer'
import videojs from 'video.js'
window.videojs = videojs
require('videojs-flash')
require('videojs-playlist')
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')
const defaultPlayerOptions = {
  controls: true,
  autoplay: false,
  muted: false,
  language: 'zh-CN',
  fluid: true,
  // liveui: true,
  controlBar: {
    children: [
      {name: 'playToggle'}, // 播放按钮
      {name: 'currentTimeDisplay'}, // 当前已播放时间
      {name: 'progressControl'}, // 播放进度条
      {name: 'durationDisplay'}, // 总时间
      { // 倍数播放
        name: 'playbackRateMenuButton',
        playbackRates: [0.5, 1, 1.5, 2, 2.5]
      },
      {
        name: 'volumePanel', // 音量控制
        inline: false // 不使用水平方式
      },
      {name: 'FullscreenToggle'} // 全屏
    ]
  }
}
export default {
  components: { ReplayDialog, VideoPlayer },
  components: { ReplayDialog, VideoPlayer, RtmpVideo },
  filters: {
    handleText (value) {
      if (!value) return ''
@@ -93,9 +49,7 @@ export default {
    }
  },
  data () {
    const playerOptions = Object.assign({}, defaultPlayerOptions, this.options)
    return {
      playerOptions,
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
      videoTotal: 100, // 大门分页总数
@@ -106,24 +60,94 @@ export default {
      },
      organizationList: [], // 风场数据
      gateFieldData: 101101,
      videoList: [],
      videoList: [], // 场景数据列表
      sceneList: [], // 场景列表
      totalList: [], // 所有风场数据列表
      selectedMonitorScene: '',
      showReplayDialog: true,
      selectedMonitorScene: '', // 当前选择场景
      videoPlayList: [],
      showReplayDialog: false,
      replayList: []
    }
  },
  mounted () {
    // var myButton = videojs.player.controlBar.addChild('button', {
    //   text: 'Press me'
    //   // other options
    // })
    // myButton.addClass('html-classname')
    this.getWindFiledList() // 获取风场列表
    this.handleReview()
    this.getdata()
  },
  methods: {
    getdata() {
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:56',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:57',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:58',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:59',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 17:00',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }]
      this.replayList = [{
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }, {
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }]
      this.videoPlayList = [{
        fileName: '12月14 16:55',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:56',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:57',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:58',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:59',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 17:00',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'rtmp/flv'
      }]
      this.videoPlayList = [{
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }, {
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }]
    },
    // 获取场景列表
    getSceneList() {
      this.sceneList = []
@@ -132,50 +156,49 @@ export default {
          this.sceneList.push(this.totalList[i])
        }
      }
      const {a, b} = this.totalList[0]
      console.log(this.totalList[0]);
      console.log(a, b)
    },
    async handleReview (id) {
      // const res = await sysapi.getVideoPlayBack(id)
      // console.log(res)
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
        fileType: 'video/mp4'
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:56',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
        fileType: 'video/mp4'
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:57',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
        fileType: 'video/mp4'
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:58',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
        fileType: 'video/mp4'
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:59',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
        fileType: 'video/mp4'
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 17:00',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'video/mp4'
        fileType: 'rtmp/flv'
      }]
      this.replayList = [{
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }, {
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }]
      this.showReplayDialog = true
    },
    // 切换场景
    async tabClick (id) {
      this.selectedMonitorScene = id
      this.paramsObj.page = 0
@@ -184,6 +207,7 @@ export default {
      this.videoCurrent = 1
      this.getVideoSurveillanceData(id)
    },
    // 获取风场下拉框列表
    getWindFiledList () {
      sysapi.getMonitorScene().then(resp => {
        let arr = resp.data.data
@@ -204,12 +228,10 @@ export default {
    },
    // 获得风场大门数据
    getVideoSurveillanceData (id) {
      if (this.videoList.length <= 10) {
        this.paramsObj.page = this.videoCurrent
        sysapi.getVideoSurveillanceData({ params: {monitorSceneId: id} }).then(res => {
          console.log(res)
        })
      }
      this.paramsObj.page = this.videoCurrent
      sysapi.getVideoSurveillanceData({ params: {monitorSceneId: id} }).then(res => {
        this.videoList.push(res.data.data[0])
      })
    },
    // 进入识别记录界面
    goDistinguishRecord (id) {
@@ -219,7 +241,6 @@ export default {
    onChangeGate (val) {
      this.videoList = []
      this.videoCurrent = val
      this.getVideoSurveillanceData()
    }
  }
}