缓冲区数据在发送到客户端后更改

Question

我正试图通过发送H264帧将视频从后端实时流式传输到客户端。我试着用Socket.io发送帧，并在响应流中返回它们，但在这两种情况下，发送时数据似乎都发生了变化，我不知道为什么。

这是视频中一个帧的缓冲区示例，由我的后端记录：

<Buffer 00 00 00 01 41 fc 01 3c 68 df 38 79 7f a0 10 26 e7 af f4 02 04 dc f5 fe 80 40 9b 9e bf d0 08 13 73 d7 fa 01 02 6e 7a ff 40 20 4d cf 5f e8 04 09 b9 eb ... 78 more bytes>

但是客户端看起来像这个

[0, 0, 0, 1, 65, 252, 1, 60, 104, 223, 56, 121, 127, 160, 16, 38, 231, 175, …]

前四个值总是正确的，但在此之后，缓冲器应该具有值41而不是65，依此类推…

缓冲区本身是作为字符串对象的一部分发送的，看起来像这个

res.write(
JSON.stringify({
type: "frame",
pts: <BigInt>,
keyframe: <Boolean>
data: <Buffer>
})
)

然后在我的客户端上，我使用将其转换回

fetch('url').then((res) => {
if (!res.ok) throw res;
if (res.status == 204) return;
res.body.pipeThrough(new TextDecoderStream()) //buffer to utf-8
.pipeThrough(new TransformStream({
transform(chunk, controller) {
const lines = chunk.replace(/}{/g, "};{").split(";"); //split string to json's
for (const line of lines) {
controller.enqueue(line);
}  
},
}))
.pipeThrough(new TransformStream({ //utf-8 to json
transform(line, controller) {
if (line) {
controller.enqueue(JSON.parse(line, reviver))  //reviver for pts/BigInt
}
}
}))
.pipeThrough(new TransformStream({
transform(packet, controller) {
if (packet.type != "config") {
packet.data = buffer.Buffer.from(packet.data) //object to Buffer ("buffer" from browserify )
}
}
}))
.pipeTo(decoder.writable) //json to video
)

这是转换问题还是正常行为？

这是我目前唯一能想到的问题，因为我的解码器没有显示错误或视频/帧。

Answer 1

这里发生的情况是，缓冲区管理的数据设置在base16或十六进制数字上，另一方面，JSON.stringify总是以十进制格式(base10(返回数据。如果你想让前端接收到相同的数据，你需要在stringify函数上使用replacer参数。