search

hydra-synth / hydra

Livecoding networked visuals in the browser
https://hydra.ojack.xyz
GNU Affero General Public License v3.0
2.15k stars 261 forks source link

Image Use / Referencing Doesn't Work in Chrome #180

Closed bgenchel closed 2 years ago

bgenchel commented 2 years ago

Using Chrome 98.0.4758.109 (Official Build) (x86_64) on MacOS Monerey (12.2.1)

I can't get image loading to work. First, for understandable reasons - wasn't allowed to use local images due to Chrome's security policy.

I tried linking an image hosted on dropbox - "Access to image at '{image url}' from origin 'https://hydra.ojack.xyz' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I tried using a free image hosting service and got the same error. Finally, I tried running the example listed in the readme, with the same image url given there. No error, but just seeing: "calling event editor:evalAll {}[[Prototype]]: Object" and nothing happens in the synth.

I have yet to try this in other browsers.

geikha commented 2 years ago

The CORS in CORS policy stands for 'Cross-origin resource sharing'. This basically means calling resources (such as images) from one website to another. For example, calling an image hosted on other website from inside the Hydra editor. If you still get the same error it just means the website you're calling the image from doesn't allow it. You said you used a free image hosting service, that should've worked since most of these allow CORS. Check if there's a setting to allow it or make public, something like that. If not, I recommend using imgur, it has always worked for me personally. So basically, this isn't an issue with Hydra, this is part of how the internet works! CORS needs to be allowed by the host providing the resources in order for it to happen. You may find it good to know Chrome now has an API for loading local images, so soon enough we expect to add this as a feature to Hydra.

About the console output

calling event editor:evalAll {}[[Prototype]]: Object

This will appear each time you evaluate all the code on the Hydra editor. When you press the play button or use the keyboard shortcut Hydra calls the event evalAll which does the inner stuff necessary in order to tell the browser to run your code.

Hope this helps!

bgenchel commented 2 years ago

Thanks. This still does not explain why the image given as example in the README doesn't load.

geikha commented 2 years ago

You mean this one? :

s0.initImage("https://upload.wikimedia.org/wikipedia/commons/2/25/Hydra-Foto.jpg")
src(s0).out()

This one in particular is actually working for me. Interesting.

geikha commented 2 years ago

Please give that exact code a try and send any errors that pop up!

ojack commented 2 years ago

(@bgenchel here is a direct link to the sketch if you want to just try opening: https://hydra.ojack.xyz/?sketch_id=lQNpwM4ePC10uDES )

ojack commented 2 years ago

Closing because I don't think this has to do with hydra; feel free to continue discussing.