React - MediaSource 视频未呈现

Question

您好，我们正在开展群组视频聊天，之前我们使用的是 webRTC，但它对我们不起作用。我们正在尝试通过服务器实现相同的目标。我们正在使用 MediaRecorder 来捕获我们的流并将其作为 base64 传递给服务器并将数据块发送回客户端。

但是，当我们使用 MediaSource 将块附加到视频元素时，视频不会呈现。

我们还有什么其他想法可以实现吗？

这是我们的代码示例。

  useEffect(() => {
    // Build new Hub Connection, url is currently hard coded.
    hubConnect = new HubConnectionBuilder()
      .withUrl(`/api/hubs/communication/test`, {
        accessTokenFactory: () => appState.jwtToken.replace("Bearer ", ""),
      })
      .build();

    hubConnect.start().then(() => {
      if (hubConnect) {
        var blobArray: any[] = [];

        let video: any = document.getElementById("video");

        if (!video) {
          return;
        }
        let mediaSource = new MediaSource();

        video.src = window.URL.createObjectURL(mediaSource);

        var sourceBuffer;

        const processBuffer = () => {
          try {
            if (mediaSource.readyState === "open" && sourceBuffer) {
              const blob = blobArray.shift();

              if (blob) {
                blob.arrayBuffer().then((a) => {
                  sourceBuffer.appendBuffer(a);
                });
              }
            }
          } catch (error) {}
        };

        mediaSource.addEventListener("sourceopen", () => {
          sourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs=vp9");
        });

        mediaSource.addEventListener("updateend", () => {
          processBuffer();
        });

        hubConnect.on("newStream", (incomingBase64: string) => {
          blobArray.push(b64toBlob(incomingBase64));
          processBuffer();

   
          console.log(blobArray);
        });
      }
    });
  }, []);

  function b64toBlob(dataURI) {
    var byteString = atob(dataURI.split(",")[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);

    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: "video/webm; codecs=vp9" });
  }