Jump to content

Cross origin problem (spritesheet & mp4)


Herbert
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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~

Link to comment
Share on other sites

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".

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...