AWS MediaLive通过UDP输出组向HTML5客户端推流播放问题咨询

1. 改用UDP方案的正确性判断 #

从MediaLive输出UDP MPEG-TS到你的处理服务器是合理选择——因为你需要读取并修改直播帧，UDP传输的原始MPEG-TS流更便于直接解析、操作原始帧数据；而MediaPackage输出的是封装后的HLS/DASH流，难以直接处理帧级内容。但你当前视频无法渲染的核心问题是：HTML5视频客户端不原生支持直接播放UDP传输的MPEG-TS流，浏览器没有内置UDP接收及对应解码逻辑，这和MediaPackage输出HLS/DASH能直接播放的本质区别。

2. 修复视频无法渲染的可行路径 #

你需要在UDP接收端（你的处理服务器）和HTML5客户端之间增加转换环节，将处理后的MPEG-TS流转换成浏览器支持的格式：

• WebRTC推流：将处理后的流编码为WebRTC格式推送给前端，浏览器原生支持WebRTC，延迟极低，适合直播场景。可通过FFmpeg或GStreamer实现转码推流，前端用RTCPeerConnection接收播放。
• WebSocket + MSE（媒体源扩展）：后端将处理后的MPEG-TS片段或H.264/AAC裸流通过WebSocket发送给前端，前端利用MSE API手动构建媒体源，将数据喂给video标签，灵活性更高。
• HTTP转码流：用FFmpeg将处理后的UDP流转成HTTP直播流（如WebM分段流），前端直接通过video标签的HTTP URL播放，适合对延迟要求不高的场景。

3. 非HLS/DASH的资源与示例参考 #

WebSocket + MSE 极简示例 #

后端（Node.js）：

const dgram = require('dgram');
const WebSocket = require('ws');
const udpServer = dgram.createSocket('udp4');
const wss = new WebSocket.Server({ port: 8081 });

// 监听UDP端口接收MPEG-TS流
udpServer.bind(1234, '0.0.0.0');
udpServer.on('message', (msg) => {
  // 此处插入你的帧处理逻辑（如用OpenCV修改帧）
  // 处理完成后转发给所有WebSocket客户端
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(msg);
    }
  });
});

前端：

const video = document.getElementById('live-video');
const ws = new WebSocket('ws://localhost:8081');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp2t');
  ws.addEventListener('message', (event) => {
    if (!sourceBuffer.updating) {
      sourceBuffer.appendBuffer(event.data);
    }
  });
});

FFmpeg转WebRTC示例 #

在处理服务器上执行命令，将UDP流转为WebRTC服务：

ffmpeg -i udp://0.0.0.0:1234 -c:v libx264 -preset ultrafast -c:a aac -f webrtc -listen 1 http://0.0.0.0:8080/stream

前端通过WebRTC客户端连接该地址即可播放。

内容的提问来源于stack exchange，提问作者k.nyc