javascript - 如何同时流式传输文本和视频？

Question

我有使用 node-media-server 的 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”事件的所有内容，并且可能将文本放在视频本身上，但这给出了一个基 native 制的示例作品:

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>