-
效果：对自己的电脑进行录屏，并通过网页查看。
-
目的：简单了解一下前端如何实现直播和展示实时监控
用到的知识点
ffmpeg
ffmpeg 是一个软件，用来进行录屏，并将视频流上传到服务器。
官网：ffmpeg.org/
这个软件很强大，不过我暂时只用到了录屏并上传这一个功能。
node-media-server
这是一个 nodejs 库，可以用来搭建一个服务器。功能应该也挺强大的。
不过我没看过具体文档，这里我只是用来接收 ffmpeg 视频流的数据（ rtmp 协议），并将其转换为 flv 协议。
这里就简单放个 github 地址 吧
flvjs
这是一个哔哩哔哩开源的，用于前端解析 flv 视频并播放的库。
同样这里也简单方法 github 地址 吧
rtmp
这一个是一个协议，可以类比 http，这个协议一般用来实时传输视频。
实现小 demo 的步骤
-
配置 ffmpeg 环境变量（基操，配置后记得测试一下是否配置成功）
-
新建一个文件夹并初始化（
npm init -y） -
安装 node-media-server
npm i node-media-server --save
- 新建 index.js 文件并写入以下内容，实现的是通过 1935 端口接收 rtmp 协议的视频流，并通过 8000 端口发送 http 协议的视频流
const NodeMediaServer = require('node-media-server')
const config = {
rtmp: {
port: 1935,
chunk_size: 60000,
gop_cache: true,
ping: 60,
ping_timeout: 30
},
http: {
port: 8000,
allow_origin: '*'
}
}
const nms = new NodeMediaServer(config)
nms.run()
- 新建 index.html 文件并写入以下内容，实现的是通过 flvjs 库，渲染 flv 视频。
<script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
<video id="videoElement" style="width: 80%" controls="controls"></video>
<script>
const liveUrl = 'http://127.0.0.1:8000/live/a.flv' // 此链接对应后面的 ffmpeg 命令参数
const playerDom = document.getElementById('videoElement')
if (flvjs.isSupported) {
player = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
hasVideo: true,
url: liveUrl,
cors: true,
}, {
enableWorker: false,
lazyLoadMaxDuration: 3 * 60,
seekType: 'range',
})
player.attachMediaElement(playerDom)
player.load()
} else {
console.log('Your browser is not support flv.js')
}
</script>
- 开始 “跑通” 代码
# 开启服务器，如果遇到问题，可以看看的输出内容
$ node "d:\tmp\index.js"
2022/6/7 19:29:23 18920 [INFO] Node Media Server v2.3.12
2022/6/7 19:29:23 18920 [INFO] Node Media Rtmp Server started on port: 1935
2022/6/7 19:29:23 18920 [INFO] Node Media Http Server started on port: 8000
2022/6/7 19:29:23 18920 [INFO] Node Media WebSocket Server started on port: 8000
# 开始录屏, 最后的参数和前面 index.html 中的链接对应
$ ffmpeg -f gdigrab -i desktop -vcodec libx264 -f flv rtmp://127.0.0.1:1935/live/a.flv
...
frame= 581 fps= 30 q=29.0 size= 4346kB time=00:00:17.55 bitrate=2028.6kbits/s speed=0.896x # 执行命令后会有一大堆输出，最最终还不断的显示这类输出，代表正在录屏并上传
- 打开网页查看是否能够看到录屏
效果如下，点击播放，即可不断的获取到录屏数据了（不过延迟有点高，有好几秒）
