javascript - Changes to localParticipant tracks do not propagate to remote participants when disabling webcam or microphone

Question

I have built a program to do video chat with the Twilio Programmable Video API. I can connect localling and remotely to a room and see/hear all participants.

I am storing the room object that Twilio's connect function returns in the redux state. I have implemented buttons which toggle webcam and microphone and they work - that is until I unmount the container from a component.

If a person clicks on some navigation on the site that takes them away from the messaging section, the video call unmounts the component holding the video call container and mounts a different small component in the bottom right of the screen. Video and audio continue to work properly after this switch (both users can see and hear each other), but the issue is that the toggle microphone and webcam buttons no longer work properly. If I click the disable webcam button, I see my local video turn off locally, but the remote participant can still see my webcam. If I navigate back to the messaging section, I see the large video feeds again and the buttons still don't work.

Both components are rendering using the same room object from the redux state. Toggle functions are dispatched and reduced in the redux state as well. I can confirm that when I click the buttons, the reducer is getting called, it's just the track information isn't getting propagated. I have tried rendering them both at the same time, and when I do this the buttons function on both the large component and the small one, but if I navigate away from the messaging section (thus unmounting the large one), the button breaks again - if I close the small component, the buttons on the big one stop working as well.

Is there some inherent thing I'm missing that would cause the disable()/enable() functions of a track to stop working if it's removed from a component? There are no errors caught, just a seeming disconnect on contacting the remote participants about changes to the track.

标签： javascriptreactjsreact-reduxtwiliotwilio-php

Answer 1

我发现了问题 - 在参与者的useEffect声明中，它正在返回调用removeAllListeners()。删除它修复了它。