[Webkit-unassigned] [Bug 196772] New: iOS 12.2 Drawing portrait video to canvas is sideways

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=196772

            Bug ID: 196772
           Summary: iOS 12.2 Drawing portrait video to canvas is sideways
           Product: WebKit
           Version: Safari 12
          Hardware: iPhone / iPad
                OS: iOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Canvas
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: douglasparker at google.com
                CC: dino at apple.com

Created attachment 367130

  --> https://bugs.webkit.org/attachment.cgi?id=367130&action=review

The top part has the video playing correctly, while the bottom is drawn on a canvas sideways.

In iOS 12.2, using a canvas context to `drawImage()` of a <video /> element with a portrait-oriented source will render sideways, with the bottom cut off. Screenshots attached.

Demo: http://jsfiddle.net/3ugmLc0w/39/show
Source: http://jsfiddle.net/3ugmLc0w/39/

Visit the demo URL on iOS 12.2 (I have an iPod Touch, but we've seen this on other models), capture a test video (in portrait orientation) and play it. The <video /> tag will play correctly, but the <canvas /> will render sideways. Landscape videos seem to work ok.

We use this technique in our PWA to extract a thumbnail from a video by drawing the first frame onto a canvas, then saving that canvas to a Blob to store the thumbnail for use later. All of our portrait video thumbnails are now sideways do to this bug. This problem reproduces consistently and results in videos with very bad thumbnails. If you want to see this in our real app, the steps would be:
1) Visit https://posts.google.com/bulletin/app/ on an iOS 12.2 device.
2) Follow the steps to create an account until you get to the home screen.
3) Tap the floating action "Start Story" button in the bottom right.
4) Tap the "Take video" button and capture a portrait (!) video.
5) Observe that the video thumbnail shown is sideways.

Our only option for a workaround would be to detect iOS 12.2 and attempt to rotate the frame back to the correct orientation. This is clearly pretty hacky, and we'd rather avoid that if at all possible. If this bug can be limited to iOS 12.2 only via a timely WebKit fix, then client-side workarounds might not be necessary with iOS 12.3 on the way.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190410/d3c7d248/attachment-0001.html>