DeltaCircuit / react-media-recorder

react-media-recorder is a react component with render prop that can be used to record audio/video streams using MediaRecorder API.
https://npmjs.com/react-media-recorder
MIT License
469 stars 123 forks source link

Current Chrome tab is not included in the list of tabs to screen record #137

Open R4DIC4L opened 2 months ago

R4DIC4L commented 2 months ago

Hello! 👋

I found that the current implementation does not include the current tab in Chrome for the video screen recording.

It seems that, in order for this to work, the navigator.mediaDevices.getDisplayMedia needs to set the selfBrowserSurface to 'include' for the current tab. I had to patch the package using patch-package as below: Before: window.navigator.mediaDevices.getDisplayMedia({ video: video || true, }); After: window.navigator.mediaDevices.getDisplayMedia({ video: video || true, selfBrowserSurface:'include' });

Is there any way that you can modify the ReactMediaRecorderHookProps to let the user define the value for selfBrowserSurface ( 'include'/ 'exclude'/undefined as described in MDN) and then use it when getting the media devices?

I can provide a PR request for the changes if you want.

royalsanga24 commented 1 month ago

Hi, Is this issue resolved? I am facing the same problem.

R4DIC4L commented 1 month ago

Hi, @royalsanga24,

I created a PR, but it is not merged, not sure who can do this (any maintainers here?).

We patched this issue in production for my fix with patch-package.

royalsanga24 commented 1 month ago

Hi @R4DIC4L ,

I saw your commit and ran it locally, it worked for me. Thanks a TON.

Just wanted to know, are you aware on how is it possible capture/record the current tab audio as well? Not from the microphone but the tab audio?

Will help a lot.

R4DIC4L commented 1 month ago

@royalsanga24 did you try sending param audio: true or audio with constraints for the tracks to the use hook?

We don't use audio, but it seems there's a bug in Chrome related to this, as pointed out in this StackOverflow thread. Maybe you can check this Chromium implementation link related to the audio track issue.

royalsanga24 commented 1 month ago

@R4DIC4L thanks for these links. Will definitely check them out. Cheers!