JavaScript XMLHttpRequest.responseType as "arraybuffer"——如何获取当前数组缓冲区 block

Question

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

重点是:

如何从客户端 JavaScript 获取视频 block (可以发送到服务器)？

使用这段代码，例如:

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 responseTypes 在下载完成之前不允许访问数据 block 。

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

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