Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ios][video_player] pip - picture in picture #60048

Open
p30arena opened this issue Jun 23, 2020 · 47 comments · May be fixed by flutter/packages#3500
Open

[ios][video_player] pip - picture in picture #60048

p30arena opened this issue Jun 23, 2020 · 47 comments · May be fixed by flutter/packages#3500
Labels
a: layout SystemChrome and Framework's Layout Issues c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter p: video_player The Video Player plugin P3 Issues that are less important to the Flutter project package flutter/packages repository. See also p: labels. platform-ios iOS applications specifically team-ios Owned by iOS platform team triaged-ios Triaged by iOS platform team

Comments

@p30arena
Copy link
Contributor

p30arena commented Jun 23, 2020

Use case

I have a customer asking for PIP when the app is playing a video and the user wants multi-tasking.

For Android I had to edit the plugin, and use this line of code:
getActivity().enterPictureInPictureMode();
https://developer.android.com/guide/topics/ui/picture-in-picture#java

But for iOS, it is a different story, iOS does not support PIP in UIWindow or UIView, it is supported only in a Custom Player.
We need a custom view for that.
https://developer.apple.com/documentation/avkit/adopting_picture_in_picture_in_a_custom_player
https://developer.apple.com/documentation/avfoundation/avplayerlayer

The video_player plugin is using Texture to show the video output.

Proposal

I need a way to customize the UIView created by the engine for the texture and add AVPlayerLayer support to it.
Any suggestions on how can I contribute this feature to the plugin?

@aytunch
Copy link

aytunch commented Jun 23, 2020

Sorry if I am pointing the obvious but is there anything wrong with using a Stack with 2 video_players as its children?

@iapicca iapicca added a: layout SystemChrome and Framework's Layout Issues p: first party p: video_player The Video Player plugin c: proposal A detailed proposal for a change to Flutter c: new feature Nothing broken; request for a new capability t: xcode "xcodebuild" on iOS and general Xcode project management labels Jun 24, 2020
@p30arena
Copy link
Contributor Author

@gaaclarke
Copy link
Member

I need a way to customize the UIView created by the engine for the texture and add AVPlayerLayer support to it.
Any suggestions on how can I contribute this feature to the plugin?

You don't need to "customize" the view per-say. Why not just get access to the root view controller (FlutterViewController) and add your own layer to that view, or add another view to it.

Something like:

UIViewController* vc = [[[UIApplication sharedApplication] keyWindow] rootViewController];
MyPipView* pipView = [[MyPipView alloc] init];
[vc.view addSubview:pipView];

@p30arena
Copy link
Contributor Author

Thank you @gaaclarke
I think this doesn't worth a try, PiP is only supported on the iPad.

@StefanLobbenmeier
Copy link

@p30arena please reopen, PiP is supported from iOS 14

@p30arena
Copy link
Contributor Author

@StefanLobbenmeier
https://developer.apple.com/documentation/avkit/avplayerviewcontroller

Adopting Picture in Picture Playback
Use AVPlayerViewController to provide Picture in Picture (PiP) playback on supported iPad models. PiP playback lets users minimize your video player to a small floating window so they can perform other activities in the primary application or even in another application. This brings a new level of multitasking capabilities to the iPad allowing users to continue playback while performing other activities on their devices.

Use AVPlayerViewController to provide Picture in Picture (PiP) playback on supported iPad models.

@StefanLobbenmeier
Copy link

This is the announcement at wwdc: https://youtu.be/GEZhD3J89ZE?t=11m44s . I will check the developer Information for iOS 14 Beta if they also mention it there, but I can confirm on my device (iPhone 7 iOS 14 beta 2) pip works

@p30arena p30arena reopened this Jul 24, 2020
@StefanLobbenmeier
Copy link

StefanLobbenmeier commented Jul 24, 2020

The best I could find in the documentation is https://developer.apple.com/documentation/avkit/adopting_picture_in_picture_in_a_custom_player Which mentions neither iPad nor iPhone, but that’s just a subpage of your page so I think o am not looking at the correct place

@alexmarkley
Copy link

I'm also affected by this. My users will expect to be able to continue playing videos while the app is backgrounded wherever the platform supports it.

@thanhit93
Copy link

Please refer to my github: https://github.com/thanhit93/plugins/tree/master/packages/video_player/video_player
IMG_0047

@StefanLobbenmeier
Copy link

@thanhit93 thanks for sharing - have you also tested it on iPad? I am a bit unsure about the conditions in your source code / if they only work on iPhone or also iPad

@thanhit93
Copy link

Hello @StefanLobbenmeier This plugin I just developed. I only tested on iphone (iOS14), ipad hasn't been tested. I will check on the iPad and fix the error as soon as possible. I also look forward to contributing from anyone to make the plugin even better.

@darshankawar darshankawar added platform-ios iOS applications specifically passed first triage labels Mar 1, 2021
@flymzero
Copy link

flymzero commented Apr 9, 2021

@thanhit93 This looks great. It would be better if it could be made into a plug-in package. Thank you

@anychhoice
Copy link

any updates?

@DesmondFox
Copy link

very useful feature!
Any updates?

@stuartmorgan-g stuartmorgan-g added P3 Issues that are less important to the Flutter project and removed t: xcode "xcodebuild" on iOS and general Xcode project management labels Aug 16, 2021
@AnmolSethi
Copy link

AnmolSethi commented Nov 10, 2021

Please refer to my github: https://github.com/thanhit93/plugins/tree/master/packages/video_player/video_player IMG_0047

@thanhit93 How do I use it in my project?

@vanlooverenkoen
Copy link
Contributor

Yes, it is important to use the setPictureInPictureOverlayRect because iOS needs to draw a native view where it should be shown. Otherwise it is not possible to automatically animate the video_player with the pip

@t0uh33d
Copy link

t0uh33d commented Mar 20, 2023

I was trying everything but could not make it work, so i created an ios project and implemented the pip mode there, it was working perfectly, but the same code wasn't working in Flutter, i was so confused. But i think i got it now, when we attach the AVPictureInPictureController to a native component i guess it draws the required values automatically and hence it was working.

@vanlooverenkoen
Copy link
Contributor

Hmm do you still have the code for that? Maybe it would help me to simplify the code for the pip as well

@vanlooverenkoen
Copy link
Contributor

But from my testing I wasn't able to get it working. But again, I am not an iOS dev so maybe I am missing something. Tonight I will be opening my pull request again :D

@t0uh33d
Copy link

t0uh33d commented Mar 20, 2023

https://github.com/developerinsider/Picture-in-Picture-iOS-14-Demo
I referred this repository, hope it helps you out.

@vanlooverenkoen
Copy link
Contributor

Oeeeef!! Nice! :D thanks alot!

@t0uh33d
Copy link

t0uh33d commented Mar 20, 2023

And also, while the pip is getting enabled automatically now, right after going into the pip mode, the video is getting paused. Whereas in the example project which you have provided, it continues playing, Have you explicitly handled it, or do you think it might have to do something with my code.
PS : I have used Flick Video Player, so i am having doubts if that is causing this behaviour.

@vanlooverenkoen
Copy link
Contributor

It has been a while since I implemented it. I will double check this evening

@t0uh33d
Copy link

t0uh33d commented Mar 20, 2023

Thanks a lot for your help :)
And please don't mind it, i will have a look and try to solve it myself, at least i can do this :P

@krishaajtak
Copy link

@vanlooverenkoen I also want to help. Can you just mention a starting point so I can build for it?

@vanlooverenkoen
Copy link
Contributor

Check out the pull request I made and run the example to start

@flutter-triage-bot flutter-triage-bot bot added the package flutter/packages repository. See also p: labels. label Jul 5, 2023
@Hixie Hixie removed the plugin label Jul 6, 2023
@flutter-triage-bot flutter-triage-bot bot added multiteam-retriage-candidate team-ios Owned by iOS platform team triaged-ios Triaged by iOS platform team labels Jul 8, 2023
@KavyashreeBasavesh
Copy link

KavyashreeBasavesh commented Dec 14, 2023

@vanlooverenkoen @krishaajtak
Hello,
Aplogize for writing over hear. Just wanted to check, if you people can help with the issue we are facing.
We are using a framework of WebRTC to build an video call application. Client is asking us to implement the PIP in iOS.
Is there any solution or code snippet which is helpful for us to implement the same using [AVPlayerViewController] and we are developing using swift language.

@vanlooverenkoen
Copy link
Contributor

You can checkout the PiP branch (pr) it is working for us in production for almost 2 years already

@KavyashreeBasavesh
Copy link

@vanlooverenkoen
Thanks for your response in short time.
https://developer.apple.com/documentation/avkit/adopting_picture_in_picture_for_video_calls
We are looking PIP feature for video calls which is being developed using webRTC.(RTCMTLvideoview). Please let us know, if you have any idea or way to implement this.

@KavyashreeBasavesh
Copy link

Hi @vanlooverenkoen ,
Did you get any chance to check on this? It will be very helpful, if you share your insight.

@vanlooverenkoen
Copy link
Contributor

You can take a look at the PR I have open, that contains the full implementation for PIP using video_player flutter/packages#3500 maybe you can find something there

@Sarandjj
Copy link

Sarandjj commented Jan 1, 2024

I want to use pip mode in video player with play push button in flotation

@harryandroiddev
Copy link

harryandroiddev commented Dec 6, 2024

for alternative on ios use this package https://pub.dev/packages/flutter_to_airplay

@Lazizbek97
Copy link

@vanlooverenkoen Thanks for great contribution.
I have checked out example folder and run it on ios. Facing one issue, that if you move to other screen, (especially, when you back to previous screen), pip is being disposed and removed from screen.

i need a way, so user can switch between screens without removing pip screen. is that possible ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a: layout SystemChrome and Framework's Layout Issues c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter p: video_player The Video Player plugin P3 Issues that are less important to the Flutter project package flutter/packages repository. See also p: labels. platform-ios iOS applications specifically team-ios Owned by iOS platform team triaged-ios Triaged by iOS platform team
Projects
None yet
Development

Successfully merging a pull request may close this issue.