【纯前端实现FFmpeg与Node-Media-Server桌面推流】

Luich

于 2025-06-14 16:54:32 发布

阅读量886

点赞数 29

CC 4.0 BY-SA版权

文章标签：前端 ffmpeg

本文链接：https://blog.csdn.net/weixin_43864172/article/details/148654399

使用FFmpeg与Node-Media-Server实现桌面推流

安装Node-Media-Server

本教程演示纯前端视频推流方案，基于Node-Media-Server实现。安装前请确保已安装Node.js（版本18以上）。

npm install node-media-server -g

安装完成后，在bin目录下创建nms_config.js配置文件：

const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 4096,
    gop_cache: false,  // 禁用GOP缓存以降低延迟
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    allow_origin: '*',
    mediaroot: './media'
  }
};

const nms = new NodeMediaServer(config);
nms.run();

安装FFmpeg

确保系统已安装FFmpeg：

Windows用户访问FFmpeg官网下载压缩包
解压后添加至系统环境变量

启动服务

首先启动Node-Media-Server：

node nms_config.js

服务启动成功截图

成功启动后，将显示两个监听端口：

HTTP端口：8000
RTMP端口：1935

若启动失败，请检查端口是否被占用。

然后启动FFmpeg推流：

ffmpeg -f gdigrab -framerate 30 -probesize 10M -analyzeduration 10M -i desktop -c:v libx264 -preset veryfast -tune zerolatency -pix_fmt yuv420p -c:a aac -f flv rtmp://你的ip/live/mystream

注：此命令为桌面捕获推流，摄像头或本地文件推流请参考FFmpeg相关文档。

推流参数说明

-probesize 10M        // 增加探测大小
-analyzeduration 10M  // 增加分析时长
-framerate 30         // 指定帧率
-video_size 1920x1080 // 设置分辨率
-offset_x             // 捕获区域X偏移
-offset_y             // 捕获区域Y偏移
-draw_mouse 1         // 显示鼠标指针
-show_region 1        // 显示捕获区域边框

推流成功截图

FLV播放器实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>FLV播放器</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: auto;
            overflow: hidden;
        }
        body {
            display: flex;
        }
        #mse {
            flex: auto;
        }
    </style>
    <script>
        window.addEventListener('resize', function() {
            document.getElementById('videoElement').style.height = window.innerHeight + 'px';
        });
    </script>
</head>
<body>
    <video id="videoElement" controls></video>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
    <script>
        if (flvjs.isSupported()) {
            const videoElement = document.getElementById('videoElement');
            const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                hasAudio: false,
                url: 'http://你的ip:8000/live/mystream.flv'
            }, {
                autoCleanupSourceBuffer: true,
                autoCleanupMinBackwardDuration: 60,
                enableStashBuffer: false,
                stashInitialSize: 128
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>