时间戳

首页 > 解决方案 > TypeError：无法在“SourceBuffer”上执行“appendBuffer”：找不到与提供的签名匹配的函数

javascript - TypeError：无法在“SourceBuffer”上执行“appendBuffer”：找不到与提供的签名匹配的函数

问题描述

编辑：为了帮助说明我不断遇到的错误，我创建了我所看到的问题的 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并打开缓冲区，但我无法理解的是为什么我无法附加到缓冲区？我收到的错误是：

TypeError：无法在“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() {
    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()中也只列出了原型部分，请参见此处：https ://drive.google.com/open?id=1vOU4oM-XoKe71DofQuLU2THxMdgiown_但代码并没有抱怨他们的附加缓冲区（）。当我控制台记录我的缓冲区时，它看起来像他们的https://drive.google.com/open?id=1T4Ix-y124NgQJ9xu97xv4U2yFTn2k7vF。我错过了什么？

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

标签： javascriptmedia-source

解决方案

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

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

  1. 把你的事件处理程序变成一个async函数
  2. 使用Blob.arrayBuffer()将数据 blob 转换为JavaScriptArrayBuffer

改变这个：

  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. 由于它跟不上输入流，您将看到类似于以下错误的内容：

无法在“SourceBuffer”上执行“appendBuffer”：此 SourceBuffer 仍在处理“appendBuffer”或“删除”操作

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

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

相关阅读

推荐阅读