WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
153588
REGRESSION (Safari 9): drawImage doesn't paint the current frame of a video
https://bugs.webkit.org/show_bug.cgi?id=153588
Summary
REGRESSION (Safari 9): drawImage doesn't paint the current frame of a video
@fregante
Reported
2016-01-28 03:56:10 PST
Created
attachment 270106
[details]
Reduced case `ctx.drawImage(video, ...)` only paints the first frame of `video` regardless of its `currentTime` This works in all other browsers, including Yosemite's Safari 8, but not on Safari 9.0.3 on El Capitan. This bugs appears on all the demos on the following site, albeit only occasionally
http://html5doctor.com/video-canvas-magic/
Attachments
Reduced case
(658 bytes, text/html)
2016-01-28 03:56 PST
,
@fregante
no flags
Details
Test case to reproduce bug
(635 bytes, text/html)
2016-05-26 14:32 PDT
,
George Ruan
no flags
Details
Fully Self-contained bug reproduction
(1.34 MB, text/html)
2016-07-05 13:45 PDT
,
Benjamin Goh
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1
2016-01-30 23:06:03 PST
I cannot reproduce this using the attached test case in Safari 9.0.3 on El Capitan.
@fregante
Comment 2
2016-02-09 12:29:40 PST
Please try again, other people are experiencing it.
http://stackoverflow.com/questions/35060414/safari-9-paints-only-the-first-frame-of-a-video-on-canvas-bug
Justin Hamm
Comment 3
2016-03-09 12:46:19 PST
Also getting this bug... It seems to be very intermittent, and takes multiple refreshes sometimes for the bug to occur. In addition if multiple browser tabs are open with the attached example, and one tab has the issue after a refresh, it will affect the other tab.
Jer Noble
Comment 4
2016-03-09 20:51:18 PST
I've only managed to catch this bug live once, in a shipping version of Safari. Some dtrace debugging showed that MediaPlayerPrivateAVFoundationObjC::videoOutputHasAvailableFrame() was repeatedly returning false, due to [m_videoOutput hasNewPixelBufferForItemTime:[m_avPlayerItem currentTime]] returning NO. <
http://trac.webkit.org/browser/trunk/Source/WebCore/platform/graphics/avfoundation/objc/MediaPlayerPrivateAVFoundationObjC.mm#L2204
>
Marc Tremblay
Comment 5
2016-03-14 14:52:01 PDT
Tested Federico's test case using Safari 9.0.3 on El Capitan (10.11.3) and it only ever draws the first frame. This is the same behavior I see everywhere else that I try to draw a frame of video to a canvas. The only exception I have found is Apple's Listing 17-2 Breaking video into tiles from
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html
- note that the embedded example is a rendered movie. If I drop that code in a file, it works reliably with the same config as above. One caveat may be that I've only tested with a video that is bigger than the one in Apple demo and haven't adjusted the code, so only a part of the larger video is being tiled/rotated.
Fran Solo
Comment 6
2016-03-18 05:11:51 PDT
I am having similar issues drawing a canvas on another canvas with simple drawImage canvas.drawImage(canvas2,0,0); It works on all browsers but not Safari 9 on Mavericks, neither IOS9 BUT ... if i resize the browser ... tadaa ... the problem is magically fixed !! WTF ??
Andre Venancio
Comment 7
2016-05-17 22:02:55 PDT
I'm using Safari (Version 9.1.1 (11601.6.17)) on Mac OS El Capitan (10.11.5 (15F34)) And when I open this example, I can only pain the 1st frame of the video.
http://jsfiddle.net/on1kh4o0/422/
Is there any work around?
George Ruan
Comment 8
2016-05-26 14:32:16 PDT
Created
attachment 279912
[details]
Test case to reproduce bug vid2.mov in video source is Big Buck Bunny short movie. Bug does not reproduce every time 100%. But, should after a number of refreshes.
George Ruan
Comment 9
2016-05-26 14:35:14 PDT
Existing test case media/video-canvas-drawing-output.html shows the bug, but does not catch it because it is looking at pixels that do not change between frames.
Daniel Rossi
Comment 10
2016-06-27 21:26:53 PDT
This is a known issue and requires drawing twice. Simply before doing the real draw and capture context.drawImage(video, 0, 0); Call this with a 1 second delay before capturing again. var canvas = this.createCanvas(), context = canvas.getContext("2d"); context.drawImage(container, 0, 0); this.clearCanvas(canvas); setTimeout(function() { onSuccess(container); }, 1000); Saying that you still need to use a CORS proxy for Safari so bring up a second stream and seek, then pre capture then do the real capture. Alot of mucking around for Safari. Even with mediasource it requires the same reloading of the stream and seeking.
Daniel Rossi
Comment 11
2016-06-27 21:28:56 PDT
So you don't exactly need to use the same canvas just a temporary one. It's something to do with the mediaelement just like the nasty cors bug that is breaking 360 video rendering.
Radar WebKit Bug Importer
Comment 12
2016-06-27 21:35:29 PDT
<
rdar://problem/27047668
>
Benjamin Goh
Comment 13
2016-07-05 13:45:24 PDT
Created
attachment 282814
[details]
Fully Self-contained bug reproduction A fully self-contained HTML file with a video encoded as a base64 data URL to reproduce the issue.
Benjamin Goh
Comment 14
2016-07-05 13:46:44 PDT
I've successfully reproduced the issue in a consistent way, with the newly uploaded HTML file I've added. If you hide the video player and start playing it, then the video capture works fine. Also, playing, pausing, switching to another tab then switching back seem to "refresh" the video and fix the issue. This is a definite bug, please fix it.
Andrew Sinagra
Comment 15
2016-07-15 13:05:13 PDT
I was able to consistently reproduce this bug on OSX 10.11.3 with Safari 9.0.3. Switching to a new desktop and back to the one with Safari and then calling drawImage will work properly.
Lucas Correia
Comment 16
2016-09-01 00:20:45 PDT
I am also experiencing the same issue on Safari 9.0.3 & Mac OS 10.11.3l (El Capitan). The previous examples all show the issue. Switching desktop, going fullscreen or switching browser tab before copying the video will result in the correct frame. I have not found any way to workaround the issue.
Denny
Comment 17
2016-09-20 14:12:25 PDT
I tried two of the test cases above with Safari 10.0 and the capture is working. I'm on 10.11.6 and Safari 10.0 (11602.1.50.0.10). Anyone else verify this?
Lucas Correia
Comment 18
2016-09-26 05:38:00 PDT
(In reply to
comment #17
)
> I tried two of the test cases above with Safari 10.0 and the capture is > working. I'm on 10.11.6 and Safari 10.0 (11602.1.50.0.10). > > Anyone else verify this?
I still experience the same issues on OS X 10.11.6 (15G1004), Safari 10.0 (11602.1.50.0.10). I am however not able to reproduce the issue consistently. Some times capture works, sometimes it doesn't. It was easiest reproduced by repeatedly reloading the JSFiddle posted earlier (
http://jsfiddle.net/on1kh4o0/422/
) and checking if the canvas to the right played back the video.
Jer Noble
Comment 19
2016-09-26 07:11:29 PDT
For those of you who are able to consistently reproduce, would you please gather a sysdiagnose while reproducing, attach that sysdiagnose to a new Radar at bugreport.apple.com, and then send me the Radar #? This is likely an underlying OS issue and the sysdiagnose will have valuable logs for figuring out what is going on.
calipoop
Comment 20
2017-01-25 22:58:32 PST
Any update on this? It's still an issue, and very troublesome given that it's intermittent and there doesn't appear to be a work-around...
Daniel Rossi
Comment 21
2017-01-25 23:03:34 PST
call draw image then a timeout then draw image again for Safari. It stops the black frame issue. Here is an es6 util of mine before I do the actual capture preCapture(container, onSuccess) { const canvas = this.createCanvas(), context = canvas.getContext("2d"); context.drawImage(container, 0, 0); this.clearCanvas(canvas); setTimeout(() => { onSuccess(container); }, 1000); } Maybe its only required once no idea. I've become a master of finding work around for all these faulty webkit flaws. I even copped abuse on one ticket for eventually reporting a work around in that ticket and telling them not to bother after months of no response hahah.
calipoop
Comment 22
2017-01-26 08:35:48 PST
(In reply to
comment #21
)
> call draw image then a timeout then draw image again for Safari. It stops > the black frame issue. > > Here is an es6 util of mine before I do the actual capture > > preCapture(container, onSuccess) { > const canvas = this.createCanvas(), > context = canvas.getContext("2d"); > context.drawImage(container, 0, 0); > this.clearCanvas(canvas); > > setTimeout(() => { > onSuccess(container); > }, 1000); > } > > Maybe its only required once no idea. > > I've become a master of finding work around for all these faulty webkit > flaws. > > I even copped abuse on one ticket for eventually reporting a work around in > that ticket and telling them not to bother after months of no response hahah.
Thanks for the tip - I'll give it a whirl.
Staffan Klashed
Comment 23
2020-02-26 00:38:00 PST
I am encountering this bug on Safari on iOS 13.3.1, when attempting to capture a video poster at a user-defined currentTime by rendering video into a canvas + toDataURL. It reliably happens if the video file's EXIF rotation is non-zero. Any thoughts?
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug