当前位置： 首页 > article >正文

FFmpeg+WebSocket+JsMpeg实时视频流实现方案

article 2026/4/11 16:31:46

之前写的使用FFmpeg + Nginx + HLS流媒体播放方案，适合对实时性要求不高的需求，存在延迟，FFmpeg需要将视频流存储到本地文件，而本次方案FFmpeg不需要将视频流存储到本地文件，而是直接将转换后的视频流（如MJPEG格式）通过标准输出（stdout）传递给WebSocket服务器，WebSocket服务器再将数据实时推送到前端。这种方式是实时流传输，适合需要低延迟的场景。

以下是详细的实现逻辑：

1. FFmpeg 直接输出到 WebSocket 服务器

FFmpeg 通过命令行参数将 RTSP 流转换为 MJPEG 格式，并将输出直接发送到标准输出（stdout），而不是保存到文件。WebSocket 服务器通过 Node.js 的 child_process 模块捕获 FFmpeg 的输出，并将其转发给连接的客户端。

FFmpeg 命令
ffmpeg -i rtsp://your_rtsp_stream_url -f mjpeg -qscale:v 2 -
  • -i rtsp://your_rtsp_stream_url：输入 RTSP 流地址。
  • -f mjpeg：输出格式为 MJPEG。
  • -qscale:v 2：设置视频质量（值越小质量越高）。
  • -：将输出发送到标准输出（stdout），而不是文件。

2. WebSocket 服务器捕获 FFmpeg 输出

WebSocket 服务器通过 Node.js 启动 FFmpeg 进程，并监听其 stdout 数据流。每当 FFmpeg 输出一帧数据时，WebSocket 服务器就将这帧数据发送给所有连接的客户端。

WebSocket 服务器代码 (server.js)
const { spawn } = require('child_process');
const WebSocket = require('ws');// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', (ws) => {console.log('Client connected');// 启动 FFmpeg 进程const ffmpeg = spawn('ffmpeg', ['-rtsp_transport', 'tcp', // 使用 TCP 传输 RTSP 流（如果 UDP 不稳定）'-i', 'rtsp://admin:password@192.168.1.60:554/Streaming/Channels/101/', // RTSP 流地址'-f', 'mpegts', // 输出格式为 MPEG-TS'-codec:v', 'mpeg1video', // 使用 MPEG-1 编码'-s', '640x360', // 分辨率'-b:v', '800k', // 视频比特率'-bf', '0', // 禁用 B 帧'-an', // 禁用音频'pipe:1' // 输出到标准输出]);// 将 FFmpeg 的输出发送到 WebSocket 客户端ffmpeg.stdout.on('data', (data) => {if (ws.readyState === ws.OPEN) {ws.send(data); // 发送二进制数据}});// 处理 FFmpeg 的错误输出ffmpeg.stderr.on('data', (data) => {console.error(`FFmpeg error: ${data}`);});// 处理 FFmpeg 进程退出ffmpeg.on('close', (code) => {console.log(`FFmpeg process exited with code ${code}`);});// 客户端断开连接时关闭 FFmpeg 进程ws.on('close', () => {console.log('Client disconnected');ffmpeg.kill(); // 杀死 FFmpeg 进程});
});console.log('WebSocket server is running on ws://localhost:8080');

3. 前端使用 JsMpeg 播放视频流

前端通过 JsMpeg 库连接到 WebSocket 服务器，并实时解码和播放 MJPEG 视频流。

前端代码 (index.html)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Video Streaming</title><script src="https://cdn.jsdelivr.net/npm/jsmpeg/jsmpeg.min.js"></script>
</head>
<body><canvas id="video-canvas"></canvas><script>// 创建 JsMpeg 播放器const canvas = document.getElementById('video-canvas');const player = new JSMpeg.Player('ws://localhost:8080', {canvas: canvas});</script>
</body>
</html>

4. 运行流程

  1. FFmpeg：

    • 从 RTSP 流中读取视频数据。
    • 将视频数据转换为 MJPEG 格式。
    • 将转换后的数据通过标准输出（stdout）发送。

  2. WebSocket 服务器：

    • 启动 FFmpeg 进程并捕获其 stdout 数据。
    • 将捕获到的数据通过 WebSocket 发送给前端。

  3. 前端：

    • 使用 JsMpeg 连接到 WebSocket 服务器。
    • 接收并解码 MJPEG 数据，实时显示在 <canvas> 中。

5. 优点

  • 实时性：视频流直接从 FFmpeg 推送到前端，延迟较低。
  • 无需存储：视频流不需要保存到本地文件，节省磁盘空间。
  • 简单易用：只需运行 FFmpeg 和 WebSocket 服务器即可。

6. 注意事项

  • FFmpeg 性能：如果 RTSP 流的分辨率较高，FFmpeg 的转换可能会占用较多 CPU 资源。可以通过调整 -qscale:v 参数来优化性能。
  • 网络带宽：MJPEG 格式的视频流数据量较大，确保网络带宽足够。
  • WebSocket 连接数：如果有多个客户端连接，WebSocket 服务器需要处理更多的数据转发，可能会增加服务器负载。

7. 总结

通过这种方式，FFmpeg 直接将 RTSP 流转换为 MJPEG 格式并输出到 WebSocket 服务器，WebSocket 服务器再将数据实时推送到前端，前端使用 JsMpeg 进行播放。整个过程无需存储视频文件，适合实时视频流传输的场景。

相关文章：

FFmpeg+WebSocket+JsMpeg实时视频流实现方案

之前写的使用FFmpeg Nginx HLS流媒体播放方案&#xff0c;适合对实时性要求不高的需求&#xff0c;存在延迟&#xff0c;FFmpeg需要将视频流存储到本地文件&#xff0c;而本次方案FFmpeg不需要将视频流存储到本地文件&#xff0c;而是直接将转换后的视频流&#xff08;如MJPE…...

编程日记 2026/3/7 15:13:08

《论系统需求分析方法》写作心得 - 系统分析师

系统需求分析方法论述 一、项目概述及本人职责 本人曾参与一项企业级客户关系管理系统&#xff08;CRM&#xff09;的开发项目&#xff0c;担任系统分析师的角色。该项目旨在为企业提供一个集客户信息管理、销售过程跟踪、客户服务支持于一体的综合管理平台&#xff0c;以提升…...

编程日记 2026/4/5 19:01:53

DuodooBMS源码解读之 mrp_management模块

制造管理扩展模块用户使用手册 一、模块概述 本扩展模块是基于 Odoo 18 开发的制造管理模块&#xff0c;主要为用户提供了更为强大和细致的制造管理功能。该模块添加了数量验证功能&#xff0c;即当一步工序未完成时&#xff0c;开始下一步工序&#xff0c;则下一步工序的生产…...

编程日记 2026/4/5 8:56:07

rust笔记8-Deref与隐式解引用强制转换

Rust 的智能指针和 Deref Trait 是 Rust 中非常重要的概念，它们使得 Rust 的引用和指针操作更加灵活和安全。下面我们将深入介绍 Deref Trait、Deref 与 &、* 运算符的关系，以及 Rust 的隐式解引用强制转换（Deref Coercion）。 1. 智能指针与 Deref Trait 智能指针（如…...

编程日记 2026/4/2 3:41:41

【拜读】Tensor Product Attention Is All You Need姚期智团队开源兼容RoPE位置编码

姚期智团队开源新型注意力&#xff1a;张量积注意力&#xff08;Tensor Product Attention&#xff0c;TPA&#xff09;。有点像一种「动态的LoRA」&#xff0c;核心思路在于利用张量分解来压缩注意力机制中的 Q、K、V 表示&#xff0c;同时保留上下文信息&#xff0c;减少内存…...

编程日记 2026/4/11 2:18:27

Docker-技术架构演进之路

目录 一、概述 常见概念 二、架构演进 1.单机架构 2.应用数据分离架构 3.应用服务集群架构 4.读写分离 / 主从分离架构 5.引入缓存 —— 冷热分离架构 6.垂直分库 7.业务拆分 —— 微服务 8.容器化引入——容器编排架构 三、尾声 一、概述 在进行技术学习过程中&am…...

编程日记 2026/4/5 17:52:13

用Chrome Recorder轻松完成自动化测试脚本录制

前言 入门自动化测试，录制回放通常是小白测试首先用到的功能。而录制回放工具也一直是各大Web自动化测试必然会着重提供的一块功能。 早期WinRunner、QTP这样的工具，自动化测试可以说是围绕录制回放开展的。近年像Selenium也提供有录制工具 Selenium IDE，Playwright也包含…...

编程日记 2026/4/6 15:04:24

python中的异常-模块-包

文章目录 异常异常的定义异常捕获语法捕获常规异常捕获指定异常捕获多个异常捕获所有异常异常else异常finally 异常传递总结 模块概念导入自定义模块及导入main方法all变量 总结 包自定义包定义pycharm中建包的基本步骤导入方式 第三方包 异常 异常的定义 当检测到一个错误时…...

编程日记 2026/4/2 2:49:56

【GPU驱动】OpenGLES图形管线渲染机制

OpenGLES图形管线渲染机制 OpenGL/ES 的渲染管线也是一个典型的图形流水线&#xff08;Graphics Pipeline&#xff09;&#xff0c;包括多个阶段&#xff0c;每个阶段都负责对图形数据进行处理。管线的核心目标是将图形数据转换为最终的图像&#xff0c;这些图像可以显示在屏幕…...

编程日记 2026/4/9 19:52:31

ssm-day06 ssm整合

从springMVC总结再回顾一下 60节 整合就是应用框架&#xff0c;并且把这个框架放到IOC容器中 web容器&#xff1a;装springMVC和controller相关的web组件 root容器&#xff1a;装业务和持久层相关的组件 子容器可以引用父容器中的组件&#xff0c;父容器不能调子容器 一个容器…...

编程日记 2026/4/11 6:38:04

AI 编程助手 cursor的系统提示词 prompt

# Role 你是一名极其优秀具有10年经验的产品经理和精通java编程语言的架构师。与你交流的用户是不懂代码的初中生&#xff0c;不善于表达产品和代码需求。你的工作对用户来说非常重要&#xff0c;完成后将获得10000美元奖励。 # Goal 你的目标是帮助用户以他容易理解的…...

编程日记 2026/4/2 22:25:39

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_process_options

ngx_process_options 声明在 src\core\nginx.c static ngx_int_t ngx_process_options(ngx_cycle_t *cycle); 定义在 src\core\nginx.c static ngx_int_t ngx_process_options(ngx_cycle_t *cycle) {u_char *p;size_t len;if (ngx_prefix) {len ngx_strlen(ngx_prefix);p …...

编程日记 2026/4/3 19:25:31

ollama如何安全卸载，解决Ollama unins000.msg is missing

春节后在本地电脑安装了Ollama的客户端&#xff0c;每次开机自启&#xff0c;影响开机速度&#xff0c;而且本地的模型不如联网的回答效果好&#xff0c;果断选择了卸载&#xff0c;但是今天卸载发现提示下方的错误。根据此文章可以解决当前的问题。 根据此文章可以解决当前的…...

编程日记 2026/4/3 17:20:29

网络安全设备防护原理 网络安全防护装置

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 防火墙 简介 网络层的防护设备&#xff0c;依照特殊的规则允许或者限制传输的数据通过 是由软件和硬件设备组合而成&#xff0c;在内部网和外部网之间、专用网…...

编程日记 2026/4/7 21:56:26

Python的那些事第二十八篇：数据分析与操作的利器Pandas

Pandas：数据分析与操作的利器 摘要 Pandas是基于Python的开源数据分析库，广泛应用于数据科学、机器学习和商业智能等领域。它提供了高效的数据结构和丰富的分析工具，能够处理结构化数据、时间序列数据以及复杂的数据转换任务。本文从Pandas的基础概念入手，深入探讨其核心…...

编程日记 2026/4/5 8:36:42

学习threejs，使用MeshBasicMaterial基本网格材质

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshBasicMaterial 二…...

编程日记 2026/4/1 17:24:06

【git-hub项目：YOLOs-CPP】本地实现05：项目移植

ok&#xff0c;经过前3个博客&#xff0c;我们实现了项目的跑通。 但是&#xff0c;通常情况下&#xff0c;我们的项目都是需要在其他电脑上也跑通&#xff0c;才对。 然而&#xff0c;经过测试&#xff0c;目前出现了2 个bug。 项目一键下载【⬇️⬇️⬇️】&#xff1a; 精…...

编程日记 2026/4/6 15:12:43

Html5学习教程，从入门到精通，HTML5 元素语法知识点及案例代码（2）

HTML5 元素语法知识点及案例代码 一、HTML5 元素概述 HTML5 元素是构成网页的基本单位&#xff0c;每个元素都有特定的语义和功能。HTML5 元素由开始标签、内容和结束标签组成&#xff0c;例如&#xff1a; <p>这是一个段落。</p><p> 是开始标签这是一个段…...

编程日记 2025/6/22 10:03:52

【python】协程（coroutine）

协程&#xff08;coroutine&#xff09;可以理解为一个可以中途暂停保存当前执行状态信息并可以从此处恢复执行的函数&#xff0c;多个协程共用一个线程执行&#xff0c;适合执行需要“等待”的任务。 所以严格意义上&#xff0c;多个协程同一时刻也只有一个在真正的执行&#…...

编程日记 2026/4/6 7:21:37

【编译器】-LLVMIR

概述 LLVM 是一种基于静态单赋值 (SSA) 的表示形式&#xff0c;提供类型安全、低级操作、灵活性以及干净地表示“所有”高级语言的能力。 LLVM IR 是一门低级语言&#xff0c;语法类似于汇编任何高级编程语言&#xff08;如C&#xff09;都可以用LLVM IR表示基于LLVM IR可以很…...

编程日记 2026/4/5 20:26:09

java面试场景问题

还在补充&#xff0c;这几天工作忙&#xff0c;闲了会把答案附上去&#xff0c;也欢迎各位大佬评论区讨论 1.不用分布式锁如何防重复提交 方法 1&#xff1a;基于唯一请求 ID&#xff08;幂等 Token&#xff09; 思路&#xff1a;前端生成 一个唯一的 requestId&#xff08;…...

编程日记 2026/4/6 15:12:43

算法菜鸡备战3月2日传智杯省赛----0221

2209. 用地毯覆盖后的最少白色砖块 - 力扣&#xff08;LeetCode&#xff09; 力扣每日一题 class Solution { public:// 白色最少 黑色最多int minimumWhiteTiles(string floor, int numCarpets, int carpetLen) {int n floor.size();// 记忆化搜索vector memo(n 1, vector&…...

编程日记 2026/2/15 15:11:12

python pandas下载

pandas pandas:就是一个可以处理数据的 python 库 核心功能&#xff1a; 数据的清洗&#xff1a;处理丢失值&#xff0c;重复值数据分析&#xff1a;计算和统计信息&#xff0c;或分组汇总数据可视化&#xff1a;结合 图标库&#xff08;Matplotlib&#xff09;完成数据可视化…...

编程日记 2026/4/6 23:49:04

高斯牛顿法(GN)与列文伯格-马夸尔特方法在ORB-SLAM3中的应用

问题背景 高斯牛顿法&#xff08;Gauss-Newton, GN&#xff09;和列文伯格-马夸尔特方法&#xff08;Levenburg-Marquadt, LM&#xff09;是两种最常用的非线性优化方法&#xff0c;这两种方法在ORB-SLAM3系统中均有使用。 在ORB-SLAM3前端跟踪线程(Tracking)中&#xff0c;局…...

编程日记 2026/2/24 3:23:24

Python+Selenium+Pytest+POM自动化测试框架封装

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、测试框架简介 1&#xff09;测试框架的优点 代码复用率高&#xff0c;如果不使用框架的话&#xff0c;代码会显得很冗余。可以组装日志、报告、邮件等一些高…...

编程日记 2026/4/10 22:30:53

猿大师中间件：网页直接内嵌本机EXE、OCX控件、ActiveX控件或桌面应用程序神器

猿大师中间件自从2019年发布以来&#xff0c;迄今为止不断迭代升级&#xff0c;给第三方提供了将自己的桌面程序和OCX控件支持直接内嵌到浏览器网页运行的赋能SDK开发包。 目前针对不同需求发布了三个成熟且商用的产品&#xff1a; 猿大师播放器&#xff1a;浏览器中直接原生…...

编程日记 2026/4/6 9:14:29

【Python】03-Python语法入门

文章目录 1、基本概念1.1、表达式1.2、语句1.3、程序&#xff08;program&#xff09;1.4、函数&#xff08;function&#xff09; 2、基本语法3、字面量与变量4、变量与标识符 1、基本概念 1.1、表达式 表达式就是一个类似于数学公式的东西&#xff0c;表达式一般仅用来计算一…...

编程日记 2025/9/2 18:45:46

C++，设计模式，【工厂方法模式】

文章目录 如何用汽车生产线理解工厂方法模式？一、传统生产方式的困境二、工厂方法模式解决方案三、模式应用场景四、模式优势分析五、现实应用启示✅C++，设计模式，【目录篇】 如何用汽车生产线理解工厂方法模式？ 某个早晨，某车企CEO看着会议室里堆积如面的新车订单皱起眉…...

编程日记 2026/4/5 16:44:00

跟着 Lua 5.1 官方参考文档学习 Lua (5)

文章目录 2.10 – Garbage Collection2.10.1 – Garbage-Collection Metamethods2.10.2 – Weak Tables 2.10 – Garbage Collection Lua performs automatic memory management. This means that you have to worry neither about allocating memory for new objects nor abo…...

编程日记 2026/4/4 13:37:43

9.PG数据库层权限管理（pg系列课程）第2遍

一、PostgreSQL数据库属主 Postgres中的数据库属主属于创建者&#xff0c;只要有createdb的权限就可以创建数据库&#xff0c;数据库属主不一定拥有存放在该数据库中其它用户创建的对象的访问权限。数据库在创建后&#xff0c;允许public角色连接&#xff0c;即允许任何人连接…...

编程日记 2025/11/10 1:30:06