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?
Share Improve this question edited May 23, 2017 at 12:31 CommunityBot 11 silver badge asked Dec 7, 2015 at 15:55 ChadChad 2,2891 gold badge20 silver badges18 bronze badges 1-
6
Similarly - where in the app structure do you put non-serializable state objects, like instances of
RTCPeerConnectionorMediaStream, if not in a Redux store? – ruffrey Commented Dec 7, 2015 at 16:03
1 Answer
Reset to default 6In 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.