背景：公司百度云推流有问题，自己本地搭建一套保证项目可以测试使用

• OBS Studio：进行视频的录制(推流)
• Node-Media-Server：搭建 Node 流服务
• flv.js：配合 html5 的 video 标签实现 Node-Media-Server 中视频源的播放

1. 搭建 Node-Media-Server 项目

A Node.js implementation of RTMP/HTTP-FLV/WS-FLV/HLS/DASH Media Server

1. 新建项目文件夹

   mkdir node-flv
   cd node-flv

2. 创建项目

   npm init -y
   npm install node-media-server --save
   touch index.js

3. js 写入

   const NodeMediaServer = require('node-media-server');
   
   const config = {
     rtmp: {
       port: 1935, // 推流 prot
       chunk_size: 60000,
       gop_cache: true,
       ping: 60,
       ping_timeout: 30
     },
     http: {
       port: 8000, // 服务 prot
       allow_origin: '*'
     }
   };
   
   var nms = new NodeMediaServer(config)
   nms.run();

4. 执行代码

   ➜  node-flv node ./index.js
   2024/9/5 16:41:59 21203 [INFO] Node Media Server v2.7.0
   2024/9/5 16:41:59 21203 [INFO] Node Media Rtmp Server started on port: 1935
   2024/9/5 16:41:59 21203 [INFO] Node Media Http Server started on port: 8000
   2024/9/5 16:41:59 21203 [INFO] Node Media WebSocket Server started on port: 8000

5. 访问管理端

   http://localhost:8000/admin 可访问 Node-Media-Server 的管理端界面

   

   image.png

2. OBS 推送 rtmp 流至流服务

1. 配置 推流地址

   服务: 自定义

   服务器: rtmp://localhost:1935/live

   推流码: test1 (格式为：STREAM_NAME?sign=expires-HashValue)

   

   image

2. 选择媒体后，进行直播推流

   

   image

3. 回到 http://localhost:8000/admin/streams 可以看到对应的流信息

   

   image

4. flv 地址： http://localhost:8000/live/test1.flv

   ➜  node-flv node ./index.js
   2024/9/5 16:42:08 21223 [INFO] Node Media Server v2.7.0
   2024/9/5 16:42:08 21223 [INFO] Node Media Rtmp Server started on port: 1935
   2024/9/5 16:42:08 21223 [INFO] Node Media Http Server started on port: 8000
   2024/9/5 16:42:08 21223 [INFO] Node Media WebSocket Server started on port: 8000
   2024/9/5 16:42:10 21223 [INFO] [rtmp connect] id=1RG718N5 ip=::1 app=live args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; FMSc/1.0)","swfUrl":"rtmp://localhost:1935/live","tcUrl":"rtmp://localhost:1935/live"}
   2024/9/5 16:42:10 21223 [INFO] [rtmp publish] New stream. id=1RG718N5 streamPath=/live/test1 streamId=1
   2024/9/5 16:42:11 21223 [INFO] [rtmp publish] Handle audio. id=1RG718N5 streamPath=/live/test1 sound_format=10 sound_type=2 sound_size=1 sound_rate=3 codec_name=AAC 48000 2ch
   2024/9/5 16:42:11 21223 [INFO] [rtmp publish] Handle video. id=1RG718N5 streamPath=/live/test1 frame_type=1 codec_id=7 codec_name=H264 1280x720

3. flv.js 播放视频流

flv.js 是来自 bilibli 的开源项目。它解析 FLV 文件给原生HTML5 Video 标签播放音视频数据，使浏览器在不借助 Flash 的情况下播放 FLV 成为可能。

除此之外，还可以使用 nodeplayer-js、EasyMedia-ui ...

利用 flv.js 在线测试网址：http://bilibili.github.io/flv.js/demo/ 检测推流是否成功

image

代码使用：

<script src="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:8000/live/test1.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>