使用 redux 构建 React 应用程序时在哪里存储 WebRTC 流

Posted 2023-02-22

【中文标题】使用 redux 构建 React 应用程序时在哪里存储 WebRTC 流

【英文标题】：Where to store WebRTC streams when building React app with redux

【发布时间】：2016-03-12 07:18:21

【问题描述】：

我正在构建一个 React.js 应用程序，它与 WebRTC api 交互以进行音频/视频调用。成功建立呼叫后，会在 RTCPeerConnection 实例上触发“onaddstream”事件，该实例包含我作为开发人员应该连接到视频元素以向用户显示远程视频的流。

我遇到的问题是了解将流从事件获取到 React 组件以进行渲染的最佳方式。我只需将流转储到我的 redux 状态即可成功运行，但 in this other answer，redux 的创建者 Dan Abramov 提到了这一点：

[...] 不要在状态内使用类。它们不能按原样序列化。 [...] 只需使用普通对象和数组。

这让我想知道，如果我不应该将这些流置于 redux 状态，是否有更好的方法来响应“onaddstream”事件并让 React 组件更新而不将流置于 redux 状态？

【问题讨论】：

类似地——如果不是在 Redux 存储中，你会将不可序列化的状态对象放在应用程序结构的哪个位置，例如 RTCPeerConnection 或 MediaStream 的实例？

【参考方案1】：

根据我的经验，诸如套接字连接之类的东西，以及在您的情况下，webrtc 东西，非常适合生活在为您的应用程序手写的自己的中间件中。您可以在此处连接所有连接管理，触发操作以与 UI 通信并侦听来自此处的操作。

另一种解决方案是查看redux saga，这似乎是处理套接字和 webrtc 等复杂效果的一个不错的选择。

【讨论】：

您能否详细说明使用redux-saga 会有什么帮助？我正在寻找解决类似问题并在那里发布问题：github.com/yelouafi/redux-saga/issues/635

@Tauren 这里的主要思想是在 saga 的代码中设置 socket/webRTC 连接，并通过操作推送更新，以便稍后使用 reducer 处理，最后是组件。至于你的问题，我对视频流和 webRTC 没有任何经验，所以不能说什么。

仅供参考，如果您更喜欢可观察的方法而不是生成器，redux-observable 将是 saga 的一个不错的替代方案。 redux-observable.js.org

@JacopKane 我最终使用了redux-saga，但我现在正在认真考虑使用redux-observable。现在我已经研究了一段时间，我认为利用 RxJS 和 observables 可以简化事情。

@Tauren 我对这两种方法都进行了几天的试验。两者都有一些学习曲线，对于传奇来说，它是生成器。对于 observable，它显然是 Rx。 Rx 一开始有点吓人，但比开始变得更有趣，你可以认为它是 observables 的下划线。