javascript - 类型错误 : Failed to execute 'appendBuffer' on 'SourceBuffer' : No function was found that matched the signature provided

Question

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

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

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

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

TypeError: Failed to execute 'appendBuffer' on 'SourceBuffer': No function was found that matched the signature provided.

客户端代码如下

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() {
    this.mediaStreaming.addEventListener("sourceopen", () => {
      console.log(
        "ReadyState [Source Open]: " + this.mediaStreaming.readyState
      );
      this.buffer = this.mediaStreaming.addSourceBuffer(
        'video/mp4;codecs="avc1.42E01E"'
      );
      this.buffer.addEventListener("updateend", () => {
        this.mediaStreaming.endOfStream();
        document.getElementById("streaming").play();
        console.log(
          "ReadyState [UpdateEnd]: " + this.mediaStreaming.readyState
        );
      });
    });
  }

  handleData(data) {
    const videoStream = JSON.parse(data);
    if (videoStream.msg === "videoStream") {
      this.blobArr.push(videoStream.chunk.data);
      if (
        this.mediaStreaming.readyState === "open" &&
        this.buffer &&
        this.buffer.updating === false &&
        this.blobArr.length > 0
      ) {
        console.log(
          "ReadyState [AppendBuffer]: " + this.mediaStreaming.readyState
        );
        this.buffer.appendBuffer(this.blobArr.shift()); // Error message shows at this line!
        document.getElementById("streaming").play();
        console.log("Buffer Updating", this.buffer.updating);
      }
    }
  }

  handleOpen() {
    console.log("Status: connected");
  }

  handleClose() {
    console.log("Status: disconnected");
  }

  render() {
    return (
      <div>
        <Websocket
          url="ws://192.168.1.20:5000"
          onMessage={this.handleData}
          onOpen={this.handleOpen}
          onClose={this.handleClose}
          reconnect={true}
          debug={true}
          ref={(Websocket) => {
            this.refWebSocket = Websocket;
          }}
          protocol="stream-protocol"
        />
        <video width="640" height="480" id="streaming" controls autoPlay>
          <source
            ref={this.myRef}
            src={this.state.streaming}
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
      </div>
    );
  }
}

错误来自 handleData当服务器发送下一个流字节数组数据时来自我的 WebSocket 的事件。

正如我提到的示例和我发布的链接中的指南一样，我查看了他们的代码并逐步完成了它。根据他们的说法，附加缓冲区应该可以正常工作，但是即使在他们的代码中 appendbuffer()仅在原型(prototype)部分列出，请参见此处: https://drive.google.com/open?id=1vOU4oM-XoKe71DofQuLU2THxMdgiown_然而代码并没有提示他们的 appendbuffer()。当我控制台记录我的缓冲区时，它看起来像他们的 https://drive.google.com/open?id=1T4Ix-y124NgQJ9xu97xv4U2yFTn2k7vF .我错过了什么？

我觉得答案很明显，但它让我不知道我做错了什么。

Answer 1

我自己正在构建一个类似的项目，使用几个支持 RTSP 的高端 IP 摄像机，今天遇到了同样的错误。首先，请记住，根据 Mozilla 开发人员网络 (MDN) 文档(下面的链接)，此 API 是实验性的。

话虽如此，我似乎已经找到了问题的根本原因，尽管我无论如何都不是 JavaScript 专家。事实证明，您不能直接从 data.data 传递“Blob”对象。在 handleData()进入appendBuffer()方法。相反，您需要将 Blob 转换为 appendBuffer() 支持的数据类型。先方法，再传入。

将您的事件处理程序变成 async功能

使用 Blob.arrayBuffer()将数据 block 转换为 JavaScript ArrayBuffer

改变这个:

  handleData(data) {
    const videoStream = JSON.parse(data);
    if (videoStream.msg === "videoStream") {
      this.blobArr.push(videoStream.chunk.data);
      if (
        this.mediaStreaming.readyState === "open" &&
        this.buffer &&
        this.buffer.updating === false &&
        this.blobArr.length > 0
      ) {
        console.log(
          "ReadyState [AppendBuffer]: " + this.mediaStreaming.readyState
        );
        this.buffer.appendBuffer(this.blobArr.shift()); // Error message shows at this line!
        document.getElementById("streaming").play();
        console.log("Buffer Updating", this.buffer.updating);
      }
    }
  }

进入这个:

  async handleData(event) {
    var buffer = await event.data.arrayBuffer(); // convert the message Blob into an ArrayBuffer
    appendBuffer(buffer);
    document.getElementById("streaming").play();
    console.log("Buffer Updating", this.buffer.updating);
  }

问题是，一旦你这样做了，你就会开始得到一个新的错误，因为有太多的数据被传递到 SourceBuffer 中。 MediaSource 上的对象.由于它跟不上输入流，您将看到类似于以下错误的内容:

Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer is still processing an 'appendBuffer' or 'remove' operation

看起来我们需要“缓冲缓冲区”，这听起来很奇怪。

我还没有解决这个新错误。如果您找到解决方案，我会很乐意提供帮助。

相关阅读

SourceBuffer.appendBuffer() MDN Docs

MessageEvent (from WebSocket.onmessage event handler)

Blob.arrayBuffer() method

Exceeding the Buffering Quota (Google Dev Docs)