JavaScript XMLHttpRequest.responseType as "arraybuffer" -- 如何获取当前的数组缓冲区块

Question

我正在尝试将 a 从客户端流式传输到服务器端，稍后将视频流式传输回另一个客户端。

重点是：

如何从客户端 JavaScript 获取视频块（可以发送到服务器）？

使用此代码，例如：

var x = new XMLHttpRequest();
        var url = location.href;
        x.onreadystatechange = function(){
            if(x.readyState == 200) {
                console.log("done");
            } else {
                console.log("chunk",x.response); //this is null until readyState is 200 anyway
            }

        }
        x.onprogress = e => {
            console.log("EE",e.target.response); //also null if resposneType is arraybuffer
        };
        x.responseType="arraybuffer";
        x.open("GET","http://localhost:88/videoplayback.mp4",true);
        x.send("");

当我尝试在完成加载之前打印响应（按块获取它）时，它只是 null； arraybuffer 仅在加载完成后作为响应返回。

如果我取出 responsetype 并将其保留为纯文本，那么即使在完成之前，每个 readystatechange 的某些 unicode 字符确实会打印到屏幕上，只有 arraybuffer 不会。

那么：这是将视频从客户端流式传输到服务器的最佳方式吗，如果是这样，我该怎么做？ 如果没有，什么是更好的方法？

Answer 1

实际上，在下载完成之前， arraybuffer或blob响应类型不允许访问数据块。

现在，有一些方法......例如在最新的浏览器中，您可以从 fetch API启动ReadableStream ，或者从 Firefox 您可以将responseType设置为"moz-chunked-buffer" ，但这根本不是您在这里需要的.

您所描述的正是WebRTC 的用途。 所以最好的方法是运行一个 STUN/TURN 服务器，并使用 MediaStream API 通过它流式传输你的媒体。