Cross origin problem (spritesheet & mp4)

[Herbert]

Hi guys
I have problems using cross origin resources,  as I tested direct load of image is working, but the spritesheet & mp4 I still can't get it work, here is some use cases:
 

// it works
var image = PIXI.Sprite.fromImage(CROSS_ORIGIN_URL_IMAGE);

// not work and showing the error message
// Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded
var videoTexture = PIXI.Texture.fromVideo(CROSS_ORIGIN_URL_MP4);
var video = new PIXI.Sprite(videoTexture);

// my json file is at local, and the image is on cdn server, so I change baseUrl right after add function, the image is loaded successfully, but when I try to use it, it shows the similar message
// pixi.min.js:8 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at ... may not be loaded.
PIXI.loader.add("/src/image/spritesheet.json");
PIXI.loader.baseUrl = CDN_SERVER_BASE_URL;
PIXI.loader.load(() => {
    var image = PIXI.Sprite.fromImage(FRAME_KEY);
});

the response header has the property "access-control-allow-origin: *", and the same mp4 URL works fine in DOM element, am I missing something?

[xerver]

My guess is you are experiencing this issue: https://github.com/pixijs/pixi.js/issues/4007

Looks like the loader also has a bug where it doesn't set the crossOrigin value of videos/audio correctly. You can work around it by creating the video DOM element youself, setting the crossOrigin value, and then passing it into the loader with:

.add('video-url', { metadata: { loadElement: myVideoDomElement } })

However, the image is a bit more interesting. You can try ensuring it *doesn't* set the crossOrigin attribute with:

.add('json-url', { crossOrigin: '' })

Edit: I opened a couple issues that this post made me think of, thanks! https://github.com/englercj/resource-loader/issues

[Herbert]

Hi xerver:
you are right about audio part, i am meeting the issue as you posted, the method in the article works for me, I also try the loader solution you suggest, but it doesn't work.
As for the spritesheet part, I had actually tried setting empty string already(I read it from your response on another article), but it doesn't work, maybe it's because it is non-cross-orgin for the json file,
but it is cross-orgin for the image file, so the cross-orgin property would be incorrect for either of them?

 

[Herbert]

or, this is the article I mentioned which has your response(https://github.com/pixijs/pixi.js/issues/4056)
as you said, not setting crossOrigin will dirty the canvas, could it be the reason? since it might restrict the access to some image data.

 

[xerver]

It would restrict access to *reading* data from the canvas.

I think the next step here is for you to build a minimal example that reproduces the error and lets debug it. A jsFiddle or similar would be perfect.

[Herbert]

I found the problem when I am making the fiddle.

It turns out in my case I should pass "anonymous" to crossOrigin instead of an empty string. The reasons are
1. It Seems empty string is the solution for canvasRenderer, and I am using webgl.
2. My target server has proper CORS header, so I don't need to avoid crossOrigin attribute being set(actually for webgl, I think I need it to be set to access cross origin resources).

// load the local json, pass 'anonymous' to crossOrigin since my image is on another domain
PIXI.loader.add("/src/image/spritesheet.json", {crossOrigin: 'anonymous'});

// set the baseUrl to the domain where my image is located
PIXI.loader.baseUrl = CDN_SERVER_BASE_URL;

PIXI.loader.load(() => {
    var image = PIXI.Sprite.fromImage(FRAME_KEY);
});

thanks for your help xerver, and looking forward to the features that you added to the milestone.

* please correct me If I am wrong~

[Herbert]

I am having another issue,
to avoid cache, I will add ref number after filename.

PIXI.loader.add("/src/image/spritesheet.json?123", {crossOrigin: 'anonymous'});

but it wont be passed to image path, so the image on the cdn server will be cached.

How can I load the image as "spritesheet.png?123" instead of "spritesheet.png".

[xerver]

This is because the loader loads the URLs it is given. You have the query string on the json file, but in the json file it doesn't specify a query string on the image, so it doesn't use one.

You can check out the "defaultQueryString" property (http://englercj.github.io/resource-loader/Loader.html#defaultQueryString) which will add a query to the end of every URL that loader makes. That can ensure that everything is cache busted.

[Herbert]

I think defaultQueryString is exactly what I want, thanks