Image/Video sourceType not working as expected

nicolocarpignoli commented 4 years ago

Describe the bug

Using Image or Video as sourceType not rendering expected results.

To Reproduce

Try:

arjs="sourceType: image; sourceUrl: https://cdn.glitch.com/c9111e7d-1d31-41a0-8e15-78b57caa9816%2Fhiro.jpg?v=1569447311795;

and:

Expected behavior

A red box to appear on top of the image.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information): Chrome, Mac https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js

Originally posted by @jonasjohansson in https://github.com/jeromeetienne/AR.js/issues/593

kalwalt commented 4 years ago

@jonasjohansson probably you have this issue because are you trying this on Glitch and the canvas i tainted? Are you receiving this kind of error in the console?

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at ARController._copyImageToHeap (https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js:1046:28)
    at ARController.detectMarker (https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js:518:12)
    at ARController.process (https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js:139:8)
    at ARjs.Context.THREEx.ArToolkitContext.ARjs.Context._updateArtoolkit (https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js:2683:23)
    at ARjs.Context.THREEx.ArToolkitContext.ARjs.Context.update (https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js:2556:14)
    at ARjs.Session.update (https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js:4025:13)
    at o.tick (https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js:5996:25)
    at HTMLElement.tick (https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js:941:11947)
    at HTMLElement.render (https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js:941:12381)
    at https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js:1072:132

you can check this my codepen and you will get that error. In localhost and other env i'm sure that it is working ( i will provide a link when i have time).

kalwalt commented 4 years ago

It works for me see this link: https://kalwalt.github.io/kalwalt-interactivity-AR/arjs/default-thinner-border.html

AR-js-org / AR.js