nodejs ffmpeg在特定时间播放视频并将其流式传输到客户端

2024-03-19

我正在尝试使用 nodeJS 和 ffmpeg 制作一个基本的在线视频编辑器。

为此,我需要执行 2 个步骤:

  1. 设置客户端视频的进出时间,要求客户端在特定的时间观看视频,并切换视频的位置。这意味着,如果使用单个视频作为输入,并将其分割成更小的部分,则需要从下一个编辑片段的开始时间重播(如果有意义的话)。

  2. 将输入输出数据发送到nodejs并使用ffmpeg将其导出为成品视频。

起初我想纯粹在客户端上做1.,然后将源视频上传到nodeJS,并使用ffmpeg生成相同的结果,然后将结果发送回。

但目前 HTML 客户端的视频处理可能存在问题,所以现在我改变计划:在 NodeJS 服务器上完成所有处理,包括视频播放。

这是我现在陷入困境的部分。我知道 ffmpeg 可以通过 NodeJS 以多种不同的方式使用,但是我还没有找到一种方法来使用 ffmpeg 在特定时间戳实时播放 .mp4 webm 视频,并将流视频(同样,在特定时间戳)发送到客户端。

我已经看到了 ffmpeg 中的 pipeline:1 属性,但我找不到任何教程来让它与 mp4 webm 视频一起工作,并使用 nodejs 以某种方式解析标准输出数据并将其发送到客户端。即使我能让这部分工作,我仍然不知道在某个时间戳实时播放视频。

我也见过 ffplay,但据我所知这仅用于测试;我还没有看到任何使用nodejs从中实时获取视频数据的方法。

So:

如何在nodeJS中在特定时间(最好使用ffmpeg)播放视频,并将其实时发送回客户端?

我已经看到的:

实时 http 流传输到 HTML5 视频客户端的最佳方法 https://stackoverflow.com/questions/21921790/best-approach-to-real-time-http-streaming-to-html5-video-client/30965967

使用 FFMPEG 进行网络音频 api 的直播 https://stackoverflow.com/questions/21204582/live-streaming-using-ffmpeg-to-web-audio-api

Ffmpeg - 如何强制整个帧的 MJPEG 输出? https://stackoverflow.com/questions/59468403/ffmpeg-how-to-force-mjpeg-output-of-whole-frames

ffmpeg:使用 NodeJS 从 stdin 渲染 webm https://stackoverflow.com/questions/28994271/ffmpeg-render-webm-from-stdin-using-nodejs

没有数据从 ffmpeg 写入 stdin 或 stderr https://stackoverflow.com/questions/47790255/no-data-written-to-stdin-or-stderr-from-ffmpeg

Node.js 将 ffmpeg 标准输出实时流式传输到 res https://stackoverflow.com/questions/23839741/node-js-live-streaming-ffmpeg-stdout-to-res/23845262

使用nodejs和ffmpeg进行实时视频转换 https://stackoverflow.com/questions/19519128/realtime-video-conversion-using-nodejs-and-ffmpeg

使用nodejs stdout 管道输出 ffmpeg https://stackoverflow.com/questions/22167893/pipe-output-of-ffmpeg-using-nodejs-stdout

无法使用 FFMPEG 重新流式传输 MP4 HTML5 视频 https://stackoverflow.com/questions/21804298/cant-re-stream-using-ffmpeg-to-mp4-html5-video/35955575#35955575

FFmpeg 通过 Nodejs 将 webm 视频直播到多个 http 客户端 https://stackoverflow.com/questions/46683482/ffmpeg-live-streaming-webm-video-to-multiple-http-clients-over-nodejs?rq=1

http://www.mobiuso.com/blog/2018/04/18/video-processing-with-node-ffmpeg-and-gearman/ http://www.mobiuso.com/blog/2018/04/18/video-processing-with-node-ffmpeg-and-gearman/

使用节点 Fluent-ffmpeg 流式传输 mp4 视频 https://stackoverflow.com/questions/29948551/stream-mp4-video-with-node-fluent-ffmpeg

如何通过Node JS获取ffmpeg的具体开始和结束时间? https://stackoverflow.com/questions/47090699/how-to-get-specific-start-end-time-in-ffmpeg-by-node-js

直播:节点媒体服务器 + Dash.js 配置为实时低延迟 https://stackoverflow.com/questions/60152228/live-streaming-node-media-server-dash-js-configured-for-real-time-low-latency

使用 NODE.JS 和 html5 实现低延迟 (50ms) 视频流 https://stackoverflow.com/questions/56504378/low-latency-50ms-video-streaming-with-node-js-and-html5

用于直播的服务器node.js https://stackoverflow.com/questions/48401234/server-node-js-for-livestreaming

使用 Node JS 进行 HLS 流式传输 https://stackoverflow.com/questions/21878178/hls-streaming-using-node-js

将部分视频流传输至客户端 https://stackoverflow.com/questions/25117464/stream-part-of-the-video-to-the-client

通过 Node.js 使用 HTML 5 进行视频流传输 https://stackoverflow.com/questions/4360060/video-streaming-with-html-5-via-node-js

使用 Node.js 将视频文件流式传输到 html5 视频播放器以便视频控件继续工作? https://stackoverflow.com/questions/24976123/streaming-a-video-file-to-an-html5-video-player-with-node-js-so-that-the-video-c

如何(伪)流式传输 H.264 视频 - 以跨浏览器和 html5 的方式? https://stackoverflow.com/questions/6677682/how-to-pseudo-stream-h-264-video-in-a-cross-browser-and-html5-way

伪流式传输 MP4 文件 https://stackoverflow.com/questions/25669948/pseudo-streaming-an-mp4-file

如何将视频数据流式传输到视频元素? https://stackoverflow.com/questions/36274810/how-to-stream-video-data-to-a-video-element

如何使用 ffmpeg 将 h.264 流转换为 MP4 并将结果通过管道传输到客户端? https://stackoverflow.com/questions/56407245/how-do-i-convert-an-h-264-stream-to-mp4-using-ffmpeg-and-pipe-the-result-to-the

https://medium.com/@brianshaler/on-the-fly-video-rendering-with-node-js-and-ffmpeg-165590314f2 https://medium.com/@brianshaler/on-the-fly-video-rendering-with-node-js-and-ffmpeg-165590314f2

Node.js 将 ffmpeg 标准输出实时流式传输到 res https://stackoverflow.com/questions/23839741/node-js-live-streaming-ffmpeg-stdout-to-res

Node.js 可以编辑视频文件吗? https://stackoverflow.com/questions/12032120/can-node-js-edit-video-files


这个问题有点宽泛,但我已经构建了类似的东西,并将尝试为您分块回答这个问题:

  1. 设置客户端视频的进出时间,要求客户端在特定的时间观看视频,并切换视频的位置。这意味着,如果使用单个视频作为输入,并将其分割成更小的部分,则需要从下一个编辑片段的开始时间重播(如果有意义的话)。

在客户端,当您播放时,您可以简单地使用引用相同 URL 的多个 HTMLVideoElement 实例。

对于时间安排,您可以使用以下命令自行管理.currentTime财产。然而,您会发现您的 JavaScript 时机并不完美。如果您在实例化时知道开始/结束点,则可以使用媒体片段 URI https://www.w3.org/TR/media-frags/:

video.src = 'https://example.com/video.webm#t=5.5,30';

在此示例中,视频从 5.5 秒开始,到 30 秒停止。您可以使用ended event https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event了解何时开始播放下一个剪辑。这不能保证帧完全准确,但对于实时预览等功能来说非常有用。

但是目前 HTML 客户端的视频处理可能存在问题,所以现在我改变了计划:在 NodeJS 服务器上进行所有处理,...

如果一致性很重要的话,这不是一个糟糕的计划。

...包括视频播放。

就控制视频的延迟和预览质量而言,您在这里需要进行严重的权衡。我建议采用一种混合方法,其中编辑在客户端完成,但最终的弹跳/合成/其他操作在服务器端完成。

无论如何,这与桌面视频编辑软件的工作方式没有什么不同。

这是我现在陷入困境的部分。我知道 ffmpeg 可以通过 nodeJS 以多种不同的方式使用,但我还没有找到一种方法来使用 ffmpeg 在特定时间戳实时播放 .mp4 webm 视频,并发送流视频(同样,以特定时间戳)发送给客户端。

是 MP4 还是 WebM?这是两种不同的容器格式。 WebM 很容易进行流式传输,直接从 FFmpeg 中通过管道传输。 MP4 需要使用 MOOV 原子(-movflags faststart),并且可能会有点麻烦。

无论如何,听起来您只需要在输入上设置时间戳:

ffmpeg -ss 00:01:23 -i video.mp4 -to 00:04:56 -f webm -

我已经看到了 ffmpeg 中的 pipeline:1 属性,但我找不到任何教程来让它与 mp4 webm 视频一起工作,并使用 nodejs 以某种方式解析标准输出数据并将其发送到客户端。

只需使用连字符-作为输出文件名,FFmpeg 将输出到 STDOUT。然后,您无需在 Node.js 应用程序中执行任何其他操作...将输出直接传送到客户端。未经测试,但您正在寻找类似的东西,假设有一个典型的 Express 应用程序:

app.get('/stream', (req, res, next) => {
  const ffmpeg = child_process.spawn('ffmpeg', [
    '-i', 'video.mp4',
    '-f', 'webm',
    '-'
  ]);

  res.set('Content-Type', 'video/webm'); // TODO: Might want to set your codecs here also

  ffmpeg.stdout.pipe(res);
});

即使我能让这部分工作,我仍然不知道在某个时间戳实时播放视频。

好吧,为此,您只需播放一个流,因此您可以执行以下操作:

<video src="https://your-nodejs-server.example.com/stream" preload="none" />

The preload="none"部分很重要,要保持它的“活力”。

所有这一切的替代方法是建立一个GStreamer https://gstreamer.freedesktop.org/管道,并且可能利用其内置的 WebRTC 堆栈。这并非微不足道,但具有潜在的较低延迟以及自动处理“赶上”来自服务器的实时视频的优点。如果您使用普通的视频标签,则必须通过监视缓冲数据并管理播放速度来自行处理。

我也看过ffplay...

FFplay 与您的项目无关。

希望这堆笔记能给你一些需要考虑和查看的东西。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nodejs ffmpeg在特定时间播放视频并将其流式传输到客户端 的相关文章

  • 为什么我不能在 Javascript 中滚动循环?

    我正在开发一个使用 dojo 的网页 并且上面有许多 在我的测试用例中为 6 但通常是可变的 项目小部件 我正在调用 dojo addOnLoad init 并且在 init 函数中我有以下几行 dojo connect dijit byI
  • 如何修改 Elasticsearch 文档的 _source 字段

    问题 有没有办法从文档的 source 中清除 html html 的剥离可以是周期性的 触发的 或者理想情况下是在索引时即时进行的 我将数据输入到elasticsearch中 并针对分析器进行索引 该分析器在索引之前剥离不需要的htmls
  • Facebook 分享不显示来自开放图元标签的图像

    我正在尝试将 Facebook 共享按钮集成到我雇主的网站 标题 网址 描述 简介均显示正确 但未附加任何图像 当共享对话框打开时 图像容器会闪烁 然后消失 就好像 facebook 正在尝试处理图像但失败一样 我正在使用 og image
  • 读取 Nashorn JO4 和 NativeArray

    Java调用代码 import jdk nashorn api scripting myCustomHashMap dataStore new myCustomHashMap ScriptEngineManager sem new Scri
  • 无法解构“undefined”或“null”的属性“user”

    使用 redux 检索用户信息时出错 我想从数据库获取用户信息 姓名 密码和头像地址 然后对其进行编辑 我正在使用nodejs express react redux 和jwt Actions user js import axios fr
  • 防止Rails Turbolinks导致Google地图JS多次执行

    我目前正在开发 Rails 应用程序 但出现以下错误 您已在此页面上多次包含 Google Maps API 这可能会导致意外错误 经过一番研究后 我发现 Turbolinks 导致了这个问题 当 的时候link to单击后 Google
  • 如何在javascript中解压二进制文件?

    我正在尝试将一些现有代码从 python 移植到 javascript 并且不确定如何处理以下行 var1 var2 struct unpack
  • 如何从oracle存储过程中提取out变量?

    我有存储过程 其中有很多输出变量 所以我这样调用存储过程 export const infoHR3 async gt try const sql Declare ln order qty NUMBER ln in proc qty hr N
  • 关闭弹出窗口后重新加载父页面

    我试图让用户通过弹出窗口登录 当他们单击弹出窗口的链接 这是一个 php 变量 时 他们可以登录 当窗口关闭时 我希望它重新加载他们最初所在的页面 父页面 这是signin php页面上的代码 但这所做的只是使登录页面成为用户所在的页面 我
  • Docker 从 npm install 组成 v3 命名的卷和 node_modules

    使用 compose v3 在构建中 我复制 package json 并运行 npm install 到 var www project node modules 我没有在构建阶段添加任何代码 在撰写中我添加了卷 www var www
  • 无需递归即可展平多个嵌套数组的数组 - javascript

    也许这是一个愚蠢的问题 但我无法意识到是否可以在不使用递归的情况下展平多维数组 我用递归编写了一种解决方案 function transform arr var result arr forEach flatten function fla
  • 使用 node.js 上的 knox 将八位字节流从请求流式传输到 S3

    我正在尝试使用以下命令将八位字节流直接流式传输到 S3knox https github com LearnBoost knox 在 Node js 上 octet stream 是从浏览器上传的 XHR 文件 我以为我可以将请求流式传输到
  • jQuery 将所有 href="" 替换为 onclick="window.location="

    所以我有一个很酷的给你 我需要在渲染时扫描我的 html 文档并替换每个 href with onclick window location 不仅如此 我还需要将链接从 href 带到 window location 例如 如果我有 hre
  • 找不到模块“babel-runtime/regenerator”本地导入与从 NPM 导入

    我正在开发一个 NPM 模块 但我的 babel 配置一直存在问题 我正在使用 ES6 特别是异步 等待 静态类方法和导入 导出 首先 我遇到了一个常见问题 ReferenceError regeneratorRuntime is not
  • 将复杂对象传递给 ui-sref 参数

    我需要这样的构建网址 列表 过滤器 状态 1 过滤器 类型 2 I do link a List a 在参数中传递复杂对象 如果传递简单对象 filter 1 可以 但我需要这个 state state list url list filt
  • ES6 Bare Import:如何使用以及何时使用?

    ES6 允许我们使用新的导入语法 使用它 我们可以将模块导入到我们的代码中 或者这些模块的一部分 使用示例包括 Import the default export from a module import React from react
  • pm2 start app.js 在 15 次重启后退出

    npm start 会很好地启动我的应用程序 但是当我这样做时 pm2 start app js I get PM2 Spawning PM2 daemon PM2 PM2 Successfully daemonized PM2 Proce
  • 使用 javascript 将子元素添加到父元素

    我正在尝试添加一个子元素 to a 父元素如下 li要添加到ul 单击 Enter 按钮或按下键盘上的 Enter 键时 会生成一个新的li and delete按钮应该添加到ul 我的代码无法正常工作 有人可以帮我解决这个问题吗 HTML
  • 如何在 Javascript 中检测网络丢失?

    我的 Web 应用程序适用于多种手持设备 例如 iPad Galaxy 选项卡等 应用程序从服务器请求图像并在客户端上呈现 现在的问题有时会发生 在图像渲染过程中网络连接会丢失 而不是在设备上显示 html 无图像图标时 我想优雅地处理这种
  • Google 地图 v3 信息窗口在地图视口外打开

    如果单击地图视口顶部附近的标记 信息窗口将加载到可视区域之外 并且必须拖动地图才能查看信息窗口内容 理想情况下 我不希望地图自动平移 有没有办法以不同的方向加载信息窗口 例如如果标记位于视口的顶部 则以向下的方向显示信息窗口 不 你不能以不

随机推荐