Bug 134251

Summary: [iOS] Calling drawImage on a video element causes the controls to appear fullscreen
Product: WebKit Reporter: Ashley Gullen <ashley>
Component: CanvasAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WONTFIX    
Severity: Normal CC: achristensen, ahmad.saleem792, ap, bfulgham, chernyshev87, dbates, dino, doyer.guyllaume, dstrokis, eric.carlson, hi, jeremyj-wk, jer.noble, mail, moo_lj89, riccardo.magliocchetti, rniwa, thomas.hansen, tomerlahav, webkit-bug-importer, youssefdevelops, y_soliman
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: iPhone / iPad   
OS: Other   
URL: http://www.scirra.com/labs/bugs/canvas2dvideo/

Description Ashley Gullen 2014-06-24 08:58:13 PDT
Possibly related to: https://bugs.webkit.org/show_bug.cgi?id=133511 (iOS 8 WebGL cannot pass video to texImage2d)

On iOS 8 beta 2, passing a video to drawImage() causes fullscreen video playback controls to appear, and the screen goes black. However the audio from the video can be heard. The video is not added to the DOM, it is simply created in Javascript, played on the first touch, and passed to a canvas2d drawImage() regularly.

As noted in the WebGL bug, in this use case the fullscreen playback controls are unwanted. If the video is closed, it appears it did render to the canvas2d underneath but this could not be seen, and playback is then paused so it does not continue playing within the canvas2d context.

It works correctly in Chrome for Android, and desktop Chrome, IE11 and Firefox.

Observed result:
Blank screen with fullscreen video playback controls

Expected result:
Video playback within the canvas with no playback controls, which is how Chrome for Android works.
Comment 1 Alex Christensen 2014-06-24 09:41:10 PDT
This works as expected on iPad, and it draws as expected on iPhone except the fullscreen controls cover everything.  This is not my domain.
Comment 2 Radar WebKit Bug Importer 2014-06-24 10:37:26 PDT
<rdar://problem/17437530>
Comment 3 Radar WebKit Bug Importer 2014-06-24 10:37:53 PDT
<rdar://problem/17437531>
Comment 4 Dean Jackson 2014-06-24 14:05:29 PDT
Yikes.
Comment 5 Klaus Reinfeld 2014-07-14 11:53:12 PDT
Any news on this bug?
Why is it still not assigned?

Technically it shouldn't be very difficult to fix that bug - either enable the 'play-inline' support in the iPhone Safari (like on the iPad) or don't trigger the 'fullscreen playback' when the video itself wasn't added to the DOM (e.g. when the video has no parent, that's typically the case when showing the video indirectly via Canvas or WebGL).
Comment 6 Ashley Gullen 2014-07-15 07:11:01 PDT
Still reproduces on iOS 8 beta 3.
Comment 7 Ashley Gullen 2014-07-23 08:43:18 PDT
Still reproduces on iOS 8 beta 4.
Comment 8 MooLee 2014-09-17 23:15:24 PDT
Still reproduces on iOS 8.
Comment 9 TReact 2015-04-14 03:03:13 PDT
Still reproduces on iOS 8.3
Comment 10 Thomas Hansen 2015-05-13 23:32:07 PDT
I'm also trying to upload video frames to texture for a webgl based webapp that we'd like to run on iPhones. 

One way I can sort of make it work, is to to decode video streams in javascript using https://github.com/mbebenita/broadway(android h264 decoder > emscripten > js).  But the performance is suboptimal and still needs to be synced to separate audio playback currently.


If someone can point me in the right direction as to where in the source tree I might start looking, I'd be happy to report back anything I can find about this issue.  I have checked out webkit from https://github.com/WebKit/webkit and have it building / running on an iPhone simulator.

I'm currently looking at HTMLVideoElement and HTMLMediaElement, but not sure I have quite figured out whats going on yet...

Thanks!
Comment 11 Ahmad Saleem 2022-08-02 13:13:41 PDT
I am able to reproduce this bug on iPhone 13 Pro Max using iOS 15.6 (Safari 15.6) using following test case:

Link - https://jsfiddle.net/Lhk3d5yu/show

^I took the test case from URL field via Wayback Archive and changed it into above JSFiddle.

I loaded the test case in the Private Window, it showed website for few seconds and then video appearing behind test and then made it go full-screen black and nothing and I have to come out of full screen.

Just wanted to share updated test results. Thanks!
Comment 12 Youssef Soliman 2022-08-15 11:58:01 PDT
The issue here is calling `video.play()` which will automatically fullscreen a video on iOS without the `playsinline` attribute. The workaround for this would be to set `video.playsInline = true` before calling `video.play()`.