react-media-recorder icon indicating copy to clipboard operation
react-media-recorder copied to clipboard

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

Open R4DIC4L opened this issue 1 year ago • 5 comments
trafficstars

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.

R4DIC4L avatar May 20 '24 14:05 R4DIC4L

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

royalsanga24 avatar Jun 14 '24 12:06 royalsanga24

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.

R4DIC4L avatar Jun 14 '24 13:06 R4DIC4L

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.

royalsanga24 avatar Jun 15 '24 05:06 royalsanga24

@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.

R4DIC4L avatar Jun 15 '24 17:06 R4DIC4L

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

royalsanga24 avatar Jun 17 '24 16:06 royalsanga24

Thanks @R4DIC4L for the contribution. Squashed your changes and pushed V1.7.0 to npm.

Apologize for the delay, I had left the React ecosystem 2-3 years back, and now I'm working full time on more of a Systems Engineering / Cloud Solutions apps.

I'm very much glad to see this tiny thing is still helping few people with their tasks, and I'll try to revive this as much as possible.

DeltaCircuit avatar Aug 08 '24 04:08 DeltaCircuit