相关疑难解决方法(0)

我真的很难理解使用node.js将ffmpeg的实时输出流式传输到HTML5客户端的最佳方法,因为有很多变量在起作用,我在这个领域没有很多经验,花了很多时间尝试不同的组合.

我的用例是:

1)IP视频摄像机RTSP H.264流由FFMPEG拾取并使用节点中的以下FFMPEG设置重新转换为mp4容器,输出到STDOUT.这仅在初始客户端连接上运行,因此部分内容请求不会再次尝试生成FFMPEG.

liveFFMPEG = child_process.spawn("ffmpeg", [
                "-i", "rtsp://admin:12345@192.168.1.234:554" , "-vcodec", "copy", "-f",
                "mp4", "-reset_timestamps", "1", "-movflags", "frag_keyframe+empty_moov", 
                "-"   // output to stdout
                ],  {detached: false});

2)我使用节点http服务器捕获STDOUT并在客户端请求时将其流回客户端.当客户端第一次连接时,我生成上面的FFMPEG命令行,然后将STDOUT流传递给HTTP响应.

liveFFMPEG.stdout.pipe(resp);

我还使用了流事件将FFMPEG数据写入HTTP响应,但没有任何区别

xliveFFMPEG.stdout.on("data",function(data) {
        resp.write(data);
}

我使用以下HTTP标头(在流式传输预先录制的文件时也使用并工作)

var total = 999999999         // fake a large file
var partialstart = 0
var partialend = total - 1

if (range !== undefined) {
    var parts = range.replace(/bytes=/, "").split("-"); 
    var partialstart = parts[0]; 
    var partialend = parts[1];
} 

var start = parseInt(partialstart, 10); 
var end …

编辑：为了帮助说明我不断收到的错误，我创建了我所看到的问题的 CodePen。打开控制台，您将看到错误。[ https://codepen.io/FifthCloud/pen/eYpqJLN ]

我想使用 React/Node 在家里设计自己的流媒体摄像头服务。到目前为止，我已经在客户端/服务器方法方面取得了很大进展。服务器是一个带有摄像头的树莓派。使用 FFMpeg 我可以看到其中的所有视频，使用 websockets 我可以成功发送数据（我的意思是我看到发送到客户端的数据将了解为什么它不会渲染）。

我遇到的问题是为什么我不能将数据附加到缓冲区。首先，我使用这个有关媒体源的演示作为我应该做什么的指南和示例。http://nickdesaulniers.github.io/netfix/demo/bufferAll.html我从我关于媒体源的研究中得到了这个链接： https: //developer.mozilla.org/en-US/docs/Web/API/MediaSource /readyState 还想提一下，我从这篇文章中获得了很多灵感，并且由于这个答案HTML5 Video: Streaming Video with Blob URLs取得了很大的进展

考虑到这一点，我可以成功创建MediaSource并打开缓冲区，但我不明白的是为什么我无法附加到缓冲区？我收到的错误是这样的：

类型错误：无法在“SourceBuffer”上执行“appendBuffer”：找不到与提供的签名匹配的函数。

客户端代码如下

class ProductDetail extends React.Component {
  constructor(props) {
    super(props);
    this.handleData = this.handleData.bind(this);
    this.handleOpen = this.handleOpen.bind(this);
    this.appendToSourceBuffer = this.appendToSourceBuffer.bind(this);
    this.mediaStreaming = new MediaSource();
    this.blobArr = [];
    this.buffer = null;
    this.myRef = React.createRef();

    console.log("buffer initialized");
    console.log("ReadyState [Initialized]: " + this.mediaStreaming.readyState);
    this.state = {
      msg: "",
      stream: "",
      streaming: URL.createObjectURL(this.mediaStreaming),
    };
  }

  componentDidMount() …

我正在尝试制作自己的广播架构。在这个系统中，我使用 Websocket 来传输数据，因为我知道它适合连续数据传输。

服务器只需接收并发送给该会话中连接的所有客户端。

当客户端连接时，它通过 Websocket 接收连续 5 秒的视频块作为 blob 数组。

我的主要问题是在客户端如何将视频 blob 数组设置html video为每 5 秒动态源一次，以便它可以播放每 5 秒的视频数据块。

我在主机和客户端使用 Glassfish 4.0 作为服务器和 Javscript。浏览器：Chrome 源代码：

服务器广播.java

    package websocket1;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.util.Collections;
import java.util.HashSet;
import java.util.Iterator;
import java.util.Set;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint(value = "/liveStreamMulticast")
public class LiveStreamMultiCast {
    private static final Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>()); …