Created attachment 271208 [details]
Screenshot of Chrome (left) and Safari (right) behavior.
It's really common practice to use a <video /> element to play some content. Less frequent, but still very useful is to take that elements content and put it in a canvas. In this example I'm using the <video /> element, but pointing it to a stream via the library Shaka Player (https://github.com/google/shaka-player). I expect to be able to take the pixel information of the <video /> element at a given time and reproduce it / manipulate it on a canvas element. However, in Safari 9 this is not the case. When implementing with WebGL I get a DOM Exception 18 error. When implementing with canvas I get no error, but also no image. The assets are same domain, so I don't think there are CORS issues present. Below are links that reproduce this behavior:
1) Go to either:
Example using canvas via texImage2D in WebGL (with Three.js):
Example using canvas via drawImage directly:
2) Click the "Play Button" on the <video /> element.
3) The video starts playing
When going through these steps in Google Chrome when I hit play I see 2 videos on the page. One that is the <video /> element and one that is the <canvas /> element that reproduces the pixel information of the source <video /> element. I expect Safari to behave similarly.
This looks to be the same bug as #135379. Because loading is done by AVFoundation and not WebKit, we don't have an opportunity to verify CORS headers, and thus all cross-domain resources will taint canvas and WebGL contents when painting.
*** This bug has been marked as a duplicate of bug 135379 ***
Thanks for the quick reply! I'm still trying to understand the issue in the other bug, but from a preliminary look I think that bug is different. In the case of this issue the error is being thrown despite the contents being on the same domain. In addition, the <canvas /> element demo (https://dl.dropboxusercontent.com/u/1595444/shaka-player/shaka-canvas.html) throws no errors but does not transfer content.
I'm not an engineer and just a simple web developer so my understanding of how DOM -> rendering is very naive, but to me the issue seems to be in the irregularity of the <video /> elements behavior.
Also, I believe this was previously working before I updated to Safari 9. I need to confirm this though. Are there archived versions of Safari available?
Aha, this is a slightly different, but related, issue than the one in #135379. The CORS check fails because the scheme used for the <video> element ("blob://") does not match the one used for the page ("http://"). Additionally, nothing is painted to canvas because our MSE back-end does not currently support painting. We'll have to re-write the way decoding works to get access to the decoded frames before they're added to a AVSampleBufferDisplayLayer, in order to be able to paint efficiently. I raised this issue with Richard in the linked bug.
And no, I suspect that this never worked in any Safari.
Looks like the correct dup for this bug is #125157.
*** This bug has been marked as a duplicate of bug 125157 ***
Ahh, this is awesome. Thanks so much for the fast reply and information!
This is a matter of leaving things to the last minute. An accident waiting to happen.
It is related to the CORS flaw. Once CORS support is enabled , MediaSource WebGL textures will still be a problem. A very basic usage.
See this for reference
My proxy hack work around does not work on Dash only mp4 files.