vue+chimee-player实现在线视频流播放

前言：最近做一个项目，需要在web页面播放机器人摄像头的实时视频流，尝试了很多方案，最后发现chimee-player是一个不错的解决方案。我封装了个简单的组件，引入即用。
官方文档地址：ChimeePlayer

一.引入依赖

npm install chimee-player --save

二.组件内容

实现组件代码部分：

<template>
  <div>
    <div id="wrapper">
    </div>
  </div>
</template>
<script>
import Chimee from 'chimee-player';
import flv from 'chimee-kernel-flv';

export default {
  components: {

    Chimee, //注册组件
    flv, //注册组件
  },
  data: function () {
    return {
      title: '',
      size: '',
      videoShow: false,
    }
  },
  methods:{
    getFlvVideo(){
      const player = new Chimee({
        src: 'http://220.161.87.62:8800/hls/0/index.m3u8',
        // preset: {
        //   flv: flv
        // },
  isLive: true,
  // 编解码容器
  box: flv, // flv hls mp4
  // dom容器
  wrapper: '#wrapper',
  // video
  autoplay: true,
  controls: true
})
console.log(player)
    },
  },
  mounted() {
    this.getFlvVideo()
  },
  computed: {

  },
}
</script>

三.实现效果

在需要的地方引入组件后，然后可以在这个基础上自己调整视频流地址，以及宽高等。
 

视频流播放地址