5

I am recording audio from a user's microphone throughout my web app (i.e. the whole time they use it and am streaming it to a backend). I call navigator.mediaDevices.getUserMedia() in a component, say at root level.

I also have a MediaRecorder to record part of the audio from the stream when I click a button (change state from inactive to recording so I can later play back what they said). The issue is I need to pass the MediaStream to the MediaRecorder without passing it down a bunch of components. MediaStream is non-serializable and so against Redux recommmendations I shouldn't store it there. Is the easiest way to store it in the window object and use it throughout my project?

Seems a bit dirty and there has got to be a better way of doing it. I could store it in redux but I assume I am going to wish I had time travel debugging at some point. Should I be using a middleware or something to hold my MediaStream?

<AudioRecorder>
   <Timer />
   <OtherPage>
       <several levels down>
           <RecordButton />
       </several levels down>
   </OtherPage
</AudioRecorder>

Just wondering what the best approach here is? Is going with the React Context API worth it? I might as well just store it in redux at that point?

TLDR; how should I access a media stream globally in my React application

Jeremy
  • 51
  • 1
  • 2
    just my $0.02 - React context seems a good choice here since the mediastream needs to be accessed down the tree and doesn't really change. I assume you cannot do time travel debugging with mediastream anyway and it doesn't change so putting it in Redux doesn't bring you any extra benefits. Context or just a global will both work, but context can avoid it being accessed "by accident" too easily. – sidecus Jul 01 '20 at 18:28
  • 1
    @sidecus Oh I assumed time travel debugging wouldn't work for all the other objects in my store if one happened to be non-serializable ‍♂️. I should've mentioned that I need to access the MediaStream in some non react components. So I guess it should be fine to store it in redux after all. Thanks :) – Jeremy Jul 01 '20 at 18:58

0 Answers0