javascript - Where to store WebRTC streams when building React app with redux - Stack Overflow

admin管理员组

文章数量:1387312

I'm building a React.js application that interacts with the WebRTC apis to do audio/video calling. When a call is successfully established, an 'onaddstream' event is fired on the RTCPeerConnection instance, which contains the stream that I as a developer am supposed to connect to a video element to display the remote video to the user.

Problem I'm having is understanding the best way to get the stream from the event to the React ponent for rendering. I have it successfully working by just dumping the stream into my redux state, but in this other answer, the creator of redux Dan Abramov mentioned this:

[...] don’t use classes inside the state. They are not serializable as is. [...] Just use plain objects and arrays.

Which leaves me wondering, if I shouldn't put these streams in the redux state, is there a better way to react to the 'onaddstream' event and get the React ponent to update without putting the stream in the redux state?

I'm building a React.js application that interacts with the WebRTC apis to do audio/video calling. When a call is successfully established, an 'onaddstream' event is fired on the RTCPeerConnection instance, which contains the stream that I as a developer am supposed to connect to a video element to display the remote video to the user.

Problem I'm having is understanding the best way to get the stream from the event to the React ponent for rendering. I have it successfully working by just dumping the stream into my redux state, but in this other answer, the creator of redux Dan Abramov mentioned this:

[...] don’t use classes inside the state. They are not serializable as is. [...] Just use plain objects and arrays.

Which leaves me wondering, if I shouldn't put these streams in the redux state, is there a better way to react to the 'onaddstream' event and get the React ponent to update without putting the stream in the redux state?

• javascript
• html
• reactjs
• webrtc
• redux

Share Improve this question Follow edited May 23, 2017 at 12:31 CommunityBot 111 silver badge asked Dec 7, 2015 at 15:55 ChadChad 2,28911 gold badge2020 silver badges1818 bronze badges 1

• 6 Similarly - where in the app structure do you put non-serializable state objects, like instances of RTCPeerConnection or MediaStream, if not in a Redux store? – ruffrey Commented Dec 7, 2015 at 16:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In my experience things like socket connections and, as in your case, webrtc things, are well-suited for living inside their own middlewares hand-written for your application. You can wire up all connection management here, fire actions to municate with UI and listen for actions ing from here.

Another solution would be to look on redux saga, which seems to be quite a nice option for handling plex effects as sockets and webrtc.

本文标签： javascriptWhere to store WebRTC streams when building React app with reduxStack Overflow