We are developing for Samsung Tizen 2.4 which runs an old version of webkit.
We are seeing some errors when attempting playback using Web-GL, canvas video works. I think this might be related to the way webkit handles the crossorigin attribute. It looks like lighting tries to set this. (Lightning/WebPlatform.mjs at 35dc08544f8906c989833b0967ab54b542553085 · rdkcentral/Lightning · GitHub) has anyone every come across something like this or have any ideas for workarounds?
SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent
If we are unable to get webGl play back prehaps we could render out UI in webgl and video in a 2d. I guess this would require to canvas’s to be switched in and out. Has anyone tried this?
Hi @lpoulter ,
when attempting playback using Web-GL
Does this mean you are using textureMode
? Is playback not working with regular HTMLVideoElement or Metro SDK VideoPlayer?
Do you have a stack trace or do you just see the error message?
Have you turned off useImageWorker
as well? Maybe the browser doesn’t support web worker. Did you try to polyfill that?
What’s a bit confusing is that you are talking about video playback but the line you mentioned in Lightning deals with images. Is this from a poster you are setting?
Maybe with more information we can help you out.
Cheers on using Lighting in Tizen tho. It’s interesting to see what kind of issues pop up in non RDK environments.
Hi there are 2 errors in the console the DOM exception this tack trace.
Unable to get image data from canvas because the canvas has been tainted by cross-origin data. [native code]:1
getImageData[native code]:1
uploadGlTexturebundle.main.6755da127725f9dc20d2.js:167156
uploadTextureSourcebundle.main.6755da127725f9dc20d2.js:168491
_nativeUploadTextureSourcebundle.main.6755da127725f9dc20d2.js:178486
uploadTextureSourcebundle.main.6755da127725f9dc20d2.js:178399
setSourcebundle.main.6755da127725f9dc20d2.js:178827
processLoadedSourcebundle.main.6755da127725f9dc20d2.js:178798
_processItembundle.main.6755da127725f9dc20d2.js:179023
processSomebundle.main.6755da127725f9dc20d2.js:179013
drawFramebundle.main.6755da127725f9dc20d2.js:177059
lp
I thought maybe the getImageData is used to render video sending a new image every animation loop? Or perhaps these are 2 different errors? The rest of the app works fine including displaying images.
Further investigation has led to this webkit bug 135379 – iOS 8 / OSX 10.10 WebGL - using a video from an other domain fails (CORS bug). So I’m starting to think we may never be able to get video playback with web gl and need to look to alternatives. How viable do you think the two canvas’s idea is? Using webgl for the application interface and switching to 2d for video playback.
The line that’s failing seems to be this one Lightning/WebPlatform.mjs at b17b3a5f09b5366e33755091e7d7e1da364394bd · rdkcentral/Lightning · GitHub
But if you look at this SO answer Lighting is actually adding the img.crossOrigin = "Anonymous";
that they mention. javascript - How to fix getImageData() error The canvas has been tainted by cross-origin data? - Stack Overflow
Do your images have the right headers mentioned?
Access-Control-Allow-Origin "*"
The method is a Web API so should behave similarly across browsers CanvasRenderingContext2D.getImageData() - Web APIs | MDN
There maybe a bug in WebKit r152340 in worst case.
First, check all the things mentioned in the SO link above. If nothing works create a detailed ticket in GitHub.
1 Like
This platform has lots of odd “security” issues, for instance you can’t render a SVG image in Lightning as drawing it to canvas results into a similar error - the canvas sandboxing seem buggy on 2.4.
For video the safe bet is to have an HTML5 video tag behind the Lightning canvas.
For SVG it is possible to do a custom rendering using a JS library like canvg, but it’s a bit of a pain.
1 Like