switching the audio and video devices while recording is on in reactjs

Question

I am creating a demo application in which user can record a video using ReactJs. I am able get the list of devices, and record the video. I am stuck and couldn't find the solution to let the user switch the camera while recording is on.

as of now this is how i am getting the video and audio Stream

function getStream() {
   const stream  =  navigator.mediaDevices.getUserMedia({audio: {deviceId: 'audioDeviceId'}, video: {deviceId : 'videoDeviceId'})
}

by using above I am able to get the stream for the selected devices when Recording is not started. The problem is when user switched audio or video device while recording.. i get a new Stream every time, so I am losing the previous stream and only the newly generated stream is getting recorded .

I will really appreciate if any one can help me out in handling the scenario where user can switch the devices while the recording is on. or if there is any other approach for switching the devices . Thanks for the help anyway

Answer 1

Did you try and add/remove tracks? I stumbled upon a similar situation. In my scenario, If the user switches to a different video device, I get the new stream and from it, extract the video track. I then remove the older video tracks from the older stream and add this newly gotten track. If this makes sense, I can post my code snippet here.