NestJS搭建直播服务器 🐱‍🏍🐱‍🏍🐱‍🏍

介绍

后端使用node-media-server搭建直播推流服务器,使用obs推流,前端可使用B站开源的flv.js来播放直播,React可使用react-player播放

一、实现原理

通过 node-media-server搭建后台服务器会生成推流地址和管理端地址
使用obs开启直播将直播流推送到后台服务器
后台服务器对流进行加密、缓存、增加多个清晰度等等
前端通过 flv.js播放直播

二、node-media-server 搭建直播流服务器

node-media-server是基于node.Js开发的一个推流服务器GitHub地址 ☞ node-media-server

下载node-media-server 和@ffmpeg-installer/ffmpeg(对流进行处理需要用到这个工具)推荐使用pnpm
bash 复制代码
```
pnpm i node-media-server @ffmpeg-installer/ffmpeg
```

新建一个live.js文件

js 复制代码

import NodeMediaServer from 'node-media-server'
const createStream = () => {
   // 流最基础的配置文件
   const config = {
      rtmp: {
        port: 1935, // 推流端口
        chunk_size: 60000,
        gop_cache: true,
        ping: 30,
        ping_timeout: 60,
      },
      http: {
        port: 8887, // 获取流的地址
        allow_origin: '*',
      }
    }
    const avv = new NodeMediaServer(config)
    avv.run()
}

createStream()

执行该文件 node live.js 控制台会打印如下则证明服务器启动成功

bash 复制代码

Node Media Server v2.6.2
Node Media Rtmp Server started on port: 1935
Node Media Http Server started on port: 8887
Node Media WebSocket Server started on port: 8887

在浏览器中访问127.0.0.1:8887/admin 可访问服务器管理端地址这里可查看更多api

三、使用 obs软件进行直播推流obs软件进行直播推流

下载obs 这里以windows版作为演示
下载完成后依此点击设置 => 直播设置推流地址为 rtmp://127.0.0.1:1935/live live为app名称可自行替换,推流码也可自行替换
上面我们设置了app名称为live,推流码为mylive2,然后开启直播并打开127.0.0.1:8887/admin 管理端地址(记得刷新页面~),可以看到直播参数,可以点击mylive2来预览直播

四、使用flv.js播放

注意地址由app名称live加namemylive2组成

html 复制代码

<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://localhost:8887/live/mylive2.flv'   
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

五、对视频流进行处理(高级操作)

浏览器访问http://localhost:8887/live/mylive2.flv后可以直接获取流这样并不安全,通常我们会对url进行加密 node-media-server该插件提供了方法,这里只介绍使用m3u8流来播放
修改上面的createStream方法,使用ffmpeg来处理流,上面我们已经下载了
完整配置如下