小编Fif*_*oud的帖子

编辑：为了帮助说明我不断收到的错误，我创建了我所看到的问题的 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() …