通过套接字 IO 从屏幕发送数据？答案

【问题标题】：Sending data from Screen over Socket IO?通过套接字 IO 从屏幕发送数据？
【发布时间】：2021-02-18 05:10:25
【问题描述】：

我一直在谷歌上搜索，但找不到明确的答案。

我正在制作一个记录标签的 chrome 扩展。这个想法是使用 Websockets（特别是 Socket.io）将 getUserMedia 流式传输到后端，其中后端写入文件直到设置特定条件（后端中的值）。

问题是，我不知道如何使用特定 ID 调用后端，以及如何正确写入文件而不损坏文件？

【问题讨论】：

标签： node.js websocket socket.io getusermedia web-mediarecorder

【解决方案1】：

您正在通过 websocket 将 MediaRecorder 的输出发送到您的后端。

大概您是在 MediaRecorder 的 ondataavailable 处理程序中执行此操作的。

将这些数据填充到 websocket 中非常容易：

function ondataavailable ( event ) {
  event.data.arrayBuffer().then ( buf => {socket.emit('media', buf) })
}

在后端，您必须将收到的所有数据按照接收顺序连接到一个媒体文件。该媒体文件可能具有 video/webm MIME 类型；如果你给它.webm 文件扩展名，大多数媒体播放器都会正确处理它。请注意，如果媒体文件未按顺序包含所有 Blob，则该媒体文件将毫无用处。前几个 Blob 包含理解流所需的元数据。这很容易通过将每个接收到的数据项附加到文件中来实现。

服务器端可以使用socket.id属性组成文件名；这为您提供了每个套接字连接的唯一文件。像这种低劣、性能不佳的非调试非生产就绪代码会做到这一点。

io.on("connection", (socket) => {
  if (!socket.filename) 
     socket.filename = path.join(__dirname, 'media', socket.id + '.webm))

  socket.on('filename', (name) => {
     socket.filename = path.join(__dirname, 'media', name + '.webm))
  })
  socket.on('media', (buf) => {
    fs.appendFile(buf, filename)
  })
})

在客户端，您可以使用此设置文件名。

socket.emit('filename', 'myFavoriteScreencast')

【讨论】：

嗨！这实际上帮助了我很多！回答。最后一件事。似乎没有发送最终的 blob 数据（在我的主要浏览器 Chrome 上测试）。后端脚本：pastebin.com/T5HenViU - 前端脚本：pastebin.com/YkH9RhM4 当我播放视频时，它不显示视频有多长，我无法跳过。似乎最终的 blob 没有被发送。怎么会？
从 MediaRecorder 获得的文件没有显示其长度的元数据。那是因为它们是连续的流——它们的长度何时开始是未知的。如果你能玩它们，它们是正确的。您可以使用一个名为 mkvToolNix 的软件包来查看它们的结构。
很有趣，因为使用 Chrome，我倾向于得到有问题的文件，但我认为 Firefox 可以很好地处理它们（甚至显示长度）。 mediaRecorder.stop() 不应该发送最终长度和任何其他数据吗？