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

3.2 vue页面代码