使用ffmpeg生成flv视频流在网页上显示海康摄像头图视频

1.安装node

2.下载ffmpeg并配置环境变量（教程很多，自行查找）

3.安装 node-media-server   node i node-media-server -- save

4.新建flv.js文件

const NodeMediaServer = require('node-media-server');
const config = {
    rtmp: {
        port: 1935,
        chunk_size: 60000,
        gop_cache: true,
        ping: 60,
        ping_timeout: 30
    },
    http: {
        port: 85,
        allow_origin: '*'
    }
};
var nms = new NodeMediaServer(config);
nms.run();

执行  node flv.js

5.新增一个cmd窗口，执行  

ffmpeg -i "rtsp://admin:1234qwer@192.168.1.64:554/h264/ch1/main/av_stream" -c copy -f flv rtmp://localhost:1935/live/test

推拉流成功！

6.项目中安装 flv

node i --save flv.js

7.vue中引用

<template>
  <div class="video-play">
    <video id="videoElement" ref="videoElement" muted />
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  name: 'VideoPlay',
  data() {
    return {
      player: {}
    }
  },
  created() {

  },
  mounted() {
    this.initVideoPlay()
  },
  beforeDestroy() {
    this.stopVideoPlay()
  },
  methods: {
    initVideoPlay() {
      const videoElement = document.getElementById('videoElement')
      if (flvjs.isSupported()) {
        this.player = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          cors: true,
          url: 'http://192.168.1.6:85/live/test.flv'
        })
      } else {
        this.$message.error('不支持的格式')
        return
      }
      this.player.attachMediaElement(videoElement)
      this.player.load()
      this.player.play()
    },
    stopVideoPlay() {
      this.player.pause()
      this.player.unload()
      this.player.detachMediaElement()
      this.player.destroy()
      this.player = null
    }
  }
}
</script>
<style lang="scss" scope>
.video-play{
  width: 100%;
  height: 55%;
  background: url("~@/assets/img/videoBorder.png") no-repeat 0 0;
  background-size: 100% 100%;
  position: relative;
  margin-bottom: 20px;
  padding: 0 10px;
}
#videoElement {
  display: block;
  width: 100%;
  height: 100%;
  background: #132b47;
}
</style>

8.画面显示