如何同时传输文本和视频？

Question

我有 node.js 使用节点媒体服务器的服务器：

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

我还有一个从我的计算机流式传输的视频，如下所示：

ffmpeg -re -i video.mp4 -c:v libx264 -preset veryfast -tune zerolatency -c:a aac -ar 44100 -f flv rtmp://localhost/live/STREAM_NAME

在 HTML，我可以观看视频：

<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<video id="videoElement" muted></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://localhost:8000/live/STREAM_NAME.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

没关系，但我想在此流中添加一些文本，如字幕（但它们实际上不是字幕，而是随机文本），并希望从 HTML 或 Javascript 访问此数据。我怎样才能做到这一点？我无法设置另一台服务器只发送数据，因为可能会发生同步问题。

Answer 1

您可以通过多种方式向视频添加文本 - 最常见的可能是：

将文本轨道添加到视频容器，即 MP4 文件。这通常在服务器端完成，然后客户端使用此信息在客户端显示它。您可以在此处查看更多信息以及使用常用工具的示例：https://www.bento4.com/developers/dash/subtitles/
将文本嵌入帧本身 - 这需要更多处理，并且还会将文本添加到视频帧本身，因此您无法在客户端轻松打开和关闭文本。如果您确实想这样做，那么 FFMPEG 可能是一个不错的起点。
在客户端本身上添加文本覆盖 - 例如浏览器应用程序上的文本 'div' 或元素，或 Android 上的 TextView 等。您提到同步可能是一个问题，但您可以从视频中获取计时事件以触发更改文本。这避免了您必须对视频或视频容器进行任何额外的处理。

下面是一个使用定时触发文本的简单示例 - 您可能希望对其进行更新以避免检查每个 'onTimeUpdate' 事件的所有内容，并且可能将文本放在视频本身之上，但这举例说明基本机制是如何工作的：

var vid1 = document.getElementById("MyVid1")
var textBox = document.getElementById("textbox")

var firstTextTime = 3
var secondTextTime = 6
var thirdTextTime = 9

vid1.ontimeupdate = function() {

    if (vid1.currentTime > thirdTextTime) {
      textBox.innerHTML = "Third message"
    } else if (vid1.currentTime > secondTextTime) {
      textBox.innerHTML = "Second message"
    } else if (vid1.currentTime > firstTextTime) {
      textBox.innerHTML = "First message"
    }
    
};

<p id= "textbox">
Start Message.
</p>
<video id="MyVid1" width="320" height="176" autoplay controls preload="auto">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

如何同时传输文本和视频？

How to stream text and video at the same time?

javascript

ffmpeg

video-streaming

node.js

html5-video