- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用nodeJS和ffmpeg制作一个基本的在线视频编辑器。
为此,我需要两个步骤:
设置客户端视频的进出时间,要求客户端在特定的时间观看视频,并切换视频的位置。这意味着,如果使用单个视频作为输入,并将其分割成更小的部分,则需要从下一个编辑片段的开始时间重播(如果有意义的话)。
将输入输出数据发送到nodejs并使用ffmpeg导出为成品视频。
一开始我想做1.纯粹在客户端,然后将源视频上传到nodeJS,并使用ffmpeg生成相同的结果,然后将结果发送回来。
但是目前 HTML 客户端的视频处理可能存在问题,所以现在我改变计划:在 NodeJS 服务器上进行所有处理,包括视频播放。
这是我现在陷入困境的部分。我知道 ffmpeg 可以通过 nodeJS 以多种不同的方式使用,但是我还没有找到一种方法来使用 ffmpeg 在特定时间戳实时播放 .mp4 webm 视频,并发送流视频(再次) ,在某个时间戳)到客户端。
我已经看到了 ffmpeg 中的 pipeline:1 属性,但我找不到任何教程来让它与 mp4 webm 视频一起工作,并使用 nodejs 以某种方式解析 stdout 数据并将其发送到客户端。即使我能让这部分工作,我仍然不知道在某个时间戳实时播放视频。
我也见过ffplay,但据我所知这仅用于测试;我还没有看到任何使用nodejs从中实时获取视频数据的方法。
所以:
如何在特定时间(最好使用 ffmpeg)在 NodeJS 中播放视频,并将其实时发送回客户端?
我已经看到的:
Best approach to real time http streaming to HTML5 video client
Live streaming using FFMPEG to web audio api
Ffmpeg - How to force MJPEG output of whole frames?
ffmpeg: Render webm from stdin using NodeJS
No data written to stdin or stderr from ffmpeg
node.js live streaming ffmpeg stdout to res
Realtime video conversion using nodejs and ffmpeg
Pipe output of ffmpeg using nodejs stdout
can't re-stream using FFMPEG to MP4 HTML5 video
FFmpeg live streaming webm video to multiple http clients over Nodejs
http://www.mobiuso.com/blog/2018/04/18/video-processing-with-node-ffmpeg-and-gearman/
stream mp4 video with node fluent-ffmpeg
How to get specific start & end time in ffmpeg by Node JS?
Live streaming: node-media-server + Dash.js configured for real-time low latency
Low Latency (50ms) Video Streaming with NODE.JS and html5
Server node.js for livestreaming
Stream part of the video to the client
Video streaming with HTML 5 via node.js
How to (pseudo) stream H.264 video - in a cross browser and html5 way?
How to stream video data to a video element?
How do I convert an h.264 stream to MP4 using ffmpeg and pipe the result to the client?
https://medium.com/@brianshaler/on-the-fly-video-rendering-with-node-js-and-ffmpeg-165590314f2
最佳答案
这个问题有点宽泛,但我已经构建了类似的东西,并将尝试为您逐个回答这个问题:
- set the in-and-out times of the videos from the client, which requires the client to view the video at specific times, and switch the position of the video. Meaning, if a single video is used as an input, and split it into smaller parts, it needs to replay from the starting time of the next edited segment, if that makes sense.
客户端,当您播放时,您可以简单地使用引用相同 URL 的多个 HTMLVideoElement 实例。
对于时间,您可以使用 .currentTime
属性自行管理。然而,您会发现您的 JavaScript 时机并不完美。如果您在实例化时知道开始/结束点,则可以使用 Media Fragment URIs :
video.src = 'https://example.com/video.webm#t=5.5,30';
在此示例中,视频从 5.5 秒开始,到 30 秒停止。您可以使用 ended
event了解何时开始播放下一个剪辑。这不能保证帧完全准确,但对于实时预览等功能来说非常有用。
But there are may problems with video processing on the client side in HTML at the moment, so now I have a change of plans: to do all of the processing on the nodeJS server,...
如果一致性很重要的话,这不是一个糟糕的计划。
... including the video playing.
就控制视频的延迟和预览质量而言,您在这里需要进行认真的权衡。我建议采用一种混合方法,其中编辑在客户端完成,但最终的弹跳/合成/其他操作在服务器端完成。
无论如何,这与桌面视频编辑软件的工作原理没有什么不同。
This is the part I am stuck at now. I'm aware that ffmpeg can be used in many different ways from nodeJS, but I have not found a way to play a .mp4 webm video in realtime with ffmpeg, at a specific timestamp, and send the streaming video (again, at a certain timestamp) to the client.
是 MP4 还是 WebM?这是两种不同的容器格式。 WebM 很容易进行流式传输,直接从 FFmpeg 中通过管道传输。 MP4 需要使用 MOOV 原子 (-movflags faststart
),并且可能会有点麻烦。
无论如何,听起来您只需要在输入上设置时间戳即可:
ffmpeg -ss 00:01:23 -i video.mp4 -to 00:04:56 -f webm -
I've seen the pipe:1 attribute from ffmpeg, but I couldn't find any tutorials to get it working with an mp4 webm video, and to parse the stdout data somehow with nodejs and send it to the client.
只需使用连字符 -
作为输出文件名,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);
});
And even if I could get that part to work, I still have no idea to play the video, in realtime, at a certain timestamp.
好吧,为此,您只需播放一个流,因此您可以执行以下操作:
<video src="https://your-nodejs-server.example.com/stream" preload="none" />
preload="none"
部分很重要,可以保持其“实时”。
所有这一切的替代方法是设置 GStreamer管道,并且可能利用其内置的 WebRTC 堆栈。这并非微不足道,但具有潜在的较低延迟以及自动处理“ catch ”来自服务器的实时视频的优点。如果您使用普通的视频标签,则必须通过监视缓冲数据并管理播放速度来自行处理。
I've also seen ffplay...
FFplay 与您的项目无关。
希望这堆笔记能为您提供一些值得考虑和查看的内容。
关于javascript - nodejs ffmpeg在特定时间播放视频并将其流式传输到客户端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60645390/
我对此很陌生,我在这里的论坛上检查过答案,但我没有找到任何真正可以帮助我的答案。我正在尝试播放 res/raw 文件夹中的视频。到目前为止我已经设置了这段代码: MediaPlayer mp; @Ov
我可以播放一个视频剪辑,检测视频的结尾,然后创建一个表单,然后播放另一个视频剪辑。我的问题是,表单 react 不正确,我创建了带有提交按钮和两个单选按钮可供选择的表单。我希望让用户进行选择,验证响应
首先,我必须说我在web2py讨论组中看到过类似的内容,但我不太理解。 我使用 web2py 设置了一个数据库驱动的网站,其中的条目只是 HTML 文本。其中大多数将包含 img和/或video指向相
我正在尝试在视频 View 中播放 YouTube 视频。 我将 xml 布局如下: 代码是这样的: setContentView(R.layout.webview); VideoV
我正在开发一个需要嵌入其中的 youtube 视频播放器的 android 应用程序。我成功地从 API 获得了 RTSP 视频 URL,但是当我试图在我的 android 视频 View 中加载这个
我目前正在从事一个使用 YouTube API 的网络项目。 我完全不熟悉 API。所以每一行代码都需要付出很多努力。 使用以下代码,我可以成功检索播放列表中的项目: https://www.goog
是否可以仅使用视频 ID 和 key 使用 API V3 删除 youtube 视频?我不断收到有关“必需参数:部分”丢失的错误消息。我用服务器和浏览器 api 键试了一下这是我的代码: // $yo
所以我一直坚持这个大约一个小时左右,我就是无法让它工作。到目前为止,我一直在尝试从字符串中提取整个链接,但现在我觉得只获取视频 ID 可能更容易。 RegEx 需要从以下链接样式中获取 ID/URL,
var app = angular.module('speakout', []).config( function($sceDelegateProvider) {
我正在努力从 RSS 提要中阅读音频、视频新闻。我如何确定该 rss 是用于新闻阅读器还是用于音频或视频? 这是视频源:http://feeds.cbsnews.com/CBSNewsVideo 这是
利用python反转图片/视频 准备:一张图片/一段视频 python库:pillow,moviepy 安装库 ?
我希望在用户双击视频区域时让我的视频全屏显示,而不仅仅是在他们单击控件中的小图标时。有没有办法添加事件或其他东西来控制用户点击视频时发生的情况? 谢谢! 最佳答案 按照 Musa 的建议,附
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 7年前关闭。 Improve this questi
我有一个公司培训视频加载到本地服务器上。我正在使用 HTML5 的视频播放来观看这些视频。该服务器无法访问网络,但我已加载 apache 并且端口 8080 对同一网络上的所有机器开放。 这些文件位于
我想混合来自 video.mp4 的视频(时长 1 分钟)和来自 audio.mp3 的音频(10 分钟持续时间)到一个持续时间为 1 分钟的输出文件中。来自 audio.mp3 的音频应该是从 4
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 8年前关闭。 Improve this questi
我正在尝试使用 peer/getUserMedia 创建一个视频 session 网络应用程序。 目前,当我将唯一 ID 发送到视频 session 时,我能够听到/看到任何加入我的 session
考虑到一段时间内的观看次数,我正在评估一种针对半自动脚本的不同方法,该脚本将对视频元数据执行操作。 简而言之,只要视频达到指标中的某个阈值,就说观看次数,它将触发某些操作。 现在要执行此操作,我将不得
我正在通过iBooks创建专门为iPad创建动态ePub电子书的网站。 它需要支持youtube视频播放,所以当我知道视频的直接路径时,我正在使用html5 标记。 有没有一种使用html5 标签嵌入
我对Android不熟悉,我想浏览youtube.com并在Webview内从网站显示视频。当前,当我尝试执行此操作时,将出现设备的浏览器,并让我使用设备浏览器浏览该站点。如果Webview不具备这种
我是一名优秀的程序员,十分优秀!