本篇包括以下内容：

①采用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 = 8000const 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>