search

miroslavpejic85 / mirotalk

🚀 WebRTC - P2P - Simple, Secure, Fast Real-Time Video Conferences Up to 4k and 60fps, compatible with all browsers and platforms.
https://p2p.mirotalk.com
GNU Affero General Public License v3.0
2.6k stars 502 forks source link

Allow Picture-in-Picture on mobile devices #203

Closed chengyuhui closed 4 months ago

chengyuhui commented 4 months ago

Feature request

Currently the button to enable PiP is hidden on mobile devices. Camera streams are paused when the browser is in the background on mobile devices, unless a PiP window is active.

As a user, I would like to continue my stream while doing other tasks on my phone or tablet (for example, replying to a message). This can be done by enabling PiP for any participant, and switching to another application.

https://github.com/miroslavpejic85/mirotalk/blob/dd269805c3703060532b9d267cc377168f520e4f/public/js/client.js#L134-L137

Pros

It works fine, why not?

Additional context

Tested to be working on latest mobile Chrome (simply removing !isMobileDevice works).

miroslavpejic85 commented 4 months ago

Hi @chengyuhui, Hope you're doing well! 😊 Would you mind sending a pull request? Thanks a bunch!

miroslavpejic85 commented 4 months ago

Good, I just fix a typo.

document.pictureInPictureEnabled already returns a boolean, then using double negation (!!) is indeed unnecessary. In such a case, you can directly use the boolean value returned by document.pictureInPictureEnabled without any additional conversions.

Thank you!

miroslavpejic85 commented 4 months ago

Tested to be working on latest mobile Chrome (simply removing !isMobileDevice works).

But I'm not able to make it work on real mobile device in Chrome, and other browsers as well :)

I recall now that Document PIP and Video PIP doesn't work on real mobile devices.

That's why I implemented the filter !isMobileDevice

chengyuhui commented 4 months ago

Just tested again on my Samsung S23 with Chrome 120.0.6099.144, video PiP worked fine. Note that Firefox does not support these APIs at all.

Document PiP isn't even available on mobile devices, if memory serves me right.

miroslavpejic85 commented 4 months ago

You are right in this device works and maybe also in some other, while in some not, although document.pictureInPictureEnabled return true, in the browser logs got:

Failed to enter Picture-in-Picture mode: NotSupportedError: The video element does not support the Picture-in-Picture mode.

Let me thinking, I will push asap.

miroslavpejic85 commented 4 months ago

Now you will be able to use PIP video on Mobile devices. In case your device doesn't support this feature for some reason, a helpful popup message will appear, and the button will be hidden.