如何在浏览器中使用自定义但部分支持的 MimeType 播放数据流？

Posted 2023-02-22

【中文标题】如何在浏览器中使用自定义但部分支持的 MimeType 播放数据流？

【英文标题】：How do I play a stream of data with custom but partially supported MimeType in browser?

【发布时间】：2020-12-01 00:30:39

【问题描述】：

从软件工程中引入这一点。被告知这个问题可能更适合***。

我正在向另一个对等方发送视频数据流，并希望重新组合该数据并使该流成为视频元素的源。我使用 npm 包 RecordRTC 记录数据，每 1 秒获取一个 Blob 数据。

我通过 WebRTC 数据通道发送它，最初尝试使用 MediaSource API 重新组合数据，但事实证明 MediaSource 不支持 mimetype 为 video/webm;codecs=vp8,pcm 的数据。关于如何重新组装这个流有什么想法吗？是否可以修改 MediaSource API？

我对这个数据流的唯一要求是音频用 pcm 编码，但如果您有任何想法或问题，请告诉我！

附注我认为基于意见的质疑不适合 ***，所以这就是我首先在那里发布的原因。

【问题讨论】：

您为什么不简单地将原始 MediaStream 传递给您的 webRTC 服务器？

@Kaiido 因为 webrtc 不支持该 mimetype。我特别需要 wav 作为音频编解码器，但 pcm 可以工作，因为唯一的区别是幻数。这个想法是通过 RTC 数据通道绕过它并在另一端重新组装数据，以便能够使用自定义 mimetype

那么，你认为你为什么需要PCM？如果要由其他对等方读取，则让原始 MediaStream 是您能做的最好的事情。如果您希望获得更好的质量，因为“PCM 是无损的”，那么请知道 RecordRTC 生成的数据无论如何都来自该流（可能以 ogg 编码），因此这只会生成更大版本的 相同 数据。

我需要一个无损音频编解码器来满足我的应用程序特定需求。 WebRTC 的默认音频编解码器是 Opus，但由于它是有损的，因此不能用于我的应用程序需求。 SDP munging 是一个可行的选择，但据我了解，WebRTC 也不支持 pcm。

我一直在想这个 - 原始媒体流是从 getusermedia 之类的东西返回的，它是什么格式的？我特别需要无损音频，因为我将这些数据输入到诸如 logic pro、fla studio、garageband 等 DAW 中以进行现场混音和录音。 RecordRTC 为我提供了采样率、每秒音频位数等所需的选项。

【参考方案1】：

处理此问题的最简单方法是通过服务器代理流，您可以将流作为 HTTP 响应返回。然后，你可以做一些简单的事情：

<video src="https://example.com/your-stream"></video>

当然，缺点是现在您必须承担带宽成本，因为连接不再是点对点的。

如果您可以使用 Service Worker 并让它从您从对等方接收到的数据返回伪造的 HTTP 响应，那就太好了。不幸的是，浏览器开发人员通过在用户重新加载页面或使用隐私模式时禁用它来削弱 Service Worker 标准。 （似乎他们认为 Service Worker 只对缓存有用。）

另外，关于 WebRTC 的注释......你正在做的很好。您不想使用普通的 WebRTC 媒体流，因为它们不仅是有损压缩的，而且会丢弃片段以优先考虑保持实时而不是质量。这听起来不像你想要的。

我一直在想——原始媒体流是从 getusermedia 之类的东西返回的，它是什么格式的？

MediaStream 是原始数据，但不能直接访问。如果将 MediaStream 附加到 Web 音频 API 图形，则捕获的声卡的任何格式都将转换为 32 位浮点 PCM。此时，您可以使用脚本处理器节点来捕获原始 PCM 数据。

【讨论】：

如果我走 http 代理的路线，有没有办法追加一个新的 ArrayBuffer？对于关于服务人员的第二部分，应该没问题，因为无论用户是否刷新页面，视频聊天都会丢失。至于 getusermedia 并将其附加到 WebAudio 图有一种方法可以为收集的整个视频流做到这一点，并且只修改音频设置，因为如果它只是音频，我不必拆分音频和视频轨道和然后把它们放在一起？延迟是我目前在项目中最大的恐惧，我正在尝试尽可能减少它

@Malcolm 您的服务器端只会不断地从发送客户端接收数据（可能是通过 Web Socket），并且会继续通过 HTTP 向接收端发送数据。

@Malcolm Service Worker 仍然是一个问题......如，如果用户刷新页面，该功能将被禁用，因为假设 Service Worker 仅用于缓存，而刷新是重新加载而不缓存。

@Malcolm 是的，没有好的方法来分割和重新加入音频/视频。你可以，而且你可以再次用它制作一个新的 MediaStream，但是同步可能是个问题，因为固有的时间戳现在已经消失了。

@Malcolm RE：延迟，你必须选择你想要的......质量或低延迟。你真的不能两者兼得。 :-) 您要么必须丢弃样本以保持实时性，要么保留所有样本，缓冲相当数量，并在流式传输时保持缓冲区满。您必须选择最佳平衡点。如果延迟是一个问题，您需要直接使用 WebRTC，并且您需要为 Opus 流选择高比特率。