tnbapp/src/views/cam/LivePage.vue

<template>
  <el-row class="movie-list">
    <el-col :md="16">
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3 v-if="camDetail != null" v-html="camDetail.camName" />
          </div>
          <div class="text item">
            <div id="dplayer" ref="dplayer" style="height: 480px;" />
          </div>
        </el-card>
      </el-row>
    </el-col>
    <el-col :md="8">
      <el-row>
        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-select v-model="camId" placeholder="选择摄像头" @change="onSelect">
                <el-option
                  v-for="item in camList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              <el-button style="float: right; padding: 3px 0" type="text" @click="goToCamRecord">历史录像</el-button>
            </div>
          </el-card>
        </el-row>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import flvjs from 'flv.js'
import DPlayer from 'dplayer'
import { getCamDetail, getCamList } from '@/api/cam'

export default {
  name: 'LivePage',
  data() {
    return {
      flvjs,
      DPlayer,
      user: {
        userId: 10001,
        screenName: '浩',
        avatarUrl: '//pic1.zhimg.com/v2-c755e7ec5510b0638c2d1bead712544a_r.jpg',
        following: 1024,
        follower: 1024
      },
      camId: null,
      camList: [],
      camDetail: null
    }
  },
  watch: {
    $route() {
      this.$router.go()
    }
  },
  created() {
    const camId = this.$route.params.camId
    this.camId = camId
    getCamDetail(camId).then(resp => {
      if (resp.code === 0) {
        var camDetail = resp.data
        this.camDetail = camDetail
        document.title = camDetail.camName + '实时录像'

        var ele = document.querySelector('#dplayer')
        if (camDetail.state) {
          const flvUrl = camDetail.pullUrl
          this.initFlvPlayer(camId, flvUrl)
        } else {
          ele.innerHTML = '<h5>摄像头离线, 你可以查看本摄像头的' +
            '<a style="text-decoration-line: none; color: red" target="_blank" href="/cam/record/' + this.camId + '">历史录像</a>' +
            '</h5>'
        }
      }
    })

    getCamList().then(resp => {
      if (resp.code === 0) {
        this.camList = resp.data
      }
    })
  },
  methods: {
    onSelect(value) {
      const path = '/cam/live/' + value
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    initFlvPlayer(videoId, flvUrl) {
      new DPlayer({
        container: document.querySelector('#dplayer'),
        live: true,
        screenshot: true,
        autoplay: false,
        volume: 0.1,
        mutex: true,
        video: {
          url: flvUrl,
          type: 'customFlv',
          customType: {
            customFlv: function(video, player) {
              const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: video.src
              })
              flvPlayer.attachMediaElement(video)
              flvPlayer.load()
            }
          }
        }
      })
    },
    goToCamRecord() {
      const path = '/cam/record/' + this.camId
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 5%;
  padding-right: 5%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.budge{
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin: 10px auto;
}
.blue{
  background-color: #409eff;
}
</style>