Vue整合Rtmp流实现无Flash播放[flv+websocket篇]

小白心路历程篇，如有错误欢迎指出，感谢各位大佬

---

本篇包括以下内容：

①采用node的第三方流媒体库Node-Media-Server搭建流媒体服务器

②使用vue+flvjs+websocket实现页面无flash播放视频流

预备知识：

node（用于搭建流媒体服务器）

obs/ffmpeg（用于推流）

vue基础

实现效果：

搭建步骤：

①流媒体服务器：

server.js，[采用node-media-server搭建]

const NodeMediaServer = require('node-media-server')

const port = 8000

const config = {
    //rtmp流媒体服务器
	rtmp: {
		port: 1935,
		chunk_size: 10240,
		gop_cache: true,
		ping: 30,
		ping_timeout: 60
	},
	http: {
		port: port,
		allow_origin: '*'
	}
}

var nms = new NodeMediaServer(config)
nms.run()

使用node命令运行该js文件启动node server.js即可，详细的流媒体延迟优化参数可以参考node-media-server官方手册。

②推流

采用obs推流工具或者ffmpeg工具将相机流推到上面服务器即可

2.1 obs推流设置：obs使用教程我就不编写了 有兴趣可以自行百度即可，一般游戏直播都会用obs，比较稳定且推荐使用这种方式

2.2 ffmpeg工具推流【ffmpeg比较不稳定，推流一段时间就直接卡死了】使用推流命令为：

ffmpeg -rtsp_transport tcp -re -stream_loop -1 -i "rtsp://监控账号:监控的密码!@监控的ip地址:监控的端口/cam/realmonitor" -c copy -f flv rtmp://localhost:1935/live/test

③vue页面代码（配合b站开源的flvjs【感谢bilibili！】）

3.1 在public文件中的html页面中引入（全局引入）flvjs

<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>

3.2 vue页面代码

<template>
    <div class="content">
      <video id="my-video" style="width:100%;height:100%;position:relative;" autoplay muted></video>
    </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    startPlay() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById("my-video");
        const flvPlayer = flvjs.createPlayer(
          {
            type: "flv",
            isLive: true,
            hasAudio: false,
            //必须与node搭建的流媒体服务器中的http的端口和推流的参数吻合
            url: "ws://localhost:8000/live/test.flv"
          },
          {
            enableStashBuffer: true,
            stashInitialSize: 128
          }
        );
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load()
        flvPlayer.play()
      } else {
        console.log("flvjs不支持")
      }
    }
  },
  mounted() {
    this.startPlay()
  }
}
</script>