处理海康威视摄像头得流问题

海康威视得视频流需要控件或者flash，现在得谷歌已经不支持插件和flash了，怎么去处理呢？那就是后端对摄像头得rtsp流进行转换，可以换成hls得视频流（后端这里要注意编码，不然前端不断接受得ts片段是有问题得）。

这里是通过hls.js和dplayer去实现得

• 首先安装依赖

npm i hls.js dplayer -S

• 引入依赖进行操作，代码如下：

<!--
 * @Autor: 卢建
 * @LastEditors: 卢建
 * @Description: 视频组件播放
 * @Date: 2021-10-15 14:19:59
 * @LastEditTime: 2021-10-18 16:47:00
-->
<template>
  <div class="lj-dplayer">
    <div
      id="dplayer"
      ref="player"
      v-loading="loading"
      element-loading-text="视频初始化。。。"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)"
    ></div>
    <div class="return">
      <el-button type="primary" size="mini" @click="go">返 回</el-button>
    </div>
    <img
      class="all-screen"
      :src="require('@/assets/dplay.png')"
      alt=""
      v-if="imgFlag"
    />
  </div>
</template>

<script>
import Hls from "hls.js";
import Dplayer from "dplayer";

export default {
  name: "dplayer",
  data() {
    return {
      dp: null,
      video: {
        img: "",
        // img: require("../assets/404.jpg"),
        video: "",
      },
      device_id: "",
      loading: true,
      imgFlag: false,
      timer: null,
    };
  },

  mounted() {
    this.device_id = window.utils.CK.get("device_id");
    this.initRoom();
  },

  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    this.video.video && this.outRoom();
  },

  methods: {
    loadVideo(videoInfo) {
      this.dp = new Dplayer({
        element: this.$refs.player,
        video: {
          pic: videoInfo.img, // 封面
          url: videoInfo.video,
          type: "customHls",
          customType: {
            customHls: function (video) {
              const hls = new Hls();
              hls.loadSource(video.src);
              hls.attachMedia(video);
            },
          },
        },
        autoplay: true,
      });
    },

    // 初始化直播间
    async initRoom() {
      let { initRoom } = await import("@/api/dplayer");
      let {
        data: { wait },
      } = await initRoom({
        device_id: this.device_id,
      });
      this.timer = setTimeout(() => {
        this.getRoomUrl();
      }, 1000 * wait);
    },
    // 获取直播间hls源头
    async getRoomUrl() {
      let { getRoomUrl } = await import("@/api/dplayer");
      let {
        data: { url },
      } = await getRoomUrl({
        device_id: this.device_id,
      });
      this.loading = false;
      this.video.video = url;
      if (this.video.video) {
        this.loadVideo(this.video);
      } else {
        this.imgFlag = true;
      }
    },

    // 离开直播间停止视频流
    async outRoom() {
      let { outRoom } = await import("@/api/dplayer");
      await outRoom({
        device_id: this.device_id,
      });
    },

    go() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.lj-dplayer {
  width: 100%;
  height: 100%;
  position: relative;
  #dplayer {
    width: 100%;
    height: 100%;
  }
  .return {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .all-screen {
    width: 800px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 900;
  }
}
</style>

• 时隔一年再次使用时的心得体会

主要还是基于dplayer实现视频流的播放，常见播放flv和hls的视频流，具体的参数配置看文档就OK啦，不过这里需要注意的是，由于浏览器的限制，现在的视频要想实现自动播放，得设置静音才行。

最新代码如下：

<template>
  <div class="lj-dplayer"></div>
</template>

<script>
import Hls from 'hls.js'
import Dplayer from 'dplayer'

export default {
  name: 'dplayer',

  props: {
    src: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      dp: null,
      timer: null
    }
  },

  mounted () { },

  beforeDestroy () {
    this.timer && clearTimeout(this.timer)
    this.dp && this.dp.destroy()
  },

  methods: {
    init () {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.loadVideo(this.src)
      }, 400)
    },

    loadVideo (src) {
      this.dp = new Dplayer({
        container: this.$el, // 早期是element，现在改成container了，很多人喜欢这个用id，但是id是唯一的当出现多个视频区域播放会出现问题。
        mutex: false,
        autoplay: true,
        volume: 0,
        video: {
          url: src,
          type: 'customHls',
          customType: {
            customHls: function (video) {
              // 此处的config可以配置hls的配置，具体配置项可以查询hls.js的相关配置，例如视频长时间播放导致的页面卡死等就需要配置缓存相关选项
              const config = {
                autoStartLoad: true,
                startPosition: -1,
                ......
                licenseXhrSetup: undefined,
                drmSystemOptions: {}
              }
              const hls = new Hls(config)
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
      // this.dp.on('canplay', () => {
      //   this.dp.play()
      // })
    }
  },

  watch: {
    src: {
      handler (val) {
        if (val) {
          this.init()
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.lj-dplayer {
  width: 100%;
  height: 100%;
}
</style>